Publishing & Settings, SEO

Structuring Content with Semantic Tags in Framer (SEO Lesson 2)

Structuring Content with Semantic Tags in Framer (SEO Lesson 2)

Structuring Content with Semantic Tags in Framer (SEO Lesson 2)

Justin

·

6:16

·

6K views

·

Jul 7, 2025

About this lesson

Learn how to structure your content properly in Framer using semantic tags like headings, paragraphs, and layout frames. In this lesson, we’ll show you how to improve both accessibility and SEO by giving your content the meaning and structure it needs to be understood by screen readers, search engines, and users alike.

https://www.youtube.com/watch?v=x5yl7Fk5FQk&t=0s Introduction

https://www.youtube.com/watch?v=x5yl7Fk5FQk&t=30s What is a Semantic Tag?

https://www.youtube.com/watch?v=x5yl7Fk5FQk&t=67s Headings & Semantic Tags

https://www.youtube.com/watch?v=x5yl7Fk5FQk&t=145s Semantic Tags for Text

https://www.youtube.com/watch?v=x5yl7Fk5FQk&t=181s Frame Tags

https://www.youtube.com/watch?v=x5yl7Fk5FQk&t=269s Other Semantic Tags Worth Knowing

https://www.youtube.com/watch?v=x5yl7Fk5FQk&t=331s Why It All Matters

Check out the full course here: https://www.framer.com/academy/courses/structure-for-visibility-with-seo-in-framer

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

MB013MQ8YHMNWAA

