SEO

Understand SEO recommendations

Last updated: April 26, 2021

Applies to:

All products and plans

Within the SEO tool, content editor, and page details, you can scan your content for SEO recommendations. Learn more about how to access your SEO recommendations

The following recommendations are organized by category, then listed in order of their potential SEO impact. Straightforward recommendations and those requiring developer assistance will only appear in HubSpot's SEO tools.

Accessibility

Add alt text to your images

Adding alt text to your page's images lets search engines and visitors using screen readers understand their content. Learn more about how to work with alt text

Define your page's language with the "lang" attribute

A page's language is set by the "lang" attribute. Screen readers rely on this attribute to determine which language library to use. If the language isn't set correctly, visitors' screen reading software may not work correctly. Learn more about using the "lang" attribute.

The "lang" attribute is set inside the <html> tag at the start of your page's source code. A correctly formatted "lang" attribute will look like this:

<html lang="en">...</html>.

Compare the language code in your <html> tag with the list of accepted two-letter codes for languages, then replace the invalid code. If your <html> tag doesn't contain a "lang" attribute, add lang="[language code]" to your tag. 

Crawling and Indexing

Confirm the correct pages are hidden from search results

If any pages hosted on your domain are blocked from search engines, you'll see a recommendation to review a list of these pages. This is an easy way to make sure there aren't any pages on your website that are blocked from search engine by mistake. 

If all the pages listed are hidden from search results intentionally, no action is needed.

If you see a website page that's hidden from search results that should be indexed for search results, work with your website administrator to update your robots.txt file or remove any tags on the page that might be blocking it from search results. 

Make sure your canonical links are configured correctly

Search engines like Google use canonical links to find the primary version of a page to display in search results. Avoid duplicate content issues by adding a valid canonical link to each page. Learn more about how canonical URLs influence SEO

Canonical links will be marked as invalid for any of the following reasons: 

  • There is more than one canonical link.
  • The canonical link is not a valid URL.
  • The canonical link is a relative URL.
  • The canonical link points to a page for a different region or language.
  • The canonical link points to a different domain.
  • The canonical link points to the site root. 

Learn more about how to edit a page's canonical URL from the Settings tab in the content editor. 

Make sure all hreflang links contain a valid language code

Using hreflang links in your multi-language website enables search engines to know a page's language. Search engines can then give international users a search result for the page that matches their preferred language. Learn more about using hreflang links for your multi-language content

If these links have an invalid language code, search engines won’t be able to correctly identify the page’s language or include it with the results for that language to international users. Multi-language pages hosted on HubSpot will automatically use valid language codes.

Compare the language codes in your affected links with the lists of accepted two-letter codes for languages and regions, then replace any invalid codes. Specifying a region in your hreflang link is optional; if used, you should format it as hreflang=”[language]-[region]”. For example, a page in Spanish targeted at users in Spain would be formatted as hreflang="es-es," while one for all Spanish speakers worldwide would use hreflang=”es”

Make sure all hreflang links use a full URL

Using hreflang links in your multi-language website enables search engines to know a page's language. Search engines can then give international users a search result for the page that matches their preferred language. Learn more about using hreflang links for your multi-language content

Some hreflang links use relative URLs, which contain only a URL path, rather than a full URL starting with http/https. While these links may work, they have an increased risk of breaking in the future if the original URL changes. Multi-language pages hosted on HubSpot will automatically use full URLs.

Edit your relative hreflang links in your page’s source code. Learn more about editing a page’s source code in the page editor and in the module editor

For the page https://www.hubspot.com/example-page, a relative link might look like this: 

link rel="alternate" href="/example-page/fr/" hreflang="fr-fr" />.

You can change this to a full link by editing the href to contain the full URL including the protocol (http/https): 

link rel="alternate" href="https://www.hubspot.com/example-page/fr/" hreflang="fr-fr" />.

Mobile Experience

Make sure mobile users can easily click on each page element

Interactive elements, such as buttons and links, that are too small or too close together can be difficult to tap on mobile devices. Interactive elements should be at least 48 pixels by 48 pixels in size. If an element needs to remain the same size, adding padding will also resolve this error. 

Learn how to edit the size or padding of different types of elements in HubSpot: 

Make sure each page has a viewport tag

A viewport tag controls the scale of your website content on different device types. If this tag is missing or set up incorrectly, your website appears less mobile-friendly to search engines. This can have a negative impact on your rankings in search results.

