In this article, we will add OpenGraph to a new Next.js website, so it's easy to grab the knowledge that will enable you to add it to your website and adapt it to your or your client's situation.

We will start as usual by creating a new Next.js project, I like to use typescript on all of my projects. To create a new project I will use this command `npx create-next-app@latest --typescript open_graph`.

After it's done go and open the project inside your favorite code editor mine is vscode, then start the dev server with `npm run dev` and check it inside the browser you should see the default Next.js home page.

Before getting started with creating a component to add the open graph meta tags let's first learn a little bit about OpenGraph and its properties which we'll be adding to our Next.js website.

OpenGraph is used to make web pages rich when shared on social media, it enables you to control how it looks. Like page title, preview image, url, and so on.

When a page doesn't include the OpenGraph protocol and it's shared for example on Facebook, Facebook will try to pick some default values like the first image on that page, the page description, etc.

To be able to control the preview displayed information when our web page is shared on social, we use meta tags to set those values.

Because this article is about the **implementation of Open Graph with Next.js?** you can read more here: <a href="https://ahrefs.com/blog/open-graph-meta-tags/" rel="noopener noreferrer" target="_blank">Open Graph Meta Tags: Everything You Need to Know</a>.

At the end of this article, you will have an OpenGraph component and a useOpenGraph hook that can be reused on multiple pages, or extended by extra meta tags.

To make it easy for you to understand how to reuse it in multiple situations I like to work with a scenario for the rest of the article.

We will have two pages, one is a dynamic posts detail page at `/posts/{id}`, and another is the home page at `/`.

For our dynamic page, we will use a simple JSON file with 3 posts in it, then we will use `getServerSideProps` to read that file.

It won't be complicated we will simply import the JSON file, search for the right post, then show the page with that post's content.

But our mean focus won't be on this part, as you may already have a similar setup, but it will help us understand better the OpenGraph component and its helper hook on how it can be used in multiple types of Next.js pages.

As mentioned before, let's start by creating a new file at `data/posts.json` with 3 simple posts, remember this step is only to have something to work with.

Post 1

Post 2

Post 3

A post will have an `id, title, thumbnail, description`, and a content property, these are commonly used fields, and we will use them to set the appropriate Open Graph meta tags.

Don't forget to add a placeholder image at `public/images/og-posts-image.jpg` as we used it inside out posts data.

Now that we have the posts data we'll need inside the show post page, let's create another new file at `pages/posts/[id].tsx` with a default Next.js page component.

import Head from "next/head";
import Image from "next/image";
import { GetServerSideProps, NextPage } from "next";

type Post = {
  id: number;
  title: string;
  thumbnail: string;
  description: string;
  content: string;
};

interface ServerSideProps {
  post: Post;
}

const ShowPost: NextPage<ServerSideProps> = ({ post }) => {
  return (
    <>
      <Head>
        <title>{post.title}</title>
      </Head>

      <main>
        <article>
          <h1>{post.title}</h1>

          <Image
            width={720}
            height={420}
            src={post.thumbnail}
            alt={post.title}
          />

          <div dangerouslySetInnerHTML={{ __html: post.content }}></div>
        </article>
      </main>
    </>
  );
};

export const getServerSideProps: GetServerSideProps<ServerSideProps> = async ({
  params,
}) => {
  if (!params || typeof params.id !== "string" || isNaN(+params.id)) {
    return { notFound: true };
  }

  const posts: Post[] = require("../../data/posts.json");

  const postId = +params.id;
  const post = posts.find((p) => p.id === postId);
  if (!post) {
    return { notFound: true };
  }

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

export default ShowPost;

This is also a common situation, you have some kind of data source, then you use it to retrieve the post data if it was found and 404 otherwise.

First, we declared a `Post` type, `ServerSideProps` that uses the Post type and passed a generic type value to both `NextPage`, and `GetServerSideProps` types.

Doing that will help our `ShowPost` component, and `getServerSideProps` function understands each other, so both returned props and received ones are aligned.

Inside the `ShowPost` component we accept a `post` prop and use it to show posts data, the usual stuff.

Inside the `getServerSideProps` function we first validate the provided `id` and make sure it's a valid number.

Then we import our JSON data file using the `require` keyword inside the `getServerSideProps` to avoid any client/server ssr errors.

Then we convert the `postId` to a number by adding a plus sign at the beginning, we store it in another variable to help TypeScript understand its type.

Now that we have both a valid ID and a list of posts, we search for the requested post, if it wasn't found we return a 404 response otherwise we return the post prop to the page component.

When creating a new Next.js project, by default it comes with a home page with some content in it, that we will clean up to make it easy for us to not get lost outside our context.

We will remove any style-related stuff, classes, and the related CSS module file, go on and open the `pages/index.tsx` file, and replace it with the following.

import type { NextPage } from "next";
import Head from "next/head";

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>OpenGraph with Next.js</title>
        <meta
          name="description"
          content="Article about OpenGraph with Next.js"
        />
      </Head>

      <main>
        <h1>OpenGraph with Next.js</h1>
        <div>An empty page is a good page</div>
      </main>
    </div>
  );
};

