This guide outlines the integration of Open Graph meta tags in a Next.js project for optimizing SEO and social media sharing capabilities.

The process involves creating a Next.js project, organizing its structure, and utilizing built-in support for head management.

What Are Open Graph Meta Tags?

Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media.

To enhance our projects' search engine optimization (SEO) and social media sharing capabilities, we must include specific meta tags in our code files. These meta tags provide valuable information about each page to search engines and social media platforms.

You can find them in the section of a webpage. Any tags with og: before a property name is Open Graph tags.

This is how those tags look :

Step 1: Create a Next.js Project

Step 2: Install Dependencies

• Next.js comes with built-in support for head management, so you don't need to install any additional packages.

Step 3: Project Structure

• pages: This is where your main page components reside.

• components: Place reusable components here. In this example, we'll create a Layout component for managing the head section.

• public: Store your static assets, such as images and the favicon.

• styles: Contains your CSS or styling files.

• Every page must be inside one folder with the name page.js. You can see in the above image I have an about-us folder inside which I have a page.js file where my about-us code exists.

• Next.js by default takes a pathname as a folder name of your page. so you don’t need to give any route.

Step 4: Open the layout.js file

Here you can add the Title and Description of your project.

Step 4: Export the metadata for all main pages (like home.js, about.js)

• Metatags only work within the server component so all your main pages must be server components.

• Meta tags example for home page.

• Meta tags example for about-us page.

Metadata Export:

• Syntax: export const metadata = { ... };: This exports a metadata object containing information about the page. This metadata is commonly used for SEO (Search Engine Optimization) and Open Graph tags for better social media sharing.

• Metadata Properties:

  • title: The title of the page.

  • description: A brief description of the page.

  • openGraph: An object containing Open Graph metadata for social media sharing.

    • title, description, URL, siteName: Open Graph properties for social media.

    • images: An array of images with URLs, dimensions, and optional alt text.

    • locale: The locale of the content (e.g., "en_US").

    • type: The type of content (e.g., "website").

• The image must be in .png and .jpg format.

Step 5. Verify Implementation

After adding the meta tags, verify the implementation by checking the source code of individual pages using browser developer tools.

OR

You can use an online tool like **https://metatags.io/ **to check the meta tags.

Conclusion:

In wrapping up, this guide is a beginner-friendly roadmap to boost the visibility of the Next.js project. It introduces Open Graph meta tags, which are like magic words that make our websites look great when shared on social media.

By following the steps outlined in the guide, beginners can easily organize their projects and use open-graph meta tags in their projects.

This ensures that their websites not only appear higher on search engines but also look fantastic when shared on platforms like Twitter, and Linkedln.