Work with your developer to add or edit the viewport tag for your page. If you don't have a developer on your team, you can get advice on the CMS Developers Forum or connect with a Solutions Partner

On-Page SEO

Write a clear title and meta description 

Your page's title and meta description show search engines what your page is about. Learn more about editing your page's title and meta description in HubSpot's content editor.  

Optimize blog content length

The optimize tool scans the word count of blog posts only, not pages. The tool counts all words contained in the blog post, including the blog title and author. It's recommended to include at least 300 words as a general rule. Be sure to do your research and determine the best length for the topic you're writing about.

The ideal word count for your content depends on what you're writing about. The most important thing is to consider who audience is and what they need to know about the subject. A great way to determine how long your content should be is to see what pages rank highly in search results for your topic or subtopic phrase today.

  • If most content is short and concise, you should aim for a similar length.
  • If you find more long form content that goes into great detail, try to do the same thing in your own content.

The SEO tool and the Optimize panel scan your blog content to count the number of words included within the blog post body:

  • Page has at least 300 words: pages that rank well in search results give an in-depth answer to visitors' questions. Aim for at least 300 words.

Please note: the optimize tool counts unicode white spaces within the blog-post-wrapper class to detect the number of words in your blog post. This means the count is most accurate for languages using a Latin alphabet. If you notice an unexpected word count, check with your web developer to confirm there aren't any duplicates of your blog post wrapper class within the coded blog post template.


Performance

Use correctly sized images

Using large image files that you resize within the editor can increase page loading time. Learn more about how image size influences page performance.

You can avoid this error by resizing large images before uploading them to HubSpot or using a vector-based image format, such as SVG. 

Developers can decrease loading times for existing images by implementing responsive images. Learn more about developer options for optimizing images for page performance.

Security

Make sure all pages load over a secure connection

If any of your pages are using HTTP you will see the above recommendation. Pages using HTTPS have been a Google ranking factor since 2014. Pages that load over HTTPS also offer a more secure browsing experience for your website visitors. 

Make sure all page resources load over a secure connection

If any of the resources on your pages are loading over an insecure connection, you will see the above recommendation. Loading resources (like images, CSS files, JavaScript files, etc.) over an insecure connection reduces the security of the entire page. It can also result in browsers displaying a mixed content warning or blocking the affected resources.

When your files are hosted using the Files tool or your coded files are created using the Design manager in HubSpot, they will automatically use HTTPS. However, if your resources are hosted or partially-hosted externally, you will need to purchase an SSL cert from an external provider to load your resources using HTTPS. 
 
If you have already purchased an SSL cert from an external provider but your resources are not loading using HTTPS you will need to contact your external provider to resolve the issue. You will need to review all of your resources to ensure they are all hosted using a secure connection. 
 

Update external links that pose security and performance risks

External links that open a page in a new browser tab using the target="_blank" attribute can cause security and performance issues. You can avoid these issues by adding rel="noopener" or rel="noreferrer" to these links. Learn more about potential risks of this kind of external link

In some HubSpot modules like the Follow Me module, the rel="noopener" attribute is added to external links automatically. 

You will need to edit external links in your page’s source code. Learn more about editing a page’s source code in the page editor and in the module editor

A link triggering this error could look like this: 

<a href="https://www.google.com" target="_blank">.

By adding rel="noopener" or rel="noreferrer” to this link, you will avoid security and performance issues: 

<a href="https://www.google.com" target="_blank rel="noopener"> or

<a href="https://www.google.com" target="_blank rel="noreferrer">.

User Experience

Make sure all page resources, such as images and CSS stylesheets, load

Resources not loading, such as broken images, will negatively impact your user experience. This can also affect where your website appears in search results. Removing or updating the page references to each broken resource will resolve this issue. 

HubSpot currently detects the following types of broken resources: font, image, audio/video content, script, stylesheet, and XHR. 

Locate references to your broken resource in your page, template, or stylesheet. You will need to either replace the links or resolve the issue in the resources themselves.
 

Make sure your images use the correct aspect ratio

An image's aspect ratio is the relationship between its width and height. When resizing an image, make sure that the aspect ratio remains constant. Otherwise, the image may appear stretched or distorted. 

When you resize images in HubSpot's content editor, the original aspect ratio will be maintained automatically. To resolve an incorrect aspect ratio, check your HTML and CSS for any styling that affects width or height.