Open Graph with Next.js v13 App directory

Next 13.4 just released announcing the stability of the App Router, With it comes tons of new features and approaches.

Good SEO is always a concern, and Next 13 has a new way of doing so rather than using the old “Head.tsx” way, on the next part we will take a look at Open Graph and how to use it to improve our website with Next 13.

What is Open Graph ?

Open Graph is an internet protocol that Facebook originally created to standardize the use of metadata within a webpage to represent the content of a page. Within it, you can provide details as simple as the title of a page or as specific as the duration of a video.
Have you ever shared a link on social media?

Telegram showing additional data using OG

You’ll want that preview to be as effective as possible.

How to write Open Graph with Next13?

Next13 uses an object called metadata to describe the page’s SEO attributes including OG attributes. (can be placed in layout.js / page.js)

import { Metadata } from 'next'; // if using TypeScript
 
export const metadata: Metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'The React Framework for the Web',
    url: 'https://nextjs.org',
    siteName: 'Next.js',
    images: [
      {
        url: 'https://nextjs.org/og.png',
        width: 800,
        height: 600,
      },
      {
        url: 'https://nextjs.org/og-alt.png',
        width: 1800,
        height: 1600,
        alt: 'My custom alt',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
};
 
export default function Page() {}

HTML output:

<meta property="og:title" content="Next.js" />
<meta property="og:description" content="The React Framework for the Web" />
<meta property="og:url" content="https://nextjs.org/" />
<meta property="og:site_name" content="Next.js" />
<meta property="og:locale" content="en_US" />
<meta property="og:image:url" content="https://nextjs.org/og.png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta property="og:image:url" content="https://nextjs.org/og-alt.png" />
<meta property="og:image:width" content="1800" />
<meta property="og:image:height" content="1600" />
<meta property="og:image:alt" content="My custom alt" />
<meta property="og:type" content="website" />

How to test Open Graph?

If your application is in production you can easily test it by sending the link to a social like Telegram and check the result.
But if you are in a developing state, I suggest using an extension called
“OGraph Previewer”.

simply click on the extension button on the page to see the result.