Publishing & Settings, SEO

Page Titles, Descriptions, and URLs in Framer (SEO Lesson 4)

Page Titles, Descriptions, and URLs in Framer (SEO Lesson 4)

Page Titles, Descriptions, and URLs in Framer (SEO Lesson 4)

Justin

·

7:25

·

4.3K views

·

About this lesson

Your title, description, and URL are often the first things people see in search results—so they need to make a strong first impression. In this lesson, learn how to craft clear, keyword-driven metadata in Framer that improves both SEO and click-through rates.

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

https://www.youtube.com/watch?v=XCRpl6fxCZY&t=38s Page Titles

https://www.youtube.com/watch?v=XCRpl6fxCZY&t=147s Page Descriptions

https://www.youtube.com/watch?v=XCRpl6fxCZY&t=206s Page URLs

https://www.youtube.com/watch?v=XCRpl6fxCZY&t=305s Setting Tab Order with Tab Index

https://www.youtube.com/watch?v=XCRpl6fxCZY&t=405s Wrap Up

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:00Before anyone even visits your site,0:02they'll usually see three things. The0:05page title, a short description, and the0:08URL. That little preview they see in0:10search results is the first impression0:12they have of your site. And it plays a0:14big role in whether someone clicks or0:16keep scrolling. These details aren't0:19just about SEO. They also shape how0:21people see your brand and whether they0:23trust what you're offering. The good0:25news is Framer makes it easy to update0:28all of them. So in this lesson, we'll0:31walk you through exactly how to do it.0:38Let's start with the most visible and0:40arguably the most important part of your0:42page metadata, the title. Your page0:46title is the headline that shows up in0:48search results and browser tabs and is0:50usually the first thing people see. So,0:52it needs to be clear, relevant, and to0:55the point. Your title should include a0:57main keyword or phrase. Make it obvious1:00what the page is about, and stay under1:0260 characters so it doesn't get cut off.1:05For example, instead of something1:07generic like home followed by the name1:09of the brand, a better title would be1:11something more specific and clear about1:14the website or brand itself. A1:16well-written title with a clear keyword1:18improves the chances of ranking higher1:20in search results as well as increasing1:23the chances that someone will actually1:25engage with your site. When formulating1:27a page title, it's best to try to think1:30like your audience. What would they1:31search for to find this page? One simple1:35way to find out is by typing ideas right1:37into a search engine like Google and1:39checking what autocomplete suggests or1:42by looking at the related searches at1:44the bottom. For deeper research, there1:47are tools out there that can show you1:48what real people are searching for, but1:51overall, we want to aim for specific1:52phrases that clearly match the content.1:55These are called longtail keywords, and1:58they're more likely to bring in the1:59right audience. With that understanding,2:02we can go ahead and update our page2:04title in Framer by heading to the pages2:06panel to the left, hovering over the2:08page name, and clicking the ellipsus.2:11Then, we'll choose settings to open the2:13page settings.2:15At the top, we'll see all three fields2:17we're covering in this lesson, but for2:19now, we'll just update the title field.2:21Framer even gives us a preview of what2:23the title, description, and URL would2:25look like in search results. Next, let's2:29talk about descriptions, the short blurb2:31that appears under the title in search2:33results. Descriptions don't directly2:35impact your search rankings, but they do2:38influence whether someone clicks. Think2:40of them as an elevator pitch, a quick,2:43clear summary of what the page offers.2:46Keep it to one or two sentences. Include2:48relevant keywords naturally and give2:50users a reason to click. A bad2:54description might look something like2:56this. Welcome to our homepage. Click to3:00learn more about what we do. It's vague,3:04tells the user nothing specific, and3:07doesn't give them any reason to engage.3:09A better version looks more like this.3:12Plan, track, and automate your team's3:14work allin-one smart platform designed3:17for remote teams who move fast. It's3:20clear, actionoriented, and actually3:23tells the user what they'll find on the3:25page. All right, so last piece of the3:28puzzle for this lesson, URLs. Outside of3:31the homepage of our site, Framer3:33automatically creates URLs for each page3:36based on the name we give it when it's3:38first created. So if we name a new page3:41about us, the slug becomes slashabouty-3:44us by default. Framer uses hyphens3:47between words in the URL because search3:50engines treat hyphens as word3:52separators, which makes URLs easier to3:54read and index. Luckily, Framer takes3:58care of this for us and replaces any3:59spaces with hyphens and makes sure our4:02URLs are always lowercase, which is also4:05preferred. But even though Framer4:07handles the formatting, it's still up to4:09us to make sure the slug is meaningful,4:11and specific. A good URL should be4:14short, clear, and descriptive.4:18So instead of this,4:20we want something more like this.4:24To change our URL, we'll go back to the4:26page settings and update the URL field.4:29Or alternatively, we can simply rename4:31the page from the pages panel on the4:33left. Both fields are connected. So4:36changing it in one place will4:37automatically update the other. Once4:40updated, we'll see a full preview of how4:43our page appears in search results,4:45complete with title, description, and4:47the updated URL. And if we have a page4:50that we don't want indexed by search4:52engines, like a private client review4:54page or a hidden prototype, you can4:56disable indexing for this page entirely4:59by unchecking the show page in search5:01engines checkbox right above our5:03preview.5:05Now, let's quickly talk about how users5:07will move through your site, especially5:09those navigating with keyboard or other5:11assistive technology. By default,5:14browsers use a logical flow to determine5:17tab order, usually based on the layout5:19and structure of the page, but sometimes5:22that natural flow isn't ideal,5:24especially when custom components or5:26nested layouts are involved. For this,5:29we have tab index. In Framer, we can5:32control how elements are reached by5:34using the tab key by assigning a tab5:36index in the accessibility section of5:39the properties panel. So, first I'll5:42select an element on my canvas to apply5:44it to. Then under accessibility, I'll5:46click the plus icon and select tab5:49index. By default, Framer will add a5:51value of one. But what does that5:54actually mean? Well, let's break it5:56down. A value of zero means the element5:59is part of the normal tab flow, while a6:02value of -1 removes the element from the6:04tab order, which can help prevent users6:07from tabbing to things like decorative6:09or hidden elements. And positive values6:12like 1 through 3 let you manually set a6:15custom order. But use these with caution6:17as they will override the natural flow6:20and that can get confusing fast. The6:23best practice is to stick with the6:25default tab order as much as possible6:27and only use custom values when6:29absolutely necessary, like fixing a flow6:32issue in a modal or if you have a custom6:35navigation. If the tab order jumps6:36around unexpectedly or skips important6:38elements, it can create a frustrating6:41experience for users and can make your6:43site feel broken or inaccessible. At6:46this point, you probably realize how all6:48of these small details make a huge6:50impact in how your site appears in6:51search results and how people judge6:53what's on the page. So, make sure to6:56take a few extra seconds to write your6:58page titles, descriptions, and URLs with7:01intention. In the next lesson, we'll7:04move beyond individual pages and take a7:06look at sitewide settings and global7:08accessibility tools inside Framer,7:11including how to set language, how to7:13make sure your site respects user7:14preferences, and more. See you in the7:18next lesson.

Watch on YouTube ↗

‹ Using the Drag Effect in Framer (Animation Lesson 5)

Using the Loop Effect in Framer (Animation Lesson 4) ›

More in this topic

Hard work, easy website. Get a Free Domain with Framer.0:20
Hard work, easy website. Get a Free Domain with Framer.
Announcement13M views · 4 months ago
This website never happened — Get a free domain with Framer0:22
This website never happened — Get a free domain with Framer
Publishing & Settings4.7M views · 4 months ago
Free Domains with Framer: Go Build It0:16
Free Domains with Framer: Go Build It
Publishing & Settings9.1M views · 4 months ago
Introducing Advanced Hosting in Framer2:28
Introducing Advanced Hosting in Framer
Announcement7K views · 4 months ago
Transferring Framer projects to clients2:04
Transferring Framer projects to clients
Publishing & Settings9K views · 5 months ago
Creating Remix Links in Framer1:29
Creating Remix Links in Framer
Publishing & Settings3K views · 6 months ago
Make a Custom 404 Page in Framer1:35
Make a Custom 404 Page in Framer
Layout & Design4K views · 7 months ago
How to get the most out of Framer for Free4:05
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.