Skip to content

The SEO category

Jump to bottom
Rémy Greinhofer edited this page Oct 22, 2018 · 6 revisions

The problems

If we take a deeper took at the SEO report in lighthouse, we can see the following problems:

In the "Mobile Friendly" section:

  1. Does not have a tag with width or initial-scale. No viewport meta tag found
  2. Document doesn't use legible font sizes .Text is illegible because of a missing viewport config

In the "Content Best Practices":

  1. Document doesn't have a <title> element
  2. Document does not have a meta description

Populating the Head section

The problems above can be fixed by updating the <head> section of the page.

The Next.js documentation has section dedicated to this.

import Head from 'next/head'

export default () =>
  <div>
    <Head>
      <title>Request Yo Racks</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <meta name="description" content="RYR landing page" />
    </Head>
    <div className="navbar">
      <img className="logo" src="/static/images/logos/ryr_logo_64x64.png" alt="RYR logo" />
      <h1>Request Yo Racks</h1>
    </div>
    <style jsx>{`
        h1 {
            color: #B35C22;
            display: inline-block;
            margin-left: 10px;
        }

        .navbar > * {
            vertical-align: middle;
        }
        `}
    </style>
  </div>

Run the SEO audit in lighthouse again. We now have a score of 💯!

⬅️ The Accessibility category | 🏠 PWA | The PWA category ➡️

Custom footer

Clone this wiki locally