Tips & tricks
- Beginner
- Website launch
Tips & tricks
- Beginner
- Website launch
Tips & tricks
- Beginner
- Website launch
10 Things to Do Before Publishing a Framer Website
Before you hit that publish button on your Framer site, let me walk you through 10 super important things you need to take care of. Trust me, getting these right will make all the difference in how your site looks, works, and ranks.
So grab a coffee (or tea, whatever you prefer), and let’s dive into this checklist to make sure you’re totally ready to go live!
Posted by
Nandi
Table of contents
1. Check your breakpoints
You want your website to look perfect on all screen sizes, right?
So, make sure you’ve set up the right breakpoints for desktop, tablet, and mobile. You can add more if you need to. Sometimes, larger or smaller screens need some extra love, so don’t hesitate to customize them!
Once you’ve added those breakpoints, go ahead and preview your site. Drag that browser window to resize it and make sure everything adjusts nicely.
1. Check your breakpoints
You want your website to look perfect on all screen sizes, right?
So, make sure you’ve set up the right breakpoints for desktop, tablet, and mobile. You can add more if you need to. Sometimes, larger or smaller screens need some extra love, so don’t hesitate to customize them!
Once you’ve added those breakpoints, go ahead and preview your site. Drag that browser window to resize it and make sure everything adjusts nicely.
1. Check your breakpoints
You want your website to look perfect on all screen sizes, right?
So, make sure you’ve set up the right breakpoints for desktop, tablet, and mobile. You can add more if you need to. Sometimes, larger or smaller screens need some extra love, so don’t hesitate to customize them!
Once you’ve added those breakpoints, go ahead and preview your site. Drag that browser window to resize it and make sure everything adjusts nicely.
Desktop, tablet and phone breakpoints.
Desktop, tablet and phone breakpoints.
Desktop, tablet and phone breakpoints.
2. Optimize your image alt text
Now, I know this might seem like a small thing, but trust me, image alt text is crucial. Not only does it help with SEO, but it also makes your website more accessible to everyone, including those who rely on screen readers.
So, when you add an image, make sure to describe it properly in the alt text.
For example, if you’ve got a picture of a Tesla Model 3 (like I do here), make sure the alt text says "Tesla Model 3 on a clean white background".
Pro Tip: Keep your alt text clear and descriptive. It helps search engines understand what your images are about and gives a much better experience to users.
2. Optimize your image alt text
Now, I know this might seem like a small thing, but trust me, image alt text is crucial. Not only does it help with SEO, but it also makes your website more accessible to everyone, including those who rely on screen readers.
So, when you add an image, make sure to describe it properly in the alt text.
For example, if you’ve got a picture of a Tesla Model 3 (like I do here), make sure the alt text says "Tesla Model 3 on a clean white background".
Pro Tip: Keep your alt text clear and descriptive. It helps search engines understand what your images are about and gives a much better experience to users.
2. Optimize your image alt text
Now, I know this might seem like a small thing, but trust me, image alt text is crucial. Not only does it help with SEO, but it also makes your website more accessible to everyone, including those who rely on screen readers.
So, when you add an image, make sure to describe it properly in the alt text.
For example, if you’ve got a picture of a Tesla Model 3 (like I do here), make sure the alt text says "Tesla Model 3 on a clean white background".
Pro Tip: Keep your alt text clear and descriptive. It helps search engines understand what your images are about and gives a much better experience to users.
Alt text settings for image on right panel.
Alt text settings for image on right panel.
Alt text settings for image on right panel.
3. Set correct HTML tags for your frames
This one’s huge for accessibility, so listen up! When you’re building with Framer, make sure that every frame is tagged correctly.
For example, if you’ve got a section on your page, tag it as a section.
If it’s an article, make it an article tag. Why? Because when you define your frames with the right tags, it helps search engines and screen readers understand the structure of your site.
Here are a few key tags to remember:
Header: For the top of your page.
Footer: For the bottom of your page.
Main: For your main content area.
Nav: For navigation (duh!).
Tagging is important for SEO and for helping users navigate your site more easily. Trust me, it’s worth taking a minute to get this right.
3. Set correct HTML tags for your frames
This one’s huge for accessibility, so listen up! When you’re building with Framer, make sure that every frame is tagged correctly.
For example, if you’ve got a section on your page, tag it as a section.
If it’s an article, make it an article tag. Why? Because when you define your frames with the right tags, it helps search engines and screen readers understand the structure of your site.
Here are a few key tags to remember:
Header: For the top of your page.
Footer: For the bottom of your page.
Main: For your main content area.
Nav: For navigation (duh!).
Tagging is important for SEO and for helping users navigate your site more easily. Trust me, it’s worth taking a minute to get this right.
3. Set correct HTML tags for your frames
This one’s huge for accessibility, so listen up! When you’re building with Framer, make sure that every frame is tagged correctly.
For example, if you’ve got a section on your page, tag it as a section.
If it’s an article, make it an article tag. Why? Because when you define your frames with the right tags, it helps search engines and screen readers understand the structure of your site.
Here are a few key tags to remember:
Header: For the top of your page.
Footer: For the bottom of your page.
Main: For your main content area.
Nav: For navigation (duh!).
Tagging is important for SEO and for helping users navigate your site more easily. Trust me, it’s worth taking a minute to get this right.
Selecting HTML tags.
Selecting HTML tags.
Selecting HTML tags.
4. Optimize your buttons
Buttons are one of the most important interactive elements on your site, so make sure they’re optimized! Here’s what you need to check:
Make sure the cursor changes to pointer when you hover over a button.
For accessibility reasons ensure that the button tag is set to “button” (only if the button doesn’t have a link)
Lastly, make sure the text isn’t selectable. You can do this by adding “user select” style to the text and set it to “none” :)
With these adjustments, your buttons will feel super polished, and your users will have a much smoother experience.
4. Optimize your buttons
Buttons are one of the most important interactive elements on your site, so make sure they’re optimized! Here’s what you need to check:
Make sure the cursor changes to pointer when you hover over a button.
For accessibility reasons ensure that the button tag is set to “button” (only if the button doesn’t have a link)
Lastly, make sure the text isn’t selectable. You can do this by adding “user select” style to the text and set it to “none” :)
With these adjustments, your buttons will feel super polished, and your users will have a much smoother experience.
4. Optimize your buttons
Buttons are one of the most important interactive elements on your site, so make sure they’re optimized! Here’s what you need to check:
Make sure the cursor changes to pointer when you hover over a button.
For accessibility reasons ensure that the button tag is set to “button” (only if the button doesn’t have a link)
Lastly, make sure the text isn’t selectable. You can do this by adding “user select” style to the text and set it to “none” :)
With these adjustments, your buttons will feel super polished, and your users will have a much smoother experience.
5. Add ARIA labels to interactive elements
Now, this one’s for making your website more accessible.
If you have a clickable element that doesn’t have text (like icons or buttons), be sure to add ARIA labels.
This tells screen readers what the element is for.
For example, if you have a logo that’s clickable, add an ARIA label that says “Framer University logo.”
This way, if someone is using a screen reader, they’ll know exactly what it does. Super important for ensuring that everyone can interact with your site, regardless of their needs.
5. Add ARIA labels to interactive elements
Now, this one’s for making your website more accessible.
If you have a clickable element that doesn’t have text (like icons or buttons), be sure to add ARIA labels.
This tells screen readers what the element is for.
For example, if you have a logo that’s clickable, add an ARIA label that says “Framer University logo.”
This way, if someone is using a screen reader, they’ll know exactly what it does. Super important for ensuring that everyone can interact with your site, regardless of their needs.
5. Add ARIA labels to interactive elements
Now, this one’s for making your website more accessible.
If you have a clickable element that doesn’t have text (like icons or buttons), be sure to add ARIA labels.
This tells screen readers what the element is for.
For example, if you have a logo that’s clickable, add an ARIA label that says “Framer University logo.”
This way, if someone is using a screen reader, they’ll know exactly what it does. Super important for ensuring that everyone can interact with your site, regardless of their needs.
Adding an ARIA label.
Adding an ARIA label.
Adding an ARIA label.
6. Set your site title
Don’t skip this step, mate! The site title is essential for both SEO and user experience. You want people (and search engines) to know exactly what your site is about when they see it in their browser tab or search results.
Head to the Site Settings in Framer, and under the General tab, make sure to add a clear, descriptive site title. It’ll help your site stand out and give search engines a solid idea of what your site is about.
6. Set your site title
Don’t skip this step, mate! The site title is essential for both SEO and user experience. You want people (and search engines) to know exactly what your site is about when they see it in their browser tab or search results.
Head to the Site Settings in Framer, and under the General tab, make sure to add a clear, descriptive site title. It’ll help your site stand out and give search engines a solid idea of what your site is about.
6. Set your site title
Don’t skip this step, mate! The site title is essential for both SEO and user experience. You want people (and search engines) to know exactly what your site is about when they see it in their browser tab or search results.
Head to the Site Settings in Framer, and under the General tab, make sure to add a clear, descriptive site title. It’ll help your site stand out and give search engines a solid idea of what your site is about.
Site title settings.
Site title settings.
Site title settings.
7. Write a killer site description
Your site description is like your site’s elevator pitch. It’s what people will see when they search for your website.
So, make sure it’s concise, descriptive, and includes any important keywords you want to rank for.
For example, if your website is about learning Framer, a good description could be: “Framer University – Your go-to resource for mastering Framer and building no-code websites.”
This is a super important part of SEO, so don’t skip it!
7. Write a killer site description
Your site description is like your site’s elevator pitch. It’s what people will see when they search for your website.
So, make sure it’s concise, descriptive, and includes any important keywords you want to rank for.
For example, if your website is about learning Framer, a good description could be: “Framer University – Your go-to resource for mastering Framer and building no-code websites.”
This is a super important part of SEO, so don’t skip it!
7. Write a killer site description
Your site description is like your site’s elevator pitch. It’s what people will see when they search for your website.
So, make sure it’s concise, descriptive, and includes any important keywords you want to rank for.
For example, if your website is about learning Framer, a good description could be: “Framer University – Your go-to resource for mastering Framer and building no-code websites.”
This is a super important part of SEO, so don’t skip it!
8. Set the right site language
This one’s simple but super important: set the site language correctly in your Site Settings.
If your site is in English, make sure it’s set to English! It helps search engines understand your content and makes it easier for users to navigate.
It’s a small thing, but when it’s set right, it can really boost your SEO.
8. Set the right site language
This one’s simple but super important: set the site language correctly in your Site Settings.
If your site is in English, make sure it’s set to English! It helps search engines understand your content and makes it easier for users to navigate.
It’s a small thing, but when it’s set right, it can really boost your SEO.
8. Set the right site language
This one’s simple but super important: set the site language correctly in your Site Settings.
If your site is in English, make sure it’s set to English! It helps search engines understand your content and makes it easier for users to navigate.
It’s a small thing, but when it’s set right, it can really boost your SEO.
9. Add your favicon
A favicon is that little icon that appears in the browser tab next to your site title. It’s like your site’s personal logo for the tab!
Keep in mind that this is a small image (32x32 pixels), so make sure it’s simple and recognizable.
Whether it’s your logo or something else that represents your brand, it’s a small detail that makes a big difference in how your site looks.
9. Add your favicon
A favicon is that little icon that appears in the browser tab next to your site title. It’s like your site’s personal logo for the tab!
Keep in mind that this is a small image (32x32 pixels), so make sure it’s simple and recognizable.
Whether it’s your logo or something else that represents your brand, it’s a small detail that makes a big difference in how your site looks.
9. Add your favicon
A favicon is that little icon that appears in the browser tab next to your site title. It’s like your site’s personal logo for the tab!
Keep in mind that this is a small image (32x32 pixels), so make sure it’s simple and recognizable.
Whether it’s your logo or something else that represents your brand, it’s a small detail that makes a big difference in how your site looks.
Favicon settings.
Favicon settings.
Favicon settings.
10. Set your social image
Last but not least, don’t forget about the social image!
This is the image that will appear when someone shares your website on social media platforms like Facebook, Twitter, or LinkedIn. It’s like your website’s thumbnail.
Make sure the image is visually appealing and represents your site well. When people share your site, you want it to look professional and inviting!
10. Set your social image
Last but not least, don’t forget about the social image!
This is the image that will appear when someone shares your website on social media platforms like Facebook, Twitter, or LinkedIn. It’s like your website’s thumbnail.
Make sure the image is visually appealing and represents your site well. When people share your site, you want it to look professional and inviting!
10. Set your social image
Last but not least, don’t forget about the social image!
This is the image that will appear when someone shares your website on social media platforms like Facebook, Twitter, or LinkedIn. It’s like your website’s thumbnail.
Make sure the image is visually appealing and represents your site well. When people share your site, you want it to look professional and inviting!
Bonus tip: Customize settings for each page
If you have multiple pages on your website, make sure you customize the title, description, and social image for each page.
It’s like giving each page its own mini SEO setup. Not all pages need the same settings, so make sure each one is optimized individually.
Bonus tip: Customize settings for each page
If you have multiple pages on your website, make sure you customize the title, description, and social image for each page.
It’s like giving each page its own mini SEO setup. Not all pages need the same settings, so make sure each one is optimized individually.
Bonus tip: Customize settings for each page
If you have multiple pages on your website, make sure you customize the title, description, and social image for each page.
It’s like giving each page its own mini SEO setup. Not all pages need the same settings, so make sure each one is optimized individually.
Ready to launch?
And that’s it mate! These are the 10 most important things you need to do before launching your Framer website.
Follow these steps, and you’ll have a site that not only looks amazing but works great and ranks well in search engines too.
Once you’ve got everything sorted, hit that publish button and watch your website go live! You’re now officially part of the Framer community!
Until next time, good luck with your site launch :)
Ready to launch?
And that’s it mate! These are the 10 most important things you need to do before launching your Framer website.
Follow these steps, and you’ll have a site that not only looks amazing but works great and ranks well in search engines too.
Once you’ve got everything sorted, hit that publish button and watch your website go live! You’re now officially part of the Framer community!
Until next time, good luck with your site launch :)
Ready to launch?
And that’s it mate! These are the 10 most important things you need to do before launching your Framer website.
Follow these steps, and you’ll have a site that not only looks amazing but works great and ranks well in search engines too.
Once you’ve got everything sorted, hit that publish button and watch your website go live! You’re now officially part of the Framer community!
Until next time, good luck with your site launch :)
