Hubspot site SEO Issues

Overview

Search Engine Optimization (SEO) is the practice of optimizing a website or web page to improve its visibility and ranking in search engine results pages (SERPs).

GOALS

  1. To achieve the performance issues score of Page speed insights for web to be above 95%.

  2. And we have successfully achieved this target. Here is the result for web performance


  1. And here is the result for Mobile performance


Milestones

Reduce unused JavaScript - Its the major issue in the site SEO

Unused JavaScript can slow down your page load speed

  1. If the JavaScript is render-blocking, the browser must download, parse, compile, and evaluate the script before it can proceed with all of the other work that's needed for rendering the page.

So we need to remove those js files that are unused, that unnecessarily block the page to be rendered.


  1. Hotjar File - As per the client’s requirement, the Hotjar file to be removed. It was induced through Google tag manager.

  2. Statcounter - We identified a Statcounter js file that seems to be unused. That has also been induced through GTM.

     To remove Hotjar and Statcounter js files, the GTM container was edited. Below are the steps that has been followed to remove the Hotjar script from the GTM file

  3. Open the GTM panel , select the website and click on the Admin link and then select the option Export container

     

     It will show the list of the version of GTM

     

     Export the latest version of Container, that downloads the latest GTM container file on your local system.

     

     Open the downloaded file in any editor, and remove the code for specific Scripts that need to be removed from the site.

  4. Here is the code for Hotjar file


  5. Code for Statcounter

     

  6. After removing the code, save the file and upload to the GTM. Select Import file and you will get the options to upload the file.


     And it's done !

     

     Note: Later on Client’s request we have removed the complete Google tag manager file.

Trust and safety

 Old version of jQuery is the main cause of this issue

 

  1. We have updated jQuery to the latest version. i.e. from jQuery1.11.2.js to jQuery3.6.3.js

     

Here we're going to add code to test if migrating to the newest version of jQuery will break anything for your site.

We're going to open the HubSpot website settings. Copy and paste a snippet of code, and disable jQuery.

Here is our updated jQuery code


In a new tab, open HubSpot, navigate to Settings (gear icon). Then Website > Pages.


First check that the "Include jQuery" checkbox is enabled.

jQuery setting enabled, version 1.7 selected, migrate and load from footer disabled.    


If it is not, and you know jQuery is used, it was likely added by a developer. If it's enabled however, proceed.

Check the jQuery version number that's currently selected.

Copy the code below and paste it into your footer HTML, do not save yet.  


Scroll back down until you see the settings for jQuery.

Check the jQuery version number that's currently selected.

If you have version 1.7 skip to the next step. If you have version 1.1 Where you see {% set oldjQueryVersion = 1.7 %} change the number 1.7 to 1.11. This ensures the correct version of jQuery will load on your site during testing.

Now check if the checkbox for "Load HubSpot's included jQuery library from your footer" is enabled.

If it's disabled, where you see {% set oldjQueryLocation = "footer" %}, change the "footer" text to say "head".

Find the jQuery checkbox and disable it.

Save the settings.

Reduce how long the page is blocked from responding to the user input, improve page loading time and reduce the size of page network requests

We used a content delivery network (CDN) to overcome this issue.

CDN is a group of servers spread out over a region or around the world that work together to speed up content delivery on the web. The servers in a CDN temporarily store (or cache) webpage content like images, HTML, JavaScript, and video. They send the cached content to users who load the webpage. Today, almost all websites and applications rely on a CDN to help serve content to their users.

Fix broken internal links and external links

Having broken internal links on your website can negatively impact your website's user experience and search engine optimization. Broken links can frustrate users and cause them to leave your website, leading to higher bounce rates and lower engagement. Additionally, broken links can signal to search engines that your website is not well-maintained, which can negatively impact your search engine ranking.

  1. Here we identified the broken links and removed the unused links and update the existing link with proper URL

Make sure the page width matches the viewport width

Ensuring that the page width matches the viewport width is important for creating a responsive and user-friendly website. This is because it allows the website to adapt to different screen sizes and devices, making it easier to view and interact with.

  1. Here we have added the meta tag for viewport in tag of the header file of the website



Make sure each -page has exactly one H1 Tag