0:00If search engines can't figure out the 0:02structure of your page, they're less 0:04likely to show it to the right people.0:06That's why using semantic tags matter.0:08They help your content make sense even 0:11without the visuals.0:13In this lesson, we'll look at how to 0:15structure your site properly using 0:17heading levels, text tags, and frame 0:20labels so everything is clear, readable,0:23and easy to understand for both people 0:26and search engines.0:28Before 0:31we dive in, let's quickly define what a 0:34semantic tag actually is. Simply put,0:37it's just a bit of code that tells the 0:39browser what a piece of content is, not 0:42just how it looks. So instead of saying,0:44make this text big and bold, a semantic 0:47tag says this is a heading or this is a 0:51paragraph. These tags help search 0:53engines and screen readers understand 0:55the structure of your content without 0:58needing to see the design. Now that we 1:00understand what a semantic tag is, let's 1:03start by talking about one of the most 1:05important ones, headings. Headings are 1:08used to create a clear hierarchy on your 1:11page. And they're marked in HTML as H1 1:14through H6. H1 is the most important.1:18It's the top level heading, usually your 1:20main page title. H2s act as section 1:24headers. Beneath that, H3 break those 1:27down even further, like subsections 1:30inside a section. And it continues all 1:33the way down to H6, which is rarely 1:36used, but exists if we need deeper 1:39levels of structure. Think of it like 1:41the anatomy of a book. H1 is the title.1:44H2s are the chapters. H3s are the 1:47subheadings inside each chapter and so 1:50on. Now, here's the big rule. Each page 1:54should have one H1, just one. Clearly 1:57stating what the page is about. This not 2:00only helps screen reader users scan the 2:02page easily, it also helps search 2:04engines understand what's important and 2:07how your content is organized. In 2:09Framer, you can easily assign a semantic 2:12tag to any text by applying a text style 2:14in the properties panel. If you're not 2:17using a text style, but still want to 2:18tag it properly, just scroll down to the 2:21accessibility section of the properties 2:22panel and choose the tag from there.2:25This also applies to regular paragraph 2:28text. If you're styling something to 2:30look like body copy, make sure it's 2:32actually tagged as a paragraph because 2:34that little P tag tells browsers, screen 2:37readers, and crawlers this is just 2:39normal reading text. And that matters a 2:43lot because when text is tagged 2:46correctly, screen readers can read it 2:48naturally and search engines can tell 2:50it's part of the core content of the 2:52page, not just some random UI label or 2:55heading. It also makes your site more 2:58consistent and easier to maintain in the 3:00long run. Now, let's talk about frames.3:04Since in Framer, our layout is built 3:07from them. Just like text, your layout 3:10should also follow a clear structure 3:12using semantic frame tags. These include 3:15things like header, main, section, and 3:18footer. And they tell screen readers and 3:20search engines how your page is 3:22organized at a high level. Here's a good 3:25way to think about it. Header is 3:28typically the top of your site where 3:30your logo, navigation, or page title 3:33might live. Main is where the core 3:35content of the page goes. This is 3:38usually what people came to see. Section 3:41is for breaking that main content into 3:44meaningful chunks or topics. And footer 3:47is the bottom of your site, often with 3:49things like links, copyright info, and 3:52social media icons. To tag a frame,3:55we'll select it and head back to the 3:57accessibilities property. Just like we 3:59did with the text, but this time we'll 4:01notice a few different options depending 4:04on the element type. We'll see the 4:06options tag, ara label, tab index, and 4:10Googlebot. For now, let's focus on tag.4:14When we click it, Framer gives us a list 4:16of options to choose from. Things like 4:18header, main, section, and more. This is 4:22where we decide what role that frame 4:24plays in the structure of the page and 4:27assign the tag that fits best. Before we 4:30wrap up this lesson, there are a few 4:32more semantic tags worth mentioning,4:34even if you won't use them everyday in 4:37Framer. Tags like UL for unordered lists 4:40and O for ordered ones help screen 4:43readers understand that the content is 4:45part of a group and read it out easily.4:48There's also article, which is great for 4:51self-contained content like blog posts 4:53or cards, and aside, which you'd use for 4:57things like sidebars or extra info 4:59that's related but not part of the main 5:02content flow. And then there's div,5:05which isn't semantic at all. Div is used 5:09when you just need a basic container,5:11but if there's a more meaningful tag 5:13available, you should use that instead.5:15Overusing div is a quick way to lose 5:18structure and clarity. You most likely 5:22won't be using these tags often, but 5:24it's still helpful to understand them,5:26especially if you're collaborating with 5:28developers or other team members. So, to 5:31bring it all together, the structure of 5:33your site is what allows screen readers 5:35to navigate it, and it's how search 5:37engines figure out what content matters 5:40most. It's the foundation for both 5:43usability and visibility. In the next 5:46lesson, we'll go deeper into how to 5:48describe individual elements like images 5:51and icons and how to use things like alt 5:54text and area labels the right way. For 5:57now, just remember structure isn't 6:01styling. It's meaning. And meaning is 6:04what makes your site work for everyone.6:08I'll see you in the next one.

TeachesSemantic Tags

Also coversFrames Links Meta Titles & Descriptions SEO Audit Text Styles

Watch on YouTube ↗

‹ Framer Update: Link Decoration Styles

Intro to SEO & Accessibility in Framer (SEO Lesson 1) ›

More in this topic

Hard work, easy website. Get a Free Domain with Framer.

Hard work, easy website. Get a Free Domain with Framer.

Announcement13M views · 4 months ago

This website never happened — Get a free domain with Framer

This website never happened — Get a free domain with Framer

Publishing & Settings4.7M views · 4 months ago

Free Domains with Framer: Go Build It

Free Domains with Framer: Go Build It

Publishing & Settings9.1M views · 4 months ago

Introducing Advanced Hosting in Framer

Introducing Advanced Hosting in Framer

Announcement7K views · 4 months ago

Transferring Framer projects to clients

Transferring Framer projects to clients

Publishing & Settings9K views · 5 months ago

Creating Remix Links in Framer

Creating Remix Links in Framer

Publishing & Settings3K views · 6 months ago

Make a Custom 404 Page in Framer

Make a Custom 404 Page in Framer

Layout & Design4K views · 7 months ago

How to get the most out of Framer for Free

How to get the most out of Framer for Free

Animations15K views · 8 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.