Stunning social Previews in Framer
Why share links matter
Well-configured share links make your content look professional and engaging when shared on social media platforms. They can significantly improve click-through rates and user engagement.
Setting up meta data in Framer
Access page settings from the left panel
Each page has individual settings for:
Page title
Page description
Social image (OG image)
CMS pages meta data
For CMS-driven pages, you can dynamically set meta data using variables:
Page Title: Use {{title}} to automatically insert the CMS entry title
Description: Similarly, use {{description}} for dynamic descriptions
Social Image: Reference CMS images using {{image}}
Note: the text value needs to be plain text or if it's coming from external database it should be string value
Best practices for meta data
Title Tags: Keep them between 50-60 characters for optimal display
Meta Descriptions: Aim for 150-160 characters to avoid truncation
OG Images: Use 1200x630 pixels for optimal display across platforms
URL Structure: Keep URLs clean and descriptive
Pro tips
Test your meta tags using social media preview tools
Include your brand name in titles when possible
Use compelling action words in descriptions
Create unique meta descriptions for each page
Optimize images specifically for social sharing
Common mistakes to avoid
Using generic meta descriptions
Forgetting to update OG images when content changes
Leaving default meta titles
Using low-resolution social images
Testing your share links
You could try some simple apps
Slack
iMessages
Twitter
Mobile optimization
Remember to check how your share links appear on different devices:
Test on both iOS and Android devices
Verify image scaling on mobile platforms
Ensure text readability on smaller screens