export default Home;

Building the OpenGraph component with Next.js

Now that we have a better idea about Open Graph and that we did set up our Next.js project to help us achieve our goal from this article, it's time to build the actual component.

Go ahead and create a new file at `components/common/OpenGraph.tsx` as usual we always need to think about the project structure from the start, that's why we put it inside a common directory.

export type OGProperties = {
  locale: "en_US" | "fr_FR"; // https://saimana.com/list-of-country-locale-code/
};

const OpenGraph = ({ properties }: { properties: OGProperties }) => {
  const { locale } = properties;

  return (
    <>
      <meta property="og:locale" content={locale} />
    </>
  );
};

export default OpenGraph;

We will go step-by-step, we declared an `OGProperties` type and then used it to type the `properties` prop, as the first step we have a `locale` as a property.

Open Graph locale property is for telling the page locale, there's a link to all the available locales you can check to find yours.

The OpenGraph component's main purpose is to group a list of OG meta tags, then give them their values from the `properties` prop that it receives.

We made it a component in the first place because we will need it on multiple pages, and each page may have a different source of data, for example in a multi-language website we can have different locales for different pages.

In the same way, we added the `og:locale` meta tag we will add the rest of the needed `og:*` tags.

export type OGProperties = {
  locale?: "en_US" | "fr_FR";
  url: string;
  title: string;
  type: "article" | "website";
  description: string;
  site_name: string;
  image: {
    alt: string;
    type: string;
    url: string;
    width: string;
    height: string;
  } | null;
  author?: string;
  section?: string;
  modified_time?: string;
  published_time?: string;
  card: "summary" | "summary_large_image" | "app" | "player";
};

const OpenGraph = ({ properties }: { properties: OGProperties }) => {
  const {
    locale,
    url,
    site_name,
    title,
    type,
    description,
    author,
    section,
    image,
    modified_time,
    published_time,
    card,
  } = properties;

  return (
    <>
      <meta property="og:locale" content={locale || "en_US"} />
      <meta property="og:title" content={title} />
      <meta property="og:type" content={type} />
      <meta property="og:description" content={description || ""} />
      <meta property="og:url" content={url} />
      <meta property="og:site_name" content={site_name} />
      {type === "article" && (
        <>
          <meta property="article:author" content={author} />
          <meta property="article:section" content={section} />
          <meta property="article:modified_time" content={modified_time} />
          <meta property="article:published_time" content={published_time} />
        </>
      )}
      {image && (
        <>
          <meta property="og:image" content={image.url} />
          <meta
            property="og:image:secure_url"
            content={image.url.replace("http://", "https://")}
          />
          <meta property="og:image:width" content={image.width} />
          <meta property="og:image:height" content={image.height} />
          <meta property="og:image:alt" content={image.alt} />
          <meta property="og:image:type" content={image.type} />
          <meta name="twitter:image" content={image.url} />
        </>
      )}
      <meta name="twitter:card" content={card} />
      <meta name="twitter:url" content={url} />
      <meta name="twitter:domain" content="codersteps.com" />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description || ""} />
      <meta name="twitter:site" content="@codersteps" />
      <meta name="twitter:creator" content="@abdessamadely" />
    </>
  );
};

export default OpenGraph;

Take a minute to read the OpenGraph component content, after that let me highlight the parts that may need a little explanation.

First, we have marked the `locale` as optional and provided it with a default of `"en_US"`, then we added other simple og:tags the same way we did with the locale property.

These are simple open graph tags types: *og:locale*, *og:title*, *og:type*, *og:description*, *og:url*, *og:site_name*, *og:image*. because the image is optional, we check for it, before adding the *og:image* related meta tags.

With each property, we used the same process, first adding the property the the `OGProperties` type, then extracting it using object destructuring, and finally adding it to the meta tags JSX.

