Why Meta Tags Still Matter in 2026
Meta tags are the first thing search engines and social platforms read when they encounter your page. A well-crafted title tag directly influences your click-through rate from search results. Open Graph images determine how your link looks when shared on LinkedIn, Twitter, Slack, and iMessage. Getting these right is not optional — it is the difference between a link that gets clicked and one that gets scrolled past. Framer provides built-in fields for all of these, but knowing exactly where to find them and how to configure them for CMS pages requires a walkthrough.
Setting Title Tags and Meta Descriptions
For static pages, select the page in the left panel, open the page settings gear icon, and scroll to the SEO section. You will find fields for SEO Title and SEO Description. The title should be under 60 characters and include your primary keyword near the beginning. The description should be between 150 and 160 characters, include the keyword naturally, and provide a compelling reason to click. Framer uses these values to generate the <title> and <meta name="description"> tags in the HTML head.
If you leave the SEO Title blank, Framer uses the page name as the title tag. This is almost never what you want — page names like 'Home' or 'About' are generic and waste valuable SERP real estate. Always set explicit SEO titles.
Configuring Open Graph Images
In the same SEO section of page settings, you will find the Social Image field. Upload a 1200 by 630 pixel image here. This image becomes the og:image tag and is used by Facebook, LinkedIn, Twitter, Slack, Discord, and most messaging apps when your link is shared. Use high-contrast text overlays with your brand colors to make shared links stand out in feeds. Avoid images with important content near the edges, as different platforms crop differently.
Twitter Card Configuration
Framer automatically generates Twitter Card meta tags using the same OG image and description. By default, it uses the summary_large_image card type, which displays a large preview image. If you want to override this behavior or add a different image for Twitter specifically, you can inject custom meta tags in the page's custom code head section. Add <meta name="twitter:image" content="your-image-url"> to override the default.
Meta Tags for CMS Collection Pages
CMS pages require a different approach because each collection item needs unique metadata. In your CMS collection settings, create fields for SEO Title, SEO Description, and Social Image. Then, in the collection page template settings, map these CMS fields to the corresponding SEO fields using the variable picker. This ensures every blog post, case study, or product page gets its own unique title, description, and social image rather than inheriting the template defaults.
- Create a 'SEO Title' field (Plain Text) in your CMS collection.
- Create a 'SEO Description' field (Plain Text) with a character limit of 160.
- Create a 'Social Image' field (Image) and set the recommended dimensions to 1200x630.
- Open the collection page template settings and map each field to the corresponding SEO property.
- Test each published CMS page using the Facebook Sharing Debugger and Twitter Card Validator.
Adding Custom Meta Tags via Code Injection
For meta tags that Framer does not support natively — such as article:published_time, article:author, or custom verification tags — use the custom code section. Go to page settings, scroll to the Custom Code area, and add your tags in the Head section. These are injected directly into the page's <head> element. For site-wide tags like google-site-verification or organization-level OG tags, use the site-wide custom code settings instead of adding them to every page individually.
Validating Your Meta Tags
After publishing, validate your meta tags with these tools: Google's Rich Results Test for structured data, Facebook Sharing Debugger for OG tags, Twitter Card Validator for Twitter-specific previews, and LinkedIn Post Inspector for LinkedIn previews. Also inspect the page source directly by viewing the HTML — search for <meta property="og:" to verify all OG tags are present and correct. Run these checks on both static pages and CMS pages to catch any mapping issues.
Social platforms cache OG images aggressively. If you update an OG image and the old one still appears, use the Facebook Sharing Debugger's 'Scrape Again' button and Twitter Card Validator to force a refresh. LinkedIn Post Inspector also has a refresh option.
Common Mistakes to Avoid
- Using the same title and description on every page — this creates duplicate content signals.
- Uploading OG images larger than 5MB — social platforms will time out and show a blank preview.
- Forgetting to map CMS fields to SEO properties — every CMS page will share identical metadata.
- Including the site name in every title tag — this wastes character space and adds no ranking value.
- Using decorative images as OG images — choose images with readable text or clear visual context.
Need help setting up SEO-optimized meta tags across your Framer site?
Get Expert Help→
