Publishing & Settings, SEO

SEO and Accessibility in Framer (Fundamentals Lesson 26)

Joseph

10:22

22K views

Apr 18, 2025

About this lesson

We always want to ensure that the broadest audience possible can access and enjoy our content — which is why accessibility should be part of the foundation of our design process.

It’s also a primary concern of search engines, so by optimizing our site for accessibility, we’re also optimizing for search engines and often vice versa.

In this lesson we’re diving into the Framer features and best practices that make for a diverse audience of happy visitors all while boosting our visibility and ranking with search engines.

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=0s Intro

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=12s Why accessibility matters for SEO

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=29s Using semantic tags for text

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=57s Heading structure and screen reader benefits

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=80s Overriding semantic tags in Framer

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=102s Adding tags to frames and lists

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=129s Writing effective alt text for images

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=157s Avoiding keyword stuffing in alt descriptions

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=174s Using ARIA labels for non-image elements

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=202s Making button and link text descriptive

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=229s Managing tab order for better navigation

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=278s Setting tab index in Framer

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=297s Using the Google bot skip property

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=302s Accessibility and SEO site settings

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=335s Declaring site language and localization

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=367s Respecting reduced motion preferences

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=416s Setting page-level titles and descriptions

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=478s Writing effective meta titles and descriptions

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=511s Optimizing page URLs for search engines

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=585s Controlling page visibility in search engines

https://www.youtube.com/watch?v=OC5dyLTo7ig&t=595s Wrap up

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

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