H1 tag is the title of a page. They're usually keyword-centric, focused around the "big idea" of a page or post, and crafted to grab a reader's attention.

Having a clear and concise heading structure is important for both user experience and SEO. The H1 tag is typically used to denote the main heading of a page, and it should be used only once per page.

  1. In this site the H1 tag has been used multiple times on one page. So we have edited the code to get only one H1 tag per page.

Add image alt text attribute

Alt text is a description of an image that appears when the image is not able to be displayed. It provides context for visually impaired users who use screen readers, and it also helps search engines understand the content of your web page.

  1. We have added the alt text to all the images that contain meaningful information regarding the content of the web page in the site.

Verify image alt text should be blank

In general, it's recommended to add descriptive alt text to images on your website to improve web accessibility and SEO. However, there are some cases where it may be appropriate to have a blank alt text attribute for an image.

  1. Here we have removed the alt text of the images, that have been used as the banners or used for just decorative purposes. This can help prevent screen readers from announcing irrelevant information to users, which can be distracting or confusing.

Address pages with duplicate title tag

Search engines like Google rely on title tags to understand the content of your pages and to rank them in search results, so having duplicate title tags can cause confusion and make it harder for search engines to understand the relevance of each page.

  1. In this site there were many duplicate pages with duplicate title tag, so we unpublished those page from the site

Address pages with duplicate meta description

Having duplicate meta descriptions on multiple pages can harm your website's SEO as search engines may have difficulty determining which page to rank for a given query.

  1. In this site there were many duplicate pages with duplicate meta description, so we unpublished those page from the site

Remove title from meta description and shorten meta description

By removing the title from your meta descriptions, you can create more accurate and descriptive summaries of your content for search engines and users. This can help improve the click-through rate to your website, as well as your overall search engine rankings.

  1. We removed the site title from the meta description that has been added dynamically through code.


Make your anchor text is more descriptive

In a link, anchor text is the clickable word or phrase. It's important for the anchor text to clearly communicate what you're linking to. Try to avoid using generic anchor text such as "click here" or "click this."

Here in this site, we have replaced all the generic anchor text with the more descriptive and meaningful text. For example, check the below screen, the links have been changed to “View Service” from “View More


Reduce Page layout shifts

Cumulative Layout Shift (CLS), a Google metric, measures the overall visual stability of a page. Sudden shifts in the layout of a page can negatively affect your visitors' experience and its ranking in search results. Aim for a CLS score of less than 0.1.

Page layout shifts can be a frustrating user experience, especially when elements on a page move around unexpectedly as it loads. Reducing page layout shifts can improve the perceived performance of your site and improve user experience.

  1. To fix this issue, we have removed all the unwanted animations and sliders that were used in the site.

  2. Like, the text moved from right to left and the slider banner module used on the home page.

Delay loading images that appear below the fold

The images that are below the fold are not visible to the user until they scroll down the page. Delaying the loading of images that appear below the fold can significantly improve page loading times, as it allows the page to load more quickly and improve the user experience.

  1. We applied the lazy loading functionality to all the images that are loaded below the page fold.

     

In code, the example is below


Make sure all the images are sufficiently compressed

  1. We compressed all the large images to the required size without distortion

Use correctly sized images

Serving images that are larger than the version that's rendered on the screen can increase the page loading time. Resize large images before uploading them to HubSpot or use a vector-based image format, such as SVG.

  1. We have resized all the required images that were oversized and converted the majority of the JPG and PNG images to SVG or WEBP format.

Make sure mobile users can easily click on each page element

Making sure that mobile users can easily click on each page element.

To fix this, please ensure that clickable elements (Buttons, links, or other clickable elements) should be large enough to get clicked on mobile devices with a finger or thumb. Ideal size for clickable icons/elements is at least 48px by 48px.

Also do not place these elements too close to each other on responsive design.

For example, in the screenshot below, the links were too close to each other. So, we increased their margin to maintain a good gap in between.


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

Ensuring that all page resources, such as images and CSS stylesheets, load correctly is an important aspect of website performance and user experience.

So, to fix the images that have not been loaded correctly. We replaced “data-src” with “src




    last updated 7 months ago