When the *og:type* is equal to **article**, we add extra open graph meta tags related to the article: *article:author*, *article:section*, *article:modified_time*, *article:published_time*.

Whenever we add a new og meta tag, we extend the *OGProperties* type to include the new property that was added.

And at the end, we added Twitter-related open graph meta tags, which use the HTML meta tag with a `name` attribute instead of the `property` attribute.

Some value you can keep static like your domain name, twitter site (your website twitter account), or your own twitter account (creator).

You can always read more about this property from the mentioned blog post above, and you can always use your new knowledge to extend this component, but these are the most used open graph meta tags.

Building the useOpenGraph hook with Next.js

We could have used the component without the need of creating a hook for that, but it will be a little missy as our OpenGraph component take one little big object, which can make it a little hard to be reused in multiple places while maintaining the ease of making changes later on.

So to simplify our life and make the component easy to use in multiple places, we will create a helper hook, that will play the role of building the OpenGraph properties prop 😁.

Let's create a new file for our hook at `hooks/useOpenGraph.ts` then declare, and export the hook function.

import { useMemo } from "react";

type PageOgData = {};

const useOpenGraph = (data: PageOgData) => {
  const ogProperties = useMemo<{}>(() => {
    return {};
  }, []);

  return ogProperties;
};

export default useOpenGraph;

This is the basic structure of the `useOpenGraph` hook, we use the react `useMemo` hook to store the OpenGraph component properties.

The hook accepts a data prop of type `PageOgData` which is similar to the `OGProperties` type with some small differences like making some properties that can have default values optional.

The `useOpenGraph` takes some data, then use it to build and manage the OpenGraph component properties, and finally returns the properties object, to be passed to the OpenGraph component.

To create the `absUrl` function we will need the base url like `http://localhost:3000`, we can use it directly, but it will make out life pretty hard when we move to the production environment.

So we will add this value to the `.env.local` file, create a new file `.env.local`, then add to it the APP_URL env variable.

APP_URL=http://localhost:3000
NEXT_PUBLIC_APP_URL=${APP_URL}

When we prefix an environment variable with *NEXT_PUBLIC_* next.js will expose it to be used publicity, in case we used our `absUrl` helper inside a component that runs on the client, then this will be helpful.

You can create a config file, to export an object with your configurations, like we did in the <a href="https://codersteps.com/articles/how-to-add-google-analytics-to-your-next.js-website" target="_blank">How to add Google Analytics to your Next.js website</a> article.

But it's not required for this article, to keep it simple we will use the `process.env` directly inside our helper.

export const absUrl = (path: string): string => {
  path = path.trim();
  if (path.startsWith("http")) {
    return path;
  }
  if (path.indexOf("/") === 0) {
    path = path.substring(1);
  }

  const appUrl =
    process.env.APP_URL ||
    process.env.NEXT_PUBLIC_APP_URL ||
    "http://localhost:3000";

  return `${appUrl}/${path}`;
};

The helper function is pretty straightforward, we accept a path, trim it to remove any extra spaces, then check if it's already an absolute path, by checking if it starts with `http`.

If the path is a relative path, we check to make sure it doesn't have a preceding slash, so we won't have double slashes like `http://localhost:3000//relative-path`

And finally we store out `APP_URL` into a constant and return a combination between the *appUrl* and the path.

Implementation of the useOpenGraph functionality

After we understood the purpose of our hook and added the needed helpers, its time to implement the full functionality.

import { useMemo } from "react";
import { absUrl } from "../core/helpers";
import { OGProperties } from "../components/common/OpenGraph";

type OGImage = {
  alt: string;
  type: string;
  url: string;
  width?: string;
  height?: string;
} | null;

type PageOgData = Omit<OGProperties, "image" | "card" | "site_name"> & {
  card?: OGProperties["card"];
  image: OGImage;
};

export const useOpenGraph = (data: PageOgData) => {
  const ogProperties = useMemo<OGProperties>(() => {
    return {
      url: data.url,
      title: data.title,
      type: data.type,
      author: data.author,
      site_name: "OpenGraph Article",
      description: data.description,
      image: data.image
        ? {
            type: data.image.type,
            url: absUrl(data.image.url),
            alt: data.image.alt || "",
            height: data.image.height || "720",
            width: data.image.width || "420",
          }
        : null,
      card: data.card || data.image ? "summary_large_image" : "summary",
      section: data.section,
      modified_time: data.modified_time,
      published_time: data.published_time,
    };
  }, [data]);

  return ogProperties;
};

