Quick Fix: To use Open Graph meta tags with Next.js 13, add an openGraph property to the metadata object. Within the openGraph property, specify the title and description for your page.
For example:
export const metadata = {
openGraph: {
title: 'this is open graph title for testing',
description: 'Some description',
}
};
If you need to dynamically generate Open Graph data, use the export async function generateMetadata(...) function instead.
The Problem:
Next.js 13 has introduced a new method for handling meta tags. However, it is unclear how to utilize Open Graph metadata using this new approach. The traditional method of writing HTML meta tags within Next Head is no longer applicable. How can Open Graph metadata be implemented in the new metadata object structure introduced in Next.js 13?
The Solutions:
Solution 1: Using the “openGraph” Object in `metadata`
To utilize OpenGraph metadata in Next.js 13, use the dedicated openGraph object within the metadata object:
export const metadata = {
openGraph: {
title: 'this is open graph title for testing',
description: 'Some description',
}
};
This approach provides a structured way to specify OpenGraph metadata, ensuring it’s properly recognized by social media platforms and search engines.
Video Explanation:
The following video, titled "React SEO with Next.js - Dynamic SEO Meta Tags Tutorial - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.
... React app for search engines by using Next.js. We ... SEO with Next.js 13 - Dynamic Sitemaps, OG Images and Metadata API.
