Guide to SEO features and tools

SEO optimization

By default, Framer sites are optimized for SEO and include features like sitemap.xml and robots.txt automatically. To further enhance optimization, Framer offers tools to help you maximize your content's potential. Here's a quick guide on how to start optimizing your site for SEO.

Add meta titles and descriptions

In your site settings, you can provide custom title and description metadata for your entire site or for individual pages. You can also set custom titles and descriptions for your CMS pages. These elements help search engines understand the content and purpose of your pages. Watch this video tutorial for more information.

Adding compelling copy to your site's title and description can increase clicks on search results, boosting your SEO performance.

Keywords

In the past, people added keywords in a specific section to manipulate search engines. However, search engines now ignore those keyword sections. Instead, they analyze all the text on your site and extract relevant keywords. These keywords are determined based on their presence on your page, in your domain, and if other sites link to your site using those keywords.

To influence this process, focus on creating high-quality content that incorporates the keywords you want to rank for. Various tools and resources are available to assist you with this.

CMS detail pages

If you have content like a blog, news articles, or documentation, it's recommended to use the built-in CMS (Content Management System). This lets you easily display content lists and automatically generate pages for each piece. Search engines can then crawl and analyze these pages.

Semantic text and elements

Using proper semantic text and elements on your page is crucial for accessibility and SEO. For example, a strong main heading (H1) is important for SEO performance. Manually adjusting semantic tags on headers and image descriptions helps search engines understand your page's structure.

Ensure images have “Alt” set

The “Alt” text of images are important for both accessibility (e.g. for screen-readers) and SEO. Google and other search engines use it to understand what the image is about. Do not necessarily add keywords here, as Google will penalize it. Framer automatically optimizes the rest to ensure image SEO is great.

Tip: Make sure to end the “Alt” text with a punctuation (like a dot) to improve the accessibility (source).

Ensure videos have “Poster” set

Google and other search engines use the poster to display a preview (thumbnail) in search results and snippets (source). Ensure the poster has a minimum size of 60 x 30 px. Framer automatically optimizes the rest to ensure video SEO is great.

Structured data with JSON-LD

Consider implementing structured data using JSON-LD. This will enhance search results for content like events, articles, books, videos, and more.

Data-nosnippet directive

The ‘data-nosnippet’ attribute is a directive to Google to not use certain parts of the page when creating the snippet for that page in search results.

This directive can be useful if you don’t want Google to rewrite your meta description when displaying your page in the search results.

Please note that preventing Google from rewriting meta descriptions might potentially decrease your click-through rate, especially for long-tail keywords. (proof)

Additionally, using this directive will prevent Google from using that content for any type of snippet, including rich snippets, and not just the meta descriptions.

This means that if you set this directive on a page level, Google will not use any of that content in snippets, which could impact the appearance of your page in rich results.

However, it's important to note that while ‘data-nosnippet’ prevents certain parts of the page from appearing in search snippets, structured data on the page can still be used for generating rich results.

This means that while specific text content may be excluded from snippets, the structured data markup itself can still be utilized by Google to generate rich snippets.

You can read more about the details of using this directive in Google’s documentation.

If you still want to use this directive, you can easily add it to any layer in your project by using the ‘Googlebot: skip’ option in the accessibility section in the right sidebar.

Redirects to retain traffic

When replacing pages with a new design or reorganizing your site structure, it's important to use redirects to ensure a smooth transition for old link traffic. This helps prevent any loss of traffic due to typos or changes in your site structure.

You can create redirects in Framer by accessing your Site Settings. Just enter the old URL and specify the desired redirection path.

Analytics

Track your SEO success with Framer's built-in analytics. Measure your site traffic and identify its sources. Start seeing if your SEO setup is paying off. Explore more about analytics in Framer.

Framer has a built-in analytics feature. Additionally, it offers a site setting to integrate Google Analytics. Simply enter your analytics ID, and we will handle the configuration of your scripts.