How to improve your Next.js site's SEO (Part1)

September 15, 2021 — #Next.js #SEO #MetaTags

You are having a coffee glancing and clicking through your site.Pleased with yourself how well it turned out after all the hours spent tweaking it and making it look...just awesome. Only if anyone else could see this masterpiece.

The First step and the most essential one without a shadow of a doubt is adding <meta> tags on your site. I will try to go through the most important ones and show you how to create a flexible meta component so the world could find your creation.

What are Meta Tags and why are they important?

Meta tags provide additional information about the webpage in the head of the HTML of the document. This information is called "metadata" and while it is not displayed on the page itself,it can be read by search engines and web crawlers.

Search engines such as Google use metadata from meta tags to understand additional information about the webpage. They can use this information for ranking purposes, to display snippets in search results.

The list of possible <meta> tags is comprehensively huge.My main piece of advice: stick to the core minimum but do not omit the essential ones. Don't add meta tags you don't need — they just take up code space. The less code, the better

Essential Tags

Meta Content Type

This tag is necessary to declare your character set for the page and should be present on every page. Leaving this out could impact how your page renders in the browser.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Meta Viewport

A meta viewport tag sets the visible area of a web page. It is used to instruct the browser how to render the page on different screen sizes (i.e., desktop/tablet/mobile).

Google says that the “presence of this tag indicates to Google that the page is mobile-friendly.” This matters because Google ranks mobile-friendly web pages higher in mobile search results as of 2015.

SIDENOTE: The viewport tag isn’t all that’s needed to make a website mobile-friendly. Your website also needs to make use of responsive design.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Meta Description

The infamous meta description tag is used for one major purpose: to describe the page to searchers as they read through the SERPs(search engine results page). This tag doesn't influence ranking, but it's very important regardless. It's the ad copy that will determine if users click on your result. Keep it within 160 characters, and write it to catch the user's attention. Sell the page — get them to click on the result. Here's a great article on meta descriptions that goes into more detail.

It's important that meta descriptions on each page be unique.( we will go into later when we implement it in our custom <meta> component)

<meta name="description" content="Place the meta description text here." />

Meta Title

I will let Google make the introduction

Titles are critical to giving users a quick insight into the content of a result and why it’s relevant to their query. It’s often the primary piece of information used to decide which result to click on, so it’s important to use high-quality titles on your web pages.

Let's have a look at the best practices of this important meta tag

Write a unique title tag for each page
Be brief, but descriptive
Avoid generic and vague titles
Use sentence case or title case
Create something click-worthy—not clickbait
Match search intent
Include your target keyword where it makes sense

There are so many meta tags out there. Just look at some website's head tags in devtools. SEO itself is a massive topic to master.

For a beginner like me luckily , there are awesome resource to get the insight into to the subject.

Ahrefs.com is an informative resource to get started.

https://moz.com/blog/the-ultimate-guide-to-seo-meta-tags https://ahrefs.com/blog/seo-meta-tags/

After a little intro into essential meta tags , let's jump into implementation into our project.

As we learned above some meta tags are essential and do not change on a page to page basis (Meta Viewport, Meta Content Type).

So, where do we put them?

When you initialise create next app both are added automatically in your document. If you did not have the need to customise your _document.js , just inspect your site via devtools. You will see them smiling at you in head tag in your html.

What about the tags which need to unique on every page? How do we make them dynamic?

Our custom <meta> Tag to the rescue!

Create a meta folder in your components folder(folder for all components which are not top-level page components) and add Meta.js( you can call it whatever you want ) file into it.

To make our custom component to do job we take advantage of Next.js built-in head component, which Next.js provided us for this purpose.

//components/meta/Meta.js
//import built in Head component
import Head from "next/head";

const Meta = ({ title, description }) => {
  return (
    <>
      <Head>
        <meta name="description" content={description} />
        <title>{title}</title>
      </Head>
    </>
  );
};

// you can add default props to the component in case you ommit them when render it on individual pages
Meta.defaultProps = {
  title: "WebDev Newz",
  description: "Get the latest news in web dev",
};

export default Meta;

Let's walk through the code above.

First, we imported built-in Head component. Check the docs for some advanced usage.

title, meta, or any other elements (e.g. script) need to be contained as direct children of the Head element, or wrapped into a maximum one level of <React.fragment> or arrays—otherwise the tags won't be correctly picked up on client-side navigations.

Then, we created our custom function component which receives props to make it dynamic.

We added a fallback of default props in case no props are being passed to our custom <meta> Tag

Let's add it to our unique pages to see it in action

import React from "react";
// we import our custom Meta componnent
import Meta from "../components/Meta";
const about = () => {
  return (
    <>
      <div>
        <Meta title="About" />
        <h1>Welcome to About Page</h1>
      </div>
    </>
  );
};

export default about;

We gave our custom Meta.js title prop ,which expects, a new value based on a page. Notice we omitted description prop. Since we defined default prop , value will be what we put there as a default if not specified like in this case.

However, we want to make it unique, which is especially relevant for our blog post pages( if you are building a blog) or our individual product page( if you are building e-commerce site). Let's see what our component can do in those cases.

I will use a blogging example with markdown for a practical demonstration.

Let's say you have a markdown blog entry like this

---
title: Dark Mode Rises
date: "2021-09-05"
isFeatured: true
draft: false
ogImage: images/defaultOpenGraphImage.jpg
description: How to implement dark mode in Next.js app without dreaded flicker.
tags:
  - Next.js
  - React
  - StyledComponents
  - Dark Mode
---

You may use CMS , but either way it is a better practice to add a little description or some use excerpt into your content to make it easier to dynamically customise your <meta> tags

Navigate to your dynamic route file in pages folder

//pages/blog/[slug].js
...
import ArticleTemplate from "../../components/blogPost/article";
import Meta from "../../components/meta/meta";
import { getAllArticles, getArticleBySlug } from "../../utils/contentFetchers";

const Article = ({ post }) => {

...
// this inner part implemention is ommited//
  return (
    <>
      <Meta
        title={post.title}
        description={post.description}

      />
      <ArticleTemplate post={post} />
    </>
  );
};

export async function getStaticProps({ params }) {
  const post = getArticleBySlug(params.slug, [
    "title",
    "date",
    "tags",
    "description",
    "content",
    "ogImage",
    "coverImage",
  ]);

  return {
    props: {
      post,
    },
  };
}

export async function getStaticPaths() {
  const posts = getAllArticles();

  return {
    paths: posts.map((post) => {
      return {
        params: {
          slug: post.slug,
        },
      };
    }),
    fallback: false,
  };
}

export default Article;

Let's walk through the code above and see our component hard at work.

It receives props from our getStaticProps function and uses it to dynamically change our meta tags so they are unique for each individual blog post. Race to the coveted 100% score on Lighthouse metric. And there you have it.

We created our custom <metaTag> component which dynamically changes based on the props we give it. One baby step closer to get discovered and make the world see our site.

What about social media? you may ask.

Open Graph meta tags are the solution. As mentioned above the list of meta tags is long.

If you want to know more check out Part2.