How to fix SEO issues in your website?

Fixing SEO issues on your website involves a few key steps. First, you need to identify the issues by using a tool such as Lighthouse to analyze your website's performance, accessibility, and search engine optimization. Once you have identified the problems, you can then prioritize and address them, starting with the most critical issues first. This could involve making changes to your website's content, structure, or technical configuration to improve factors such as page loading speed, mobile-friendliness, security, and metadata.

Very recently we did this exercise of fixing SEO issues on Helix. Helix is a customer support product that assists communities in finding answers to their questions. In this post, we will summarize how we addressed some of our SEO issues.

Identifying SEO Issues

To address any SEO problems on your website, it's important to first detect them. To accomplish this, we utilized a tool called Lighthouse, which is available for free through Chrome by default. Created by Google, Lighthouse is an open-source tool that assists website owners in improving the accessibility, performance, and search engine optimization (SEO) of their websites. By analyzing web pages, Lighthouse produces reports that highlight key areas for enhancement and optimization.

Lighthouse evaluates a range of SEO-related factors, including page loading speed, mobile compatibility, security, structured data, and meta tags. By using both audits and metrics, this tool assesses these factors to offer practical suggestions for enhancing a website's SEO.

Our initial score

     Our first score on the test was

Performance = 70

SEO = 71

Fixing SEO issues

Javascript size

Text compression at nginix

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

Self hosted fonts

Obtaining fonts from external websites is a straightforward process, but there is a catch. It negatively affects performance, as it requires additional SSL handshakes and DNS requests. To address this issue and improve performance, we hosted the fonts on our server and cached them using Nginx. This approach allowed us to achieve performance gains.

Update to /etc/nginx/sites-enabled/default

location /fonts/ {
  alias   <font_full_path>/fonts/;
            expires 365d;
}

Enabled Cache headers for css & javascripts

In our previous code, to reload an updated file, we disabled JavaScript code caching by adding a random parameter to the URL. However, this approach resulted in performance issues, as content could not be cached if it had not been updated. To address this problem, we utilized Nginx cache control, which allowed us to cache content while also ensuring that the most recent content was being used.

We updated /etc/nginx/sites-enabled/default to enable cache headers for JavaScript and CSS files.

location /css/ {
    alias   <CSS_DIR>;
    add_header Cache-Control "public, max-age=0, must-revalidate";
    }
 location /js/ {
    alias   <JS_DIR>;
    add_header Cache-Control "public, max-age=0, must-revalidate";
 }

Removing unused packages

This was the main culprit for our performance and page loading issues. Although we had implemented lazy loading in multiple areas, the size of our bundle was still quite large. Upon further analysis, we discovered that ckeditor, a rich text editor, was importing numerous unnecessary packages. We promptly removed all superfluous packages, fonts, locales, and color schemes. Additionally, we found that several packages contained unused constants and references that were unnecessary for our product.

To analyze the bundle size we used webpack bundle analyzer. It helped us to understand why our package size is quite big.

To address the issue with CKEditor, we removed the read-only editor for displaying rich content. Instead, we rendered the rich content HTML and imported all CKEditor styles. We also updated our code to utilize React.Lazy and Suspense for loading CKEditor on pages where the full editor is actually needed.

Feature gates

We incorporated feature gates in our code to control various features, utilizing third-party services for this purpose. However, we discovered that most of these feature gates took approximately 0.5 to 1 second to complete requests, which negatively impacted our page load time. To address this issue, we implemented sufficient caching and developed in-house gates, which significantly improved our page load time.

Meta tags

Meta tags are essential for SEO purposes. A good SEO strategy should include several meta tags, such as title and description, each of which has a character limit. For instance, the title should typically fall within the range of 50 to 60 characters, while the description should fall within the range of 150 to 160 characters.

Links directory

To index a website, search engines crawl the entire website. Ideally, when given a domain link, a crawler should be able to determine all links and index the data efficiently. To streamline this process, we created a dedicated directory link and linked it to the landing page. This approach enabled the crawler to crawl all pages and effectively index the data for search purposes.

Result

With the above fixes we hit the amazing milestone of 90+ scores on the performance and SEO.

Conclusion

Enhancing SEO is a gradual process that involves implementing multiple fixes and solutions. Presently, we are addressing several additional SEO-related issues that we intend to document in future posts.