How to update page titles, descriptions, and social images

Page titles, descriptions, and social images control how your site appears in search results and when shared on social platforms. Framer lets you define global defaults and override them at the page or CMS level, so each page can be optimized for search and sharing.

Set default site titles and descriptions

Start by defining the default metadata for your entire site. These values apply to all pages unless you override them later.

1. Open your project’s Site Settings.

2. Enter a Site title and Site description.

3. Publish your site.

Use clear, concise language that describes your site as a whole.

Override titles and descriptions for individual pages

If a page needs unique metadata, you can override the site defaults in its Page Settings.

1. Open your project settings.

2. Select the page under Page Settings in the left panel.

3. Enter a custom Title and Page Description.

4. Click Save, then re-publish your site.

You can also control whether the page appears in search engines or site search from this panel.

Add dynamic meta titles and descriptions for CMS items

For CMS-driven pages, you can use dynamic values so each item has its own metadata. This improves SEO and helps search results better reflect your content.

You can use CMS fields to dynamically populate both meta titles and descriptions, so each CMS page reflects its individual content in search results.

1. In your CMS, create Plain Text fields for your metadata.

   • Use one field for the title (for example, “Title”).

   • Use another field for the description (for example, “Description”).

2. Fill in these fields for each CMS item.

3. Open the CMS page’s Page Settings.

4. In the Title field, enter {{Title}} to pull in the CMS title.

5. In the Page description field, enter {{Description}} to pull in the CMS description.

You can also combine static text with variables, such as {{Title}} – Blog, to add consistent branding while keeping titles unique.

Set CMS cover images for social previews

CMS cover images control the image shown when a CMS page is shared on social platforms like X, LinkedIn, Slack, or in messaging apps. Each CMS item can have its own social preview image.

1. Add an Image field to your CMS (for example, “Cover image”).

2. Upload an image for each CMS item.

3. Open the CMS page’s Page Settings.

4. In Page images, under Social preview, choose CMS Variables and select your image field.

Framer uses a 1200 × 630 pixel aspect ratio for social previews. For best results, upload images that match this size and keep important content centered.

Preview and validate your metadata

To see how your titles and descriptions appear across services like Google, X, LinkedIn, and Slack, use Framer’s Meta Check tool. This helps you catch issues before publishing.

Control Google’s automated descriptions

Google may replace your meta description with other on-page text if it considers it more relevant. You can limit this behavior using accessibility settings.

1. Select the content you want Google to ignore.

2. Open Accessibility, click +, choose Google Bot, and set it to Skip.

3. To prevent Google from selecting any text, apply this setting to the outermost frame.