export default useOpenGraph;

It's a simple react hook, by looking at it you can understand its purpose, and you may not see its added value now, but I think t's a good practice, this will allow you to do changes later without having to do the changes on each page it uses it.

For example, we made our `site_name` a static value, as its rarely that we do rename our website, Also we have made the `card` prop optional with a default value related to if we have an image or not.

We also use the `absUrl` to make sure that our image url is an absolute url, you can customize it to fit your use case, maybe you have to make some changes like adding prefix to your path like: `{url: absUrl(`/uploads/${upload.path}`)}`.

At this point, we should have a working open-graph setup with its own component and a helper hook. It's time to put it to use on the home page.

Open your `pages/index.tsx` file and do the following changes, then we'll explain the changes, they're not that complex.

import type { NextPage } from "next";
import Head from "next/head";
import OpenGraph from "../components/common/OpenGraph";
import { useOpenGraph } from "../hooks/useOpenGraph";
import { absUrl } from "../core/helpers";

const Home: NextPage = () => {
  const ogProperties = useOpenGraph({
    url: absUrl("/"),
    title: "OpenGraph Article", // Add you homepage title
    image: {
      // some default image preview for your website
      type: "image/jpeg",
      url: "/assets/images/ogImage.jpg",
      alt: "Image Alt",
    },
    description: "Your website description",
    type: "website",
  });

  return (
    <div>
      <Head>
        <title>OpenGraph with Next.js</title>
        <meta
          name="description"
          content="Article about OpenGraph with Next.js"
        />

        <OpenGraph properties={ogProperties} />
      </Head>

      <main>
        <h1>OpenGraph with Next.js</h1>
        <div>An empty page is a good page</div>
      </main>
    </div>
  );
};

export default Home;

First, we used the `useOpenGraph` helper hook to build the OpenGraph properties, which we'll be passed to the OG component.

After that inside the `Head` component, we add the `OpenGraph` component providing it with the properties we created using the useOpenGraph helper hook.

Finally, it's time to test, visit the home page on your browser, then _View Page Source_ and search for one of the OG meta tags that we have added like `og:title`.

In the same way, we used the OpenGraph component on the home page we will use it on the show post page, with a little different input like the `og:type` will be an _article_ instead of _website_ and we need to pass the article related data.

Open your `pages/posts/[id].tsx` file and do the following changes, then we'll explain the changes.

import Head from "next/head";
import Image from "next/image";
import { GetServerSideProps, NextPage } from "next";
import OpenGraph from "../../components/common/OpenGraph";
import useOpenGraph from "../../hooks/useOpenGraph";
import { absUrl } from "../../core/helpers";

type Post = {
  id: number;
  title: string;
  thumbnail: string;
  description: string;
  content: string;
};

interface ServerSideProps {
  post: Post;
}

const ShowPost: NextPage<ServerSideProps> = ({ post }) => {
  const ogProperties = useOpenGraph({
    url: absUrl(`/posts/${post.id}`),
    title: post.title,
    image: {
      // The post thumbnail
      type: "image/jpeg", // replace it with a dynamic thumbnail mimetype
      url: post.thumbnail,
      alt: post.title,
    },
    description: post.description,
    type: "article",
    author: "Article Author",
    section: "Article Category",
    modified_time: "Post Updated Time",
    published_time: "Post Published Time",
  });

  return (
    <>
      <Head>
        <title>{post.title}</title>

        <OpenGraph properties={ogProperties} />
      </Head>

      <main>
        <article>
          <h1>{post.title}</h1>

          <Image
            width={720}
            height={420}
            src={post.thumbnail}
            alt={post.title}
          />

          <div dangerouslySetInnerHTML={{ __html: post.content }}></div>
        </article>
      </main>
    </>
  );
};

