JavaScript Best Practices — More SEO

Spread the love

Like any kind of apps, JavaScript apps also have to be written well.

Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at some best practices we should follow when writing JavaScript code.

Use Meta Robots Tags Carefully

We can add the noindex meta tag to prevent indexing.

We can add a static meta tag with:

<meta name="robots" content="noindex, nofollow">

And we can add one dynamically with:

fetch(`/api/items/${itemId}`)
  .then(response => response.json())
  .then(item=> {
    if (item.exists) {
      showItem(item);
    } else {
      const metaRobots = document.createElement('meta');
      metaRobots.name = 'robots';
      metaRobots.content = 'noindex';
      document.head.appendChild(metaRobots);
    }
  })

We create the meta element, add the attributes, and attach it to the head tag with document.head.appendChild .

If Google encounters noindex , then the JavaScript won’t run.

It’ll index the page if the meta tag with noindex is removed.

Use Long-Lived Caching

We should cache assets to reducing loading time.

This may lead to outdated resources being loaded.

To clear the cache when new content is deployed, we can add a unique fingerprint to the file name of them.

Use Structured Data

We can add structured data with a script tag:

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

This lets Google know the content of our page.

The type has to be set to “application/ld+json” for this to work.

Follow Best Practices for Web Components

We should make sure that Google sees the rendered content of our web component.

If it’s not visible, then Google can’t index it.

To test them, we can use the Mobile-Friendly Test or the URL Inspection Tool to look at the rendered HTML.

To make sure the light DOM and shadow DOM are both rendered, we should use the slot element:

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
      let p = document.createElement('p');
      p.innerHTML = 'Hello World: <slot></slot>';
      this.shadowRoot.appendChild(p);
    }
  }

window.customElements.define('my-component', MyComponent);
</script>

<my-component>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Suspendisse vitae eleifend nulla.</p>
</my-component>

We have the slot in the shadow DOM to render the items between the tags.

Then everything will show.

Fix Images and Lazy-Loaded Content

If we have images, we should lazy load them so that they only show when they’re displayed to the user.

This reduces load time so users and Google can see the rendered content faster.

Title

We need a title on our pages.

We can add a title tag:

<head>
   <title>Page Title</title>
</head>

This lets Google identify the page easily.

Description

Also, we can add the meta description to describe our content to search engines.

For example, we can write:

<head>
   <meta name="description" content="description of the page" />
 </head>

Open Graph Image

To make our page show a featured image for social media, we need the open graph image tag.

For example, we can write:

<head>
   <meta property="og:image" content="https:/example.com/image.png" />
 </head>

Conclusion

We can improve our web app’s ranking with lazy loading, caching, and following best practices with web components.

Also, we should look add a few meta tags for search engines and social media.