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

Before going live, test your share links using these tools:

• Facebook Sharing Debugger

• Twitter Card Validator

• LinkedIn Post Inspector

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