Publishing & Settings

Updating your Framer Website’s Title, Description and Social Images

5:49

35K views

Sep 12, 2023

About this lesson

Discover how to effectively update your website's meta information. Learn how meta info, including titles, descriptions, and images, impacts how your website appears in search engine results and social media platforms. Follow step-by-step instructions to access and modify the meta info in your project settings. Explore how to set the primary language, optimize for reduced motion accessibility, and unpublish your website if needed. Additionally, learn how to set specific meta info for individual pages and override site-wide settings.

https://www.youtube.com/watch?v=10qjXyV7RoA&t=0s - Introduction and Explanation of Meta Info

https://www.youtube.com/watch?v=10qjXyV7RoA&t=16s - Accessing Project Settings and General Tab

https://www.youtube.com/watch?v=10qjXyV7RoA&t=23s - Setting Meta Info for the Entire Website

https://www.youtube.com/watch?v=10qjXyV7RoA&t=43s - Previewing Meta Info on Google

https://www.youtube.com/watch?v=10qjXyV7RoA&t=113s - Overriding Meta Info for Specific Pages

https://www.youtube.com/watch?v=10qjXyV7RoA&t=172s - Adjusting Indexing and Site Search Options

https://www.youtube.com/watch?v=10qjXyV7RoA&t=229s - Previewing Meta Info and Overriding Page Image

https://www.youtube.com/watch?v=10qjXyV7RoA&t=249s - Publishing and Checking Meta Info

https://www.youtube.com/watch?v=10qjXyV7RoA&t=280s - Conclusion and Troubleshooting Tips

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00in this video I'll show you how to 0:02update your site and Page meta info this 0:05is the info that can show up when you 0:07search for your website on Google or 0:09when you share the URL to your website 0:11on a social platform like Twitter 0:14so in the project we want to head over 0:16to the top right and go to our project 0:18settings and then head over to the 0:21general Tab and this is where you can 0:23set the meta info for your entire 0:25website so as you can see here I already 0:28have a title set 0:30and we can also set a description 0:33next to that we can also set the side 0:35language this is the primary language of 0:37your website so I'm going to select 0:39English 0:40below that you can see a preview of what 0:43this will look like on something like 0:44Google so we have our site title and our 0:47site description 0:49below this we have an accessibility 0:51toggle so 0:53if a user has reduced motion enabled on 0:57their on their OS having this enabled on 1:01your website will mean that if they view 1:03your website and your website has any 1:05transitions or animations these will be 1:08disabled this is great for people who 1:10just prefer viewing a website with 1:13reduced motion beneath this you can 1:15unpublish your website 1:17and below this we have our site images 1:19so our site images contain the Fab icon 1:22this is the icon that shows up in the 1:24browser tab when you're reviewing your 1:26website 1:27and below this we have our social image 1:29for entire websites this image shows up 1:32when you share the URL to your website 1:35on a platform like Twitter 1:37so over here we can set the meta info 1:40for our entire website so if we set it 1:42here it will trickle down to all of the 1:45other pages on our website but we can 1:47also overwrite this per page so let's 1:50say we head over to our updates page 1:53you'll see here that the the title shows 1:57the title that we've already filled in 1:59in our general tab so this means it is 2:01taking the title from the entire website 2:04same goes for the description 2:07but let's say we want to overwrite this 2:09we can go 2:11Fusion updates because this is our 2:14updates page and we can go View 2:18all of the 2:20Fusion 2:22updates and we hit save 2:25and now this specific page has a 2:28specific title and Page description so 2:30if we find this page on Google or we 2:32share the URL to this page on something 2:34like Twitter this is the info that will 2:37show up and not the general info over 2:39website so we've only overrid this for 2:41this certain page so if we head over to 2:43our Blog Page you can see that it's 2:44still taking the title and description 2:47of the entire site that we've set 2:52there's some extra info we can we can 2:54adjust for pages so we can make sure 2:56that a page shows up in a search engine 2:58or Not by default this will be enabled 3:00but let's say you don't want this page 3:02indexed by search engines like Google 3:04you can disable this 3:06and we can also decide if we want this 3:09page to show up in our own site search 3:11so if you have search enabled on your 3:13website 3:14we can decide whether this page is 3:17indexed by the search on our own website 3:20so maybe you have a page that you don't 3:22want searchable on your site 3:25this is how you disable it below this 3:27again we have the preview of the info 3:30that we've just set 3:31and like the title in description we can 3:34also override the page image so if you 3:37remember correctly we have set an image 3:39for our entire site so this will be 3:42picked up by all of our Pages unless we 3:45override it so on our updates page I 3:49want to override it with a different 3:50image so we can go 3:52to my assets and then click this one and 3:56upload a different image and 4:00if we publish our website now the 4:02updates page will show a different 4:04social image if we share this page on 4:06something like Twitter 4:09um so let's hit publish 4:12then go to our browser 4:15and to check if all of the info is set 4:18correctly we can go to the website 4:20metatex.io 4:22and I'll go back to framer and 4:26open my website 4:28so here you can see that the Fab icon is 4:30set the tab is showing the correct title 4:33of the website if we go to our update 4:35page you can see that the different 4:37title shows up but let's say we want to 4:40check if all of the info is set 4:43correctly we can copy the URL go to 4:45metatex.io 4:47and paste the URL 4:51and here we can check if all of the info 4:53is set correctly so you can see that the 4:56titles being picked up the description 4:57is picked up you can see a preview of 5:00what this will look like when you share 5:01it on Twitter or on Facebook on LinkedIn 5:04on Pinterest and on Slack 5:07um sometimes it might happen that if you 5:10have updated your title description or 5:12image Google or any other website is not 5:15parsing the info correctly this often 5:18means that Google has simply not updated 5:20the info yet or that 5:23um for example Twitter has cached or 5:25your website so the info is not showing 5:28correctly there yet if meta tags is 5:30showing the correct info it just means 5:33you have to wait a little bit longer for 5:34Google to re-index your website or for a 5:39platform like Twitter to pick up the new 5:41info yeah and that's it that is how you 5:43update your meta info on your website

TeachesMeta Titles & Descriptions

Also coversSEO Audit Transitions & Easing

Watch on YouTube ↗

‹ Adding Custom Code to a Page or your Entire Framer Site

Framer Update: Bold & Italic ›