JavaScript Best Practices — SEO

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.

SEO

SEO is making our website show up in earlier pages in search results.

This way, we get more reach.

With JavaScript-heavy websites, we need more work to improve our sites.

Google processes JavaScript with a crawler to index the page’s content.

It waits for the page to render and then index the content that’s rendered.

It does this if the page allows crawling.

To make rendering faster, we can do it on the server-side or pretender our content.

To do this easily, we can use frameworks like Next or Nuxt to do it.

Describe Our Page with Unique Titles and Snippets

We should add unique titles and snippets so that they can be identified easily.

Write Compatible Code

JavaScript offers many APIs for developers.

We should make sure that they aren’t deprecated and are compatible with most browsers to prevent browser-related issues.

Use Meaningful HTTP Status Codes

Google uses HTTP status codes to find out if some are wrong when crawling the page.

We should use meaning stratus codes to tell if Google whether a page should be crawled or not.

Common ones include 404 for not found and 401 or 403 for access denied.

301 or 302 are redirect responses.

500 series errors are errors on the server-side.

Avoid Soft 404 Errors in Single-Page Apps

We should redirect to a not found page when a 404 error is encountered when making HTTP requests.

Or we’ve to add <meta name=”robots” content=”noindex”> to error pages using JavaScript.

This way, Google knows that it’s a 404 page.

The redirect approach can be written as follows:

fetch(`/api/items/${itemId}`)
.then(response => response.json())
.then(item => {
  if (items.exists) {
    showItem(item);
  } else {
    window.location.href = '/not-found';
  }
})

We redirect to a not found when the item doesn’t exist.

Alternative, to create the meta element, we can do that with JavaScript:

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 if the item isn’t found.

Use the History API instead of Fragments

The history API lets us go to various pages with it.

It implements routing between different views of our web app.

This makes sure Google can find links.

So instead of changing fragments to navigate like:

<nav>
  <ul>
    <li><a href="#/home">home</a></li>
    <li><a href="#/profile">profile</a></li>
  </ul>
</nav>

<script>
window.addEventListener('hashchange', () => {
  const pageToLoad = window.location.hash.slice(1);
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
});
</script>

Instead, we use the history APU by writing:

<nav>
  <ul>
    <li><a href="#/home">home</a></li>
    <li><a href="#/profile">profile</a></li>
  </ul>
</nav>

<script>
function goToPage(event) {
  event.preventDefault();
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1);
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl)
}

document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));

</script>

We use the history API in the 2nd example to navigate.

We call preventDefault to prevent going to the href the default way so that we can navigate with JavaScript.

Next, we remove the leading slash with hrefUrl.slice(1);

Then we call pushState to navigate with the history API.

This way, the history is saved and we navigate.

Conclusion

We can navigate with the history API to update the browser history.

Also, we can look at various approaches to do SEO in our client-side web app.