0:00We always want to ensure that the 0:01broadest audience possible can access 0:04and enjoy our content, which is why 0:06accessibility should be part of the 0:08foundation of our design process. It's 0:11also a primary concern of search 0:13engines. So, by optimizing our site for 0:15accessibility, we're also optimizing for 0:17search engines. In this lesson, we're 0:20diving into framer features and best 0:22practices that make for a diverse 0:23audience of happy visitors, all while 0:26boosting our visibility and ranking with 0:28search engines.0:32While framework does generate well 0:34optimized code, a ton of impact comes 0:37from us assigning as much meaning as 0:39possible to elements on the page, which 0:41in turn benefits both visitors and 0:44search engines. Let's start by 0:45revisiting text styles. In an earlier 0:48lesson, we looked at how creating a text 0:50style starts with assigning a semantic 0:52tag like paragraph, heading one, heading 0:55two, etc. It's always best to use a 0:59clear heading structure, starting with 1:01an H1 for the most primary title on the 1:03page and then progressively moving down 1:05to H2, H3, and so on and so forth.1:08Breaking text down into a clean 1:10hierarchy is great for usability and 1:12improves the experience for users using 1:14screen readers, allowing easier 1:16navigation and access to information.1:19Back in our project file here, even 1:21though we set a semantic tag for the 1:24text style itself, we can override it 1:26for specific instances in the 1:28accessibility section on the properties 1:30panel. And this is where we'd go to set 1:33a tag for a text layer that doesn't have 1:35a text style applied. We can and should 1:39add semantic tags for frames as well.1:41For example, if I double click my way 1:43into this layout template, select the 1:46footer frame, and click the plus sign or 1:49title of the accessibility section, I 1:51can choose tag. Then I can specify that 1:54this is in fact a footer. Most of the 1:57items on this list are pretty 1:58self-explanatory. But if you're not 2:00familiar with O, that stands for ordered 2:03list, like a numbered list of items, and 2:05ul is an unordered list, like bullet 2:08points. And we can get even more 2:10detailed with our descriptions of 2:11images. If we select a frame with an 2:14image, then open the fill properties.2:17Here we see a field called alt text 2:19where we can describe the content of 2:21this image. These alt tags, also known 2:24as alt descriptions or alt attributes,2:27are also critical for screen readers 2:29that would otherwise be unable to 2:31describe an image on the screen. Plus,2:33it can ensure compliance with legal 2:35standards for accessibility. And of 2:37course, help search engines understand 2:38the content of images on the page. But 2:41again, don't go too nuts with keywords 2:43because search engines are smarter than 2:45that. Don't get penalized for being a 2:47spammy little weirdo. Just write a 2:49simple sentence describing the image 2:51with punctuation and all. We also have 2:55another accessibility tool algether for 2:57graphic elements that aren't images like 3:00icons for example. It's called an Arya 3:02label, which stands for accessible, rich 3:05internet applications. Arya labels are 3:08kind of like a hybrid between frame tags 3:10and alt text in that we can apply them 3:13to an element on the canvas like an icon 3:15and describe what it is so that a screen 3:17reader can read it to visitors using 3:19assistive hardware or software. One of 3:22these social media buttons is a great 3:24example cuz there's really nothing here 3:26for a screen reader to read. So with 3:28this frame selected, which is the actual 3:31clickable frame with the link applied to 3:32it, we can see in the accessibility 3:34section of the properties panel that 3:36there's already a tag applied called A,3:38which is HTML for link. And we can click 3:41accessibility to add an ARA label and 3:44get more descriptive with something like 3:46visit us on Instagram, which clearly 3:50describes what'll happen if a visitor 3:52who can't see this button selects it. If 3:55a button or link does have text, it's 3:57always best for that text to be 3:59descriptive. Again, like visit us on 4:01Instagram rather than just go or visit.4:05And whether visitors are using assistive 4:07tools or not, a whole lot of folks use 4:09the tab key to jump between links on the 4:12page, buttons, and inputs, which by 4:14default follow their arrangement in the 4:16layers panel and typically end up 4:18reading kind of like a book from top to 4:20bottom, left to right. But there will be 4:22times where designing the most efficient 4:24experience possible means us taking 4:26thoughtful control of the tab index. The 4:30Google homepage is a great example 4:31because if you read this like a book,4:33we've got 1 2 3 4 5 6 interactive 4:37elements that come before the search 4:40bar. And that search bar is where 4:41visitors are going to want to go first 4:43the vast majority of the time. But this 4:46page was actually designed with that in 4:48mind. and the search bar has been given 4:50the number one spot in the tab index.4:52Press tab once and you're immediately 4:55there. This is super easy to accomplish 4:58in Framer. Let's say I want this primary 5:00CTA to be the first thing focused when a 5:03visitor presses tab. I'll select the 5:05button, head to the accessibility 5:07section of the properties panel, and 5:09click to add the tab index property.5:12With this set to one, we're good to go.5:15Now in the browser, the first press of 5:17the tab key will focus our primary CTA.5:20Okay, one last property. This one is 5:23specific to search engines. By default,5:25if a page is indexed by Google,5:27everything on the page will be scanned,5:29so to speak. But if we have an element 5:31like an advertisement that doesn't 5:33really have any value from a search 5:35perspective, we can tell Google to 5:37exclude it by adding the Google bot 5:40property set to skip.5:43Now, let's go up a level and look at 5:45some site settings and page settings 5:47that can impact accessibility and SEO.5:50This icon on the toolbar will bring us 5:52into our site settings. And on the left,5:54you can see that we're currently looking 5:55at the general tab. There are a bunch of 5:58useful settings in here, but for now,6:00we're just going to touch on the ones 6:01relevant to this lesson. I'm going to 6:04skip title for a moment and talk about 6:06site language. Accurately declaring a 6:08language helps search engines out, but 6:10more importantly, it helps assistive 6:12technologies like screen readers or 6:14translation services. Framer also allows 6:17us to localize our sites to show 6:19different content for multiple languages 6:21or regions, but we're going to get into 6:23that in a dedicated lesson. But since my 6:26site is currently just English, I'll set 6:28this 6:29accordingly. Okay, next setting. Modern 6:32operating systems allow users to set a 6:34preference for reducing motion where 6:37possible. Here in our site settings, we 6:39have a checkbox that says disable 6:41movement animations and custom cursors 6:44if the user prefers reduced motion,6:46which we can decide to enable or not.6:49Essentially, enabling this setting on 6:51our end allows our site to better 6:53respect visitors preferences on their 6:55end. Back up at the top, I skipped over 6:58these fields for site title and site 7:00description because they're really 7:01properties that we want to be setting at 7:03the page level. But whatever we set here 7:06will get inherited by pages where we 7:08haven't specified otherwise. But again,7:11we do want to specify these things at 7:13the page level. So let's select a 7:15specific page on the left and start with 7:17the page title. You might be thinking, I 7:20thought this page already had a name.7:22Didn't we just click on the name of it?7:24Didn't I name my pages on the pages 7:27panel? But earlier in the course, we 7:29talked about how the name of the page is 7:32used to determine its URL. The title of 7:34the page is a bit different. This title 7:37is what users see in search engine 7:39results, the label that appears on 7:42browser tabs, in bookmarks, and could 7:45show up when someone shares a page on 7:46social media. Page description show up 7:49in search results as well. and both help 7:51search engines and human beings 7:53understand what the page is about. So 7:55naturally, we want to put some thought 7:57into these. I have a few tips for you.8:00Like I mentioned, we want these to be 8:02unique for each page. Try to include 8:04keywords that represent the content in a 8:07natural way. Don't force it cuz again,8:10search engines see right through that.8:12Try to keep titles under 60 characters 8:14so they don't get cut off in search 8:16results. and keep descriptions under 8:18around 160 characters. What's nice is 8:21that framer gives us a little preview of 8:24how the title and description might look 8:25together in search results. Basically,8:28just try to keep things short but 8:30descriptive. As far as the URL of each 8:32page is concerned, like I mentioned, the 8:34name of the page becomes an integral 8:36part of its URL. Unlike the pages panel,8:39this URL field shows the whole path to a 8:41page, including folders or nested page 8:44hierarchies. So everything that comes 8:46after the domain name, changes you make 8:48to names on the pages panel will be 8:50reflected here and changes you make here 8:52will be reflected on the pages panel.8:55Simple, well ststructured URLs make it 8:57easier for search engines to crawl and 8:59index your content. And clean,9:02descriptive URLs are easier for 9:04potential visitors to understand and 9:07trust. So a few tips. We want URLs to be 9:10short and descriptive like page titles.9:13In fact, it's good to match the page 9:15title if possible. URLs are also 9:18case-sensitive, and it's recommended to 9:20stick to just lowercase letters, but 9:21you'll notice frame actually handles 9:23that for us if you try to type a capital 9:25letter. And similarly, we want to use 9:27hyphens to separate words because URLs 9:30technically can't have actual spaces.9:33But framer handles this for us, too, by 9:35replacing spaces with hyphens. But the 9:38key takeaway is to separate words rather 9:40than mashing them all together.9:43Last and not least for settings, we have 9:45the option to show or not show entire 9:48pages in search engines. So, if you 9:50don't want a page to be so discoverable,9:52just uncheck the box and you're set. And 9:56there you have it. Now you know how 9:57Framer's built-in tools assist us in 9:59enhancing our website's accessibility 10:02and search engine performance, making it 10:04a pretty simple process to make our 10:05sites more inclusive and discoverable.10:08That's it for this one. I'll see you in 10:10the next one.

TeachesSemantic Tags SEO Audit

Also coversAuto-Translate Custom Cursors Custom Domains Form Inputs Frames Layout Templates Links Locales Meta Titles & Descriptions Site & Page Settings Templates Text Styles

Watch on YouTube ↗

‹ Site and Page Settings in Framer (Fundamentals Lesson 27)

CMS Update: Index Variable ›