export const getServerSideProps: GetServerSideProps<ServerSideProps> = async ({
  params,
}) => {
  if (!params || typeof params.id !== "string" || isNaN(+params.id)) {
    return { notFound: true };
  }

  const posts: Post[] = require("../../data/posts.json");

  const postId = +params.id;
  const post = posts.find((p) => p.id === postId);
  if (!post) {
    return { notFound: true };
  }

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

export default ShowPost;

The same thing here, we build the ogProperties and then added the OpenGraph component to the Head.

The only difference is that we used dynamic data, for example, the posts data structure that we use doesn't have many properties to use but, in a real-life situation, you may want to make everything dynamic like the image mime-type, update and publish dates, etc...

You can now navigate to `http://localhost:3000/posts/3` then _View Page Source_ and search for something like `article:author`.

In this article, we have added OpenGraph meta tags to a fresh Next.js website, we used two pages as examples: *home page* and *show post page*, in order to demonstrate how to add the OpenGraph tags to multiple types of pages.

Source code is available at: <a href="https://github.com/codersteps/nextjs_open_graph" rel="nofollow">https://github.com/codersteps/nextjs_open_graph</a>.

That's it for this one, I hope it was helpful, see you in the next one 😉.

You will learn exactly how to add OpenGraph to your Next.js website by using a reusable component and a helper hook and how to reuse it on multiple pages.

In this article, we will add OpenGraph to a new Next.js website, so it's easy to grab the knowledge that will enable you to add it to your website and adapt it to your or your client's situation.


We will start as usual by creating a new Next.js project, I like to use typescript on all of my projects. To create a new project I will use this command <code>npx create-next-app@latest --typescript open_graph</code>.


After it's done go and open the project inside your favorite code editor mine is vscode, then start the dev server with <code>npm run dev</code> and check it inside the browser you should see the default Next.js home page.


Before getting started with creating a component to add the open graph meta tags let's first learn a little bit about OpenGraph and its properties which we'll be adding to our Next.js website.


OpenGraph is used to make web pages rich when shared on social media, it enables you to control how it looks. Like page title, preview image, url, and so on.


When a page doesn't include the OpenGraph protocol and it's shared for example on Facebook, Facebook will try to pick some default values like the first image on that page, the page description, etc.


To be able to control the preview displayed information when our web page is shared on social, we use meta tags to set those values.


Because this article is about the <strong>implementation of Open Graph with Next.js?</strong> you can read more here: <a href="https://ahrefs.com/blog/open-graph-meta-tags/" rel="noopener noreferrer" target="_blank">Open Graph Meta Tags: Everything You Need to Know</a>.


At the end of this article, you will have an OpenGraph component and a useOpenGraph hook that can be reused on multiple pages, or extended by extra meta tags.


To make it easy for you to understand how to reuse it in multiple situations I like to work with a scenario for the rest of the article.


We will have two pages, one is a dynamic posts detail page at <code>/posts/{id}</code>, and another is the home page at <code>/</code>.


For our dynamic page, we will use a simple JSON file with 3 posts in it, then we will use <code>getServerSideProps</code> to read that file.


It won't be complicated we will simply import the JSON file, search for the right post, then show the page with that post's content.


But our mean focus won't be on this part, as you may already have a similar setup, but it will help us understand better the OpenGraph component and its helper hook on how it can be used in multiple types of Next.js pages.


As mentioned before, let's start by creating a new file at <code>data/posts.json</code> with 3 simple posts, remember this step is only to have something to work with.


A post will have an <code>id, title, thumbnail, description</code>, and a content property, these are commonly used fields, and we will use them to set the appropriate Open Graph meta tags.


Don't forget to add a placeholder image at <code>public/images/og-posts-image.jpg</code> as we used it inside out posts data.


Now that we have the posts data we'll need inside the show post page, let's create another new file at <code>pages/posts/[id].tsx</code> with a default Next.js page component.


This is also a common situation, you have some kind of data source, then you use it to retrieve the post data if it was found and 404 otherwise.


First, we declared a <code>Post</code> type, <code>ServerSideProps</code> that uses the Post type and passed a generic type value to both <code>NextPage</code>, and <code>GetServerSideProps</code> types.


Doing that will help our <code>ShowPost</code> component, and <code>getServerSideProps</code> function understands each other, so both returned props and received ones are aligned.


Inside the <code>ShowPost</code> component we accept a <code>post</code> prop and use it to show posts data, the usual stuff.


Inside the <code>getServerSideProps</code> function we first validate the provided <code>id</code> and make sure it's a valid number.


Then we import our JSON data file using the <code>require</code> keyword inside the <code>getServerSideProps</code> to avoid any client/server ssr errors.


Then we convert the <code>postId</code> to a number by adding a plus sign at the beginning, we store it in another variable to help TypeScript understand its type.


Now that we have both a valid ID and a list of posts, we search for the requested post, if it wasn't found we return a 404 response otherwise we return the post prop to the page component.


When creating a new Next.js project, by default it comes with a home page with some content in it, that we will clean up to make it easy for us to not get lost outside our context.


We will remove any style-related stuff, classes, and the related CSS module file, go on and open the <code>pages/index.tsx</code> file, and replace it with the following.


Now that we have a better idea about Open Graph and that we did set up our Next.js project to help us achieve our goal from this article, it's time to build the actual component.


Go ahead and create a new file at <code>components/common/OpenGraph.tsx</code> as usual we always need to think about the project structure from the start, that's why we put it inside a common directory.


We will go step-by-step, we declared an <code>OGProperties</code> type and then used it to type the <code>properties</code> prop, as the first step we have a <code>locale</code> as a property.


Open Graph locale property is for telling the page locale, there's a link to all the available locales you can check to find yours.


The OpenGraph component's main purpose is to group a list of OG meta tags, then give them their values from the <code>properties</code> prop that it receives.


We made it a component in the first place because we will need it on multiple pages, and each page may have a different source of data, for example in a multi-language website we can have different locales for different pages.


In the same way, we added the <code>og:locale</code> meta tag we will add the rest of the needed <code>og:*</code> tags.


Take a minute to read the OpenGraph component content, after that let me highlight the parts that may need a little explanation.


First, we have marked the <code>locale</code> as optional and provided it with a default of <code>"en_US"</code>, then we added other simple og:tags the same way we did with the locale property.


These are simple open graph tags types: <em>og:locale</em>, <em>og:title</em>, <em>og:type</em>, <em>og:description</em>, <em>og:url</em>, <em>og:site_name</em>, <em>og:image</em>. because the image is optional, we check for it, before adding the <em>og:image</em> related meta tags.


With each property, we used the same process, first adding the property the the <code>OGProperties</code> type, then extracting it using object destructuring, and finally adding it to the meta tags JSX.


When the <em>og:type</em> is equal to <strong>article</strong>, we add extra open graph meta tags related to the article: <em>article:author</em>, <em>article:section</em>, <em>article:modified_time</em>, <em>article:published_time</em>.


Whenever we add a new og meta tag, we extend the <em>OGProperties</em> type to include the new property that was added.


And at the end, we added Twitter-related open graph meta tags, which use the HTML meta tag with a <code>name</code> attribute instead of the <code>property</code> attribute.


Some value you can keep static like your domain name, twitter site (your website twitter account), or your own twitter account (creator).


You can always read more about this property from the mentioned blog post above, and you can always use your new knowledge to extend this component, but these are the most used open graph meta tags.


We could have used the component without the need of creating a hook for that, but it will be a little missy as our OpenGraph component take one little big object, which can make it a little hard to be reused in multiple places while maintaining the ease of making changes later on.


So to simplify our life and make the component easy to use in multiple places, we will create a helper hook, that will play the role of building the OpenGraph properties prop 😁.


Let's create a new file for our hook at <code>hooks/useOpenGraph.ts</code> then declare, and export the hook function.


This is the basic structure of the <code>useOpenGraph</code> hook, we use the react <code>useMemo</code> hook to store the OpenGraph component properties.


The hook accepts a data prop of type <code>PageOgData</code> which is similar to the <code>OGProperties</code> type with some small differences like making some properties that can have default values optional.


The <code>useOpenGraph</code> takes some data, then use it to build and manage the OpenGraph component properties, and finally returns the properties object, to be passed to the OpenGraph component.


To create the <code>absUrl</code> function we will need the base url like <code>http://localhost:3000</code>, we can use it directly, but it will make out life pretty hard when we move to the production environment.


So we will add this value to the <code>.env.local</code> file, create a new file <code>.env.local</code>, then add to it the APP_URL env variable.


When we prefix an environment variable with <em>NEXT_PUBLIC_</em> next.js will expose it to be used publicity, in case we used our <code>absUrl</code> helper inside a component that runs on the client, then this will be helpful.


You can create a config file, to export an object with your configurations, like we did in the <a href="https://codersteps.com/articles/how-to-add-google-analytics-to-your-next.js-website" target="_blank">How to add Google Analytics to your Next.js website</a> article.


But it's not required for this article, to keep it simple we will use the <code>process.env</code> directly inside our helper.


The helper function is pretty straightforward, we accept a path, trim it to remove any extra spaces, then check if it's already an absolute path, by checking if it starts with <code>http</code>.


If the path is a relative path, we check to make sure it doesn't have a preceding slash, so we won't have double slashes like <code>http://localhost:3000//relative-path</code>


And finally we store out <code>APP_URL</code> into a constant and return a combination between the <em>appUrl</em> and the path.


After we understood the purpose of our hook and added the needed helpers, its time to implement the full functionality.


It's a simple react hook, by looking at it you can understand its purpose, and you may not see its added value now, but I think t's a good practice, this will allow you to do changes later without having to do the changes on each page it uses it.


For example, we made our <code>site_name</code> a static value, as its rarely that we do rename our website, Also we have made the <code>card</code> prop optional with a default value related to if we have an image or not.


We also use the <code>absUrl</code> to make sure that our image url is an absolute url, you can customize it to fit your use case, maybe you have to make some changes like adding prefix to your path like: <code>{url: absUrl(</code>/uploads/${upload.path}<code>)}</code>.


At this point, we should have a working open-graph setup with its own component and a helper hook. It's time to put it to use on the home page.


Open your <code>pages/index.tsx</code> file and do the following changes, then we'll explain the changes, they're not that complex.


First, we used the <code>useOpenGraph</code> helper hook to build the OpenGraph properties, which we'll be passed to the OG component.


After that inside the <code>Head</code> component, we add the <code>OpenGraph</code> component providing it with the properties we created using the useOpenGraph helper hook.


Finally, it's time to test, visit the home page on your browser, then <em>View Page Source</em> and search for one of the OG meta tags that we have added like <code>og:title</code>.


In the same way, we used the OpenGraph component on the home page we will use it on the show post page, with a little different input like the <code>og:type</code> will be an <em>article</em> instead of <em>website</em> and we need to pass the article related data.


Open your <code>pages/posts/[id].tsx</code> file and do the following changes, then we'll explain the changes.


The same thing here, we build the ogProperties and then added the OpenGraph component to the Head.


The only difference is that we used dynamic data, for example, the posts data structure that we use doesn't have many properties to use but, in a real-life situation, you may want to make everything dynamic like the image mime-type, update and publish dates, etc...


You can now navigate to <code>http://localhost:3000/posts/3</code> then <em>View Page Source</em> and search for something like <code>article:author</code>.


In this article, we have added OpenGraph meta tags to a fresh Next.js website, we used two pages as examples: <em>home page</em> and <em>show post page</em>, in order to demonstrate how to add the OpenGraph tags to multiple types of pages.


Source code is available at: <a href="https://github.com/codersteps/nextjs_open_graph" rel="nofollow">https://github.com/codersteps/nextjs_open_graph</a>.


That's it for this one, I hope it was helpful, see you in the next one 😉.


How to add OpenGraph to your Next.js website

While I was about to add a sitemap to Codersteps which is built completely using Next.js I thought why not document the process maybe someone else will find it helpful.

The goal of this article is to build a sitemap that reflects the current website structure, which means we will read articles from the database and use their links to generate an updated sitemap.

To make it easier I will work on a scenario of a simple blog with posts at `/post/{slug}` and static pages `/`, `/about`, and `/contact`.

I will suppose you already have a working project that uses a database or some other kind of storage to store a list of posts with the following description using Prisma schema.

model Post {
  id          Int       @id @default(autoincrement())
  title       String
  slug        String    @unique
  content     String?
  publishedAt DateTime?
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
}

The same idea applies if you're using some other type of ORM or using front-matter with markdown. the important thing here is the structure of the data.

I will keep using Prisma for demonstration cause it's simpler and you will be able to understand the idea even if you've never used it before.

Let's create a new file at `pages/sitemap.xml.tsx` then we will export a function that will return `undefined`.

export default function Sitemap() {
  return undefined
}

By default, Next.js will return an HTML response with `Content-Type: text/html; charset=utf-8` header and as we now sitemaps are XML files.

So we won't let Next.js render the sitemap page as it would with other pages, and we will use the `getServerSideProps` function to hook in and return an XML instead.

So let's go easy on it and add the setup for _getServerSideProps_.

import { GetServerSideProps } from "next";

export default function Sitemap() {
  return undefined;
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { req, res } = context;

  res.writeHead(200, { "Content-Type": "application/xml" });
  res.end(`<?xml version="1.0" encoding="UTF-8"?>
    <app>Hello World!</app>
  `);

  return {
    props: {},
  };
};

Now Next.js will return an XML response because we set the `Content-Type` to XML instead of HTML, and then we sent back the response with a `Hello World!` XML file. 

The `res.end` will stop the request lifecycle and send back the response with the XML content and the status code we've set.

First, let's install it using `npm install sitemap`, because it's built with Typescript we won't need to install any extra types 😉.

The sitemap.js package makes generating an XML sitemap from a Javascript object a breeze 😬. to learn more about its features you can always go to the <a href="https://github.com/ekalinin/sitemap.js" rel="nofollow">sitemap.js docs</a>.

The sitemap.js provides a `SitemapStream` class that takes an object of options. we will provide it with the _hostname_ and it will give us back a stream object.

A stream is used to asynchronously read and write data, thus a stream can be readable, writeable, or both.

We also have the `streamToPromise` function which takes a readable stream of the sitemap metadata (items object) and returns an XML sitemap string.

Let's write the code to generate a sitemap XML for our three static pages, then explain what it's doing a little more.

import { Readable } from "stream";
import { GetServerSideProps } from "next";
import { SitemapStream, streamToPromise, EnumChangefreq } from "sitemap";

export default function Sitemap() {
  return undefined;
}

export type SitemapItemBase = {
  url: string;
  priority?: number;
  changefreq?: EnumChangefreq;
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { req, res } = context;

  const pages: SitemapItemBase[] = [
    {
      url: "/",
      changefreq: EnumChangefreq.DAILY,
      priority: 0.8,
    },
    {
      url: "/about",
      changefreq: EnumChangefreq.YEARLY,
      priority: 0.4,
    },
    {
      url: "/contact",
      changefreq: EnumChangefreq.YEARLY,
      priority: 0.4,
    },
  ];

  const items: SitemapItemBase[] = [...pages];

  const sitemapStream = new SitemapStream({
    hostname: `https://${req.headers.host}`,
  });
  const xmlString = await streamToPromise(
    Readable.from(items).pipe(sitemapStream)
  ).then((data) => data.toString());
  res.writeHead(200, { "Content-Type": "application/xml" });
  res.end(xmlString);

  return {
    props: {},
  };
};

First, we created the `SitemapItemBase` type and we used it to type the pages array that contains our static pages metadata: `url`, `changefreq`, and the `priority`.

Then using the spread operator we added the `pages` array items to the items array, we did this because we still need to add the dynamic `posts` metadata later on.

As we explained before we create a sitemapStream giving it the hostname, this will be used to make the relative links to absolute links.

Using the `Readable` class from the nodejs stream package we create a readable stream from the `items` array and then pipe it to the `sitemapStream`.

That will return a readable stream that will be passed to the `streamToPromise` which itself will return a promise that resolves to the XML sitemap that we use to send to the client.

It's a lot I know, but if you look at the code it's straight forward and if you're familiar with the streaming concept you'll be just fine.

Now when we visit the <a href="http://localhost:3000/sitemap.xml" rel="nofollow" target="_blank">http://localhost:3000/sitemap.xml</a> page we should see the sitemap that was generated for the static pages.

After understanding the concept behind generating a sitemap with Next.js and sitemap.js it's now easy to scale it we just have to add more items to the `items` array.

it doesn't matter where that data is coming from as long as it has these three properties `url`, `changefreq`, and `priority`.

Using Prisma.js connection I will fetch the posts from the database and map them to be compatible with the `SitemapItemBase` type.

import db from "@/lib/database";

const pages: SitemapItemBase[] = [
  // same items
];

const posts: SitemapItemBase[] = (
  await db.post.findMany({
    where: { publishedAt: { not: null } },
    select: { slug: true },
  })
).map((post) => ({
  url: `/posts/${post.slug}`,
  changefreq: EnumChangefreq.WEEKLY,
  priority: 0.5,
}));

const items: SitemapItemBase[] = [...pages, ...posts];

// Keep the rest the same

We will add a dynamically generated sitemap with Next.js and Sitemap.js to help search engines crawl and better understanding our website structure.

Codersteps
Is For Ambitious Learners

Learn it by doing it for Free with Practical step by step Series and Articles.

Featured Articles

How to add OpenGraph to your Next.js website

Codersteps

Next.js

How to add a sitemap to your Next.js website

Codersteps

Next.js

How to add Google Analytics to your Next.js website

Codersteps

Next.js

Looking for something in particular?

Recent Articles

Next.js file upload progress bar using Axios

Codersteps

Next.js

Let's build a file uploader with Next.js and formidable

Codersteps

Next.js

How I Integrated a Simple CI/CD for Next.js website on a VPS

Codersteps

Next.js