If you want your Next.js site to actually show up on Google (and look great when shared on social), this is what you should do — step by step.

🏷️ Meta Tags — Why They Matter

Meta tags give search engines and social platforms info about your page.

If you skip them, your site might look like a blank page on Google or Twitter.

👉 Always add these basic meta tags:

Tag Why it's important
title The title of your page (what people see on Google results)
description Short description (also visible in search results)
keywords Optional, not used much by Google, but harmless
robots Tells crawlers if they should index your page
viewport Controls how your site looks on mobile devices
charSet Character encoding (UTF-8 is standard)

👉 Open Graph meta tags: (for social sharing)

Tag Why it's important
og:site_name Name of your site
og:locale Language/locale
og:title Title when shared on social
og:description Description on social
og:type website or article
og:url URL of the page
og:image Image shown in preview (use PNG/JPG — no WebP!)
og:image:alt Alt text for accessibility
og:image:type Image type (image/png)
og:image:width + og:image:height Image dimensions

👉 Article-specific Open Graph tags:

(important for blog posts, articles, news)

Tag Why it's important
article:published_time When it was published
article:modified_time Last update time
article:author Author name

👉 Twitter meta tags: (for Twitter/X previews)

Tag Why it's important
twitter:card Large image summary
twitter:site Site's Twitter handle
twitter:creator Author's Twitter handle
twitter:title Title on Twitter
twitter:description Description on Twitter
twitter:image Image URL (again PNG/JPG)

⚙️ How to Add Meta Tags in Next.js

👉 In App Router, define viewport + metadata:

export const viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: "#ffffff"
};



export const metadata = {
  title: "Site Title",
  description: "Short site description",
  keywords: ["keyword1", "keyword2"],
  openGraph: {
    siteName: "My Site",
    type: "website",
    locale: "en_US",
    images: [{ url: "<https://yoursite.com/og-image.png>", width: 1200, height: 630, alt: "My Site" }]
  },
  twitter: {
    card: "summary_large_image",
    title: "Site Title",
    description: "Short site description",
    images: [{ url: "<https://yoursite.com/og-image.png>", width: 1200, height: 630, alt: "My Site" }]
  },
  robots: {
    index: true,
    follow: true,
    googleBot: "index, follow"
  },
  alternates: {
    canonical: "<https://yoursite.com>"
  }
};

👉 On dynamic pages (blog posts), use generateMetadata():