Skip to content

b. SEO Page Router Meta Tags

Jump to bottom
John Mark edited this page Jan 16, 2024 · 1 revision

Next.Js Meta Tags

import Head from "next/head";
 
export default function Page() {
  return (
    <Head>
      <title>
        Website Title
      </title>
      <meta
        name="description"
        content="Lorem ipsum sample description"
      />
      <meta
        name="keywords"
        content="NextJs SEO checklist, NextJs SEO tutorial"
      />
      <meta name="robots" content="index, follow" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta charSet="utf-8" />
      <meta property="og:site_name" content="Blog | Name" />
      <meta property="og:locale" content="en_US" />
      <meta
        property="og:title"
        content="Next.js SEO: The Complete Checklist to Boost Your Site Ranking"
      />
      <meta
        property="og:description"
        content="Learn how to optimize Next.js. SEO"
      />
      <meta property="og:type" content="website" />
      <meta property="og:url" content="https://sample.com/nextjs-seo" />
      <meta
        property="og:image"
        content="https://sample.com/thumbnail.png"
      />
      <meta property="og:image:alt" content="Next.js SEO" />
      <meta property="og:image:type" content="image/png" />
      <meta property="og:image:width" content="1200" />
      <meta property="og:image:height" content="630" />
      <meta
        property="article:published_time"
        content="2024-01-11T11:35:00+07:00"
      />
      <meta
        property="article:modified_time"
        content="2024-01-11T11:35:00+07:00"
      />
      <meta
        property="article:author"
        content="https://www.linkedin.com/username"
      />
      <meta name="twitter:card" content="description of the site" />
      <meta name="twitter:site" content="@username" />
      <meta name="twitter:creator" content="@username" />
      <meta 
        name="twitter:title"
        content="Next.js SEO: The Complete Checklist to Boost Your Site Ranking"
      />
      <meta
        name="twitter:description"
        content="Learn how to optimize your Next.js website for SEO by following this complete checklist."
      />
      <meta
        name="twitter:image"
        content="https://sample.com/thumbnail.png"
      />
    </Head>
  );
}

Clone this wiki locally