How to use semantic HTML tags in Framer for SEO

Using semantic HTML tags such as h1 and article makes your Framer site's content easier to understand for both search engines and AI models.

While google prioritizes tas like h1 for finding keywords, AI literally reads the words in your code and uses those tags to decide what matters most. When elements like <header>, <nav>, or <article> are in place, it improves how search engines and AI tools process a page.

With Framer it's super easy to set up these semantic tags.

How to set up the right tags in Text Styles

When creating a new style in the Text Styles panel, you get to choose what kind of tag Framer should give the text node with this style. This is the easiest way to use semantic tags for text. Make sure each page has at least one Heading 1 styled piece of text.

How to override a text style's tag

In the rare cases where you want to re-use a text style with a different tag we can override it in the accessibility panel. This way you don't end up with 1000s of styles in your Text Styles panel for each and every edge case.

Simply select your text node, and scroll down to the accessibility panel where you press the + icon and add the Tag property. A tag that's selected here always overrides the default for the Text Style

Semantic html tags for blocks and sections

By default nodes such as sections will be converted to a <div> tag when you publish your Framer sites. This makes it hard for machines to understand what kind of content is within the node. For a blog post you want to use the <article> for example, whereas for a footer you'd want to use the <footer> html tag.

In order to do this, select the node you'd like to give a custom tag, scroll down to the accessibility panel, and select the tag you'd like to use.

Why use semantic tags in Framer?

In order to get the most traffic from search engines and AI models, use semantic html tags that describe. AI models and search engines will understand your site much better!