Fighting to be on the number one Google search results page can be tricky, however, it can be seriously helpful with increasing the sales of your products.
In HubSpot's state of marketing report 2021, 61% of B2B marketers stated that SEO and organic traffic generate more leads than any other marketing initiative.On the first page, the first five results account for 67.60% of all the clicks for that search term. Furthermore,75% of users never scroll past the first page of search results.
There are a number of statistics that prove SEO is the most effective way to increase visits to your website and you should do everything in your power to make sure your website is performing at its best.
In this guide I will take you through how to use the SEO recommendations tab in HubSpot. I will explain how to fix some of the issues you may come across. So let's get started!
1) In HubSpot go to Marketing > Website > SEO
2) Scan or re-scan your website - this can take some time so leave it running and come back to it after a few hours.
3) Once it has finished scanning, click view recommendations
The SEO recommendations tab
On the left hand side you can see this menu with the breakdown of recommendations.
- Accessibility: this covers things like colour blindness, keyboard interactive elements (such as forms) and alt text for images - web standards require websites to be accessible. To find out more information about web standards you can visit WC3.
- Crawling indexing: this is how easy is it for robots to crawl the site, read the content and then include it in the index
- Mobile experience: How well your website performs on mobile devices. Mobile web traffic accounts for 50% world wide traffic.
- Performance: How fast your website loads across all devices.
- Security: How secure your site is.
- User experience: critical to how your
Most of the recommendations have a good description to help you fix the issues. Below is a more thorough list of helpful information to fix some of the issues you may encounter.
Mobile experience: Make sure the page width matches the viewport width
Generally, this means some online content is wider than a mobile screen. In this screenshot below you can see the text is too big for mobile devices which creates this white block on the right hand side. To fix something like this we need to reduce the size with CSS. If you have access to the design tools in HubSpot you can navigate to your main CSS file and modify it there.
Alternatively, you can set the font size in the content editor of the page by highlighting the text > more > px drop down.
Bear in mind, it won’t always be the text size that causes these issues. If you do get into difficulty, seek the help of a developer or contact HubSpot support.
Mobile experience: Make sure mobile users can easily click on each page element
HubSpot recommends a minimum of 48px by 48px for buttons; this includes calls to actions, slider arrows, navigation buttons, menu items, footer links and anything else that might be clickable.
To fix these issues you can:
Click view pages > find the first page > click view elements
This will give you a list of elements that need to be made bigger on mobile devices.
This will show you which element needs attention and the current size, which is great but how do we find the element on the page?
In most cases it will be obvious which button needs attention. However if you struggle to find it you can follow the steps below.
- Copy that line of code.
- Click on the link to the page.
- Right click and select inspect (right at the bottom).
- Now you will see the panel open on the right hand side full of code. Hold ctrl (PC) or cmd (MAC) on your keyboard and hit ‘f’ on your keyboard.
- Paste your code (or button text like a phone number) into the search bar and hit enter on your keyboard. Now you should have the element highlighted for you.
- If you navigate to your design tools and find your main css file (or module file) and adjust the CSS you can fix these problems. If it is a HubSpot call to action (CTA) button you can add custom css in the advanced tab under the CTA
User experience: Fix broken internal links
Links become broken if someone has deleted a page or it simply doesn’t exist.
Next to each page in your list in the SEO tools, there should be a button to view the broken link.
1) Copy the broken link.
2) Click the link to open that page.
3) Right click and select inspect (right at the bottom).
4) Hold ctrl (PC) or cmd (MAC) on your keyboard and hit the ‘f’ key.
5) Paste your link and it should now highlight the link that is broken.
There are two ways to fix this:
1) Find it in page using the page builder and replace it with the correct url-
- Go to the page.
- Click on the HubSpot tools on the top right hand corner.
- Click edit page / post.
- Using the page editor, find the url that needs to be updated.
-
- Go to your settings in HubSpot (gear icon top right from dashboard).
- Click the website drop down in the panel on the left.
- Click on navigation.
- Select your menu you want to edit from the drop down menu.
- Fix any links that are highlighted in red.
-
- Go to your settings in HubSpot (gear icon top right from dashboard).
- Click the website drop down in the panel on the left.
- Click domains and urls.
- Click the url redirect tab and add a new redirect. For more information on this follow this guide.
User experience: Make sure all images load with the correct aspect ratio
This tool checks how images are being displayed and detects if they are distorted. Click on the view image button on the first page in the list.
This gives you really useful information about the image and how it is displayed. To fix this problem you could resize the image as 100 x 100px, for example, and replace it in the file manager, or in this case I opened the affected page and edited the code surrounding the image.
You can see that the width and height of the image is set to 100px and I will change that to 118 x 99.
Reminder: Do not forget to check your page again after changing the image or width and height to make sure everything is ok.
User experience: Reduce page layout shifts
Reducing layout shifts is a part of page speed: I have written a separate blog called How to speed up your HubSpot website.
User experience: Make sure all page resources, such as images and CSS stylesheets, load
This can happen when there are broken links or the images and/or files have been moved and are not updated on the page.
If you need to fix images:
- Click on view resources and click the broken link - look for identifiable information in the url - /hubfs/Copy%20of%20FINALLY%20-%20Blog%20Post%20Template-8.png
- In the above url an identifiable information would be template-8 copy this and head to Marketing > Files and Templates > Files and paste it into the search bar. If it appears, move onto the next step. If it does not appear its name has likely been changed or it has been removed. You may need to find it again in your own systems and re-upload it to the file manager. Be sure to upload files into a structure if there is one to keep it neat and tidy.
Reminder:
- Go back to your list under SEO and user experience.
- Click on the page that has the broken image. Open the editor and swap out the image on the page. If it is a blog post you may need to replace the featured image which is under the settings tab.
If you need to fix CSS or JS files:
- Double check they are uploaded in the file manager or design tools
- Find where you are linking them in design tools and upload or change them as necessary
- If you are unsure go to HubSpot support and they should be able to help you.
Security: Update external links that pose security and performance risks
If you link to external websites (such as Twitter) and make it open in a new tab you should add the rel="noopener" or rel="noreferrer" to the link.
To do that, go to the page with the link > open the edit page > find the link.
Tick the ‘open link in a new tab’ - then go to advanced and make sure regular or no follow is ticked.
Regular will add “noopener” which helps with security, and no follow will add noreferrer which stops data from being sent to the next website.
For example, if you have a link that goes to Twitter but you do not want to tell Twitter that it came from your website, you would add a noreferrer.
In most cases you just want the noopener on external links so in this case select “regular”.
On page SEO : Make sure each page has exactly one H1 tag
Every page on your website should have a H1 (title) which is needed to achieve good SEO rankings. If your page does not have this HubSpot will highlight this.
If the page is a blog post or a standard page you should be able to add a h1 tag in the editor on a page-by-page basis:
- Go to the page.
- Click on the HubSpot tools in the top right corner.
- Click edit page.
- Go through the page and ensure the title is in a H1 tag.
If it is a system page such as 404 or search results
- Navigate to your settings (the cog in top right).
- Go to your website on the left hand side.
- Click on the system pages tab on the right hand side.
- Find the page and click edit.
Once there, you will be met with the template manager inside of design tools. On the right hand side you can search for modules (like you would in a page) and add or update them by clicking on them. You can drag and drop new modules into the template. Once done, hit publish and check it has worked.
Other on-page SEO issues can be fixed by using the techniques above and the list in the SEO tab should tell you what needs to be done.
In summary
SEO is so important for your website and is the best tool for improving web traffic and sales online. If you have a HubSpot website you can utilise the SEO recommendations tool to improve your website in a number of ways. It may take time but will be worth it in the long run.
Once you have gone through the list of problems on your site and fixed them you can rescan your site to see if they are fixed.
Interested in building a HubSpot website? We are here to help. As a platinum partner, we have the experience and expertise to help you get started with HubSpot.