how to add google search console tag in nextjs app router project

How to Integrate Google Search Console Tag in a Next.js App Router Project

In a Next.js project, we can add metadata to individual pages separately. We also have the facility to add meta tags globally in the layout file. Since the Google Search Console tag needs to be present on all pages, we need to add the tag in the layout file.

Here is the default layout.tsx file when a new Next.js app is generated:

layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "AppName",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

We need to add the Google Search Console meta tag content in the metadata object. The type of metadata is Metadata. The Metadata interface has many members:

Metadata interface

interface Metadata extends DeprecatedMetadataFields {
    metadataBase?: null | URL;
    title?: null | string | TemplateString;
    description?: null | string;
    applicationName?: null | string;
    authors?: null | Author | Array<Author>;
    generator?: null | string;
    keywords?: null | string | Array<string>;
    referrer?: null | ReferrerEnum;
    themeColor?: null | string | ThemeColorDescriptor | ThemeColorDescriptor[];
    colorScheme?: null | ColorSchemeEnum;
    viewport?: null | string | ViewportLayout;
    creator?: null | string;
    publisher?: null | string;
    robots?: null | string | Robots;
    alternates?: null | AlternateURLs;
    icons?: null | IconURL | Array<Icon> | Icons;
    manifest?: null | string | URL;
    openGraph?: null | OpenGraph;
    twitter?: null | Twitter;
    verification?: Verification;
    appleWebApp?: null | boolean | AppleWebApp;
    formatDetection?: null | FormatDetection;
    itunes?: null | ItunesApp;
    abstract?: null | string;
    appLinks?: null | AppLinks;
    archives?: null | string | Array<string>;
    assets?: null | string | Array<string>;
    bookmarks?: null | string | Array<string>;
    category?: null | string;
    classification?: null | string;
    other?: {
        [name: string]: string | number | Array<string | number>;
    } & DeprecatedMetadataFields;
}

One of these properties is verification, which is used for common verification tokens. The verification type is Verification, and in the Verification type, there are some predefined properties like google, yahoo, yandex, other, etc.

Verification Type

export type Verification = {
    google?: null | string | number | (string | number)[];
    yahoo?: null | string | number | (string | number)[];
    yandex?: null | string | number | (string | number)[];
    me?: null | string | number | (string | number)[];
    other?: {
        [name: string]: string | number | (string | number)[];
    };
};

As the Google Search Console meta tag is like:

Google Search Console MetaTag Example

<meta name="google-site-verification" content="VERIFICATION_CODE">

and the name google-site-verification is not present in the Verification type, we need to use the other property of the verification property.

Now, let's update the metadata as shown below:

layout.tsx

export const metadata: Metadata = {
  title: "AppName",
  description: "Generated by create next app",
  verification: {
    other: {
      "google-site-verification": "VERIFICATION_CODE",
    },
  },
};

This will add a new meta tag in the head tag like below:

Google Search Console MetaTag Example

<meta name="google-site-verification" content="VERIFICATION_CODE">

So, to add a Google Search Console meta tag in a Next.js App Router project, you just need to add the verification property in the metadata object. Inside the verification property, add the other property, and there you need to add the google-site-verification and the value VERIFICATION_CODE.