logo
Login to your account
Course

The Ultimate Next.js 15 Course

Alright, so you’ve learned how to add metadata using config-based or file-based methods in Next.js. But there’s more to metadata than just title and description 😉

Let’s go a bit deeper and explore what else you can define in the metadata object—and more importantly, why it matters when it comes to making your website more SEO-fied.

So far, you’ve probably defined metadata on a page, if not all, like this:

export const metadata = {
  title: "Dev Overflow",
  description: "A community for asking and answering programming questions.",
};

(Ignore the actual text—your content will obviously vary. Just focus on the structure.)

The title shows up in the browser tab and also appears as the clickable link in search engine results. The description appears just below it and helps users decide whether they want to click. Fair enough?

But there's a lot more you can do, beginning with…

Icons

You also saw how dropping a favicon.ico into the app directory sets your site’s browser icon. But you can take it a step further and define multiple icon types directly in the metadata config like so,

export const metadata = {
  title: "Dev Overflow",
  description: "A community for asking and answering programming questions.",
  icons: {
    icon: "/icons/favicon.svg", // default favicon for browsers
    shortcut: "/icons/favicon-shortcut.png", // sometimes used for pinned tabs or bookmarks
    apple: "/icons/apple-icon.png", // required by iOS when users add your site to their home screen
  },
};

This gets compiled into:

<link rel="icon" href="/icons/favicon.svg" />
<link rel="shortcut icon" href="/icons/favicon-shortcut.png" />
<link rel="apple-touch-icon" href="/icons/apple-icon.png" />

Neat, right? Just keep in mind—Next.js recommends using the file-based metadata API for icons when possible.” You can explore more options for icons in the docs.

There are also some common basic fields that you should use,

Common Basic Fields

These are small, easy to add—but they tell the browser and search engines a lot about your site.

export const metadata = {
  generator: 'Next.js',
  applicationName: 'Dev Overflow',
  referrer: 'origin-when-cross-origin',
  keywords: ['JavaScript', 'React', 'Next.js', 'web development', 'Dev Overflow'],
  authors: [
    { name: 'Adrian' },
    { name: 'Dev Team', url: 'https://devoverflow.dev/about' },
  ],
  creator: 'Adrian',
  publisher: 'Dev Overflow',
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
}

That’s quite a list, and some of these fields might not make sense right away. No worries—let’s break them down one by one:

  • generator

    This tells search engines and tools what built your site. While it doesn’t directly affect SEO rankings, it’s helpful for analytics and debugging tools to understand the tech stack behind the site.

  • applicationName

    Used in some browser UIs and when the site is saved to a home screen. It helps define what your app is called in places like Progressive Web Apps (PWAs) and mobile browsers.

  • referrer

    This controls how much referrer info (i.e., where the user came from) is passed during navigation.

    With origin-when-cross-origin, full referrer info is sent for same-origin, and just the domain is sent for external links — good privacy + analytics balance.

  • keywords

    A list of keywords describing the page content. While search engines don’t prioritize this field heavily anymore, it's still useful for internal site searches or other metadata-driven tools.

  • authors

    Tells the world who created the content. Good for multi-author sites, portfolios, and blogs

  • creator

    A single source of truth for the content creator, especially for platforms like eBooks, news articles, and blogs.

  • publisher

    Identifies the organization or individual responsible for publishing the content

  • formatDetection

    This prevents browsers (especially on mobile) from automatically linking email addresses, phone numbers, or addresses in your content.

These fields might not seem exciting and are often specific to certain websites, like blogs or portfolios. However, they quietly play a crucial role in making your site more machine-readable while supporting SEO and branding efforts.

Now, let’s move beyond the basics and learn how to make your website more shareable.

OpenGraph

Ever noticed how some links on Facebook or LinkedIn show a nice title, image, and description? That’s Open Graph in action—it helps your pages show up with rich previews and makes your site much more shareable.

export const metadata = {
  title: "Dev Overflow",
  description: "A community for asking and answering programming questions.",
  icons: {
    icon: "/icons/favicon.svg",
    shortcut: "/icons/favicon-shortcut.png",
    apple: "/icons/apple-icon.png",
  },
  keywords: ["programming", "web development", "Q&A", "developers", "tech help"],
  authors: [
    { name: "Adrian", url: "https://adriandev.io" },
    { name: "Dev Team" },
  ],
  openGraph: {
    title: "Dev Overflow | Ask & Answer Programming Questions",
    description: "Explore coding topics with help from the global dev community.",
    url: "https://devoverflow.dev",
    siteName: "Dev Overflow",
    images: [
      {
        url: "/images/og-banner.png",
        width: 1200,
        height: 630,
        alt: "Dev Overflow OG Banner",
      },
    ],
    locale: "en_US",
    type: "website",
  },
};

Pretty simple so far—title, description, URL, image (ideally 1200x630px for best results), language, and type.

All good. But what if you want your link preview to be tailored specifically for a platform like Twitter (yeah, calling it X still feels weird, right?)?

In that case, you’ll need to follow Twitter’s (still, no X 😂) own format, which looks like this:

export const metadata = {
  title: "Dev Overflow",
  description: "A community for asking and answering programming questions.",
  icons: {
    icon: "/icons/favicon.svg",
    shortcut: "/icons/favicon-shortcut.png",
    apple: "/icons/apple-icon.png",
  },
  keywords: ["programming", "web development", "Q&A", "developers", "tech help"],
  authors: [
    { name: "Adrian", url: "https://adriandev.io" },
    { name: "Dev Team" },
  ],
  openGraph: {
    title: "Dev Overflow | Ask & Answer Programming Questions",
    description: "Explore coding topics with help from the global dev community.",
    url: "https://devoverflow.dev",
    siteName: "Dev Overflow",
    images: [
      {
        url: "/images/og-banner.png",
        width: 1200,
        height: 630,
        alt: "Dev Overflow OG Banner",
      },
    ],
    locale: "en_US",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Dev Overflow on Twitter",
    description: "Get dev answers fast. Join the community.",
    images: ["/images/twitter-banner.png"],
    creator: "@adriandev",
  }
};

You can find more details on how to configure platform-specific shareable links—like for Facebook, Pinterest, and others—right here.

Nice—at this point, your page should look pretty slick when shared across platforms. But what if there are some pages you don’t want search engines to index? After all, not everything on your site needs to be public, right?

Robots

That’s where the robots field comes in handy. It helps you control which pages should be hidden from search engines.

robots: {
  index: true, // tells bot can include this page in search results
  follow: true, // bots should follow the links on this page and crawl them too
  nocache: true, // tels bots not to store a cached version of the page
  googleBot: {
    index: true, 
    follow: true,
    noimageindex: false, // tells bot not to index any images on the page
  },
}

It’s essentially your way of telling Google, “Here’s what you’re allowed to do with this page.” If you're working on pages with sensitive information or internal tools, using the robots field ensures they never accidentally end up in search results.

With everything configured properly, your complete metadata setup might end up looking something like this:

export const metadata = {
  title: "Dev Overflow",
  description:
    "Dev Overflow is a community-driven platform to ask and answer real-world programming questions. Learn, grow, and connect with developers around the world.",
  
  generator: "Next.js",
  applicationName: "Dev Overflow",
  referrer: "origin-when-cross-origin",

  keywords: [
    "Dev Overflow",
    "programming questions",
    "developer Q&A",
    "web development",
    "JavaScript",
    "React",
    "Node.js",
    "algorithms",
    "data structures",
    "developer community",
  ],

  authors: [
    { name: "Adrian" },
    { name: "Dev Overflow Team", url: "https://devoverflow.dev/team" },
  ],
  creator: "Adrian",
  publisher: "Dev Overflow",

  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },

  robots: {
    index: true,
    follow: true,
    nocache: false,
    googleBot: {
      index: true,
      follow: true,
      noimageindex: false,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },

  icons: {
    icon: "/images/site-logo.svg", // regular favicon
    shortcut: "/favicon.ico", // browser address bar icon
    apple: "/apple-touch-icon.png", // Apple devices
    other: [
      {
        rel: "mask-icon",
        url: "/safari-pinned-tab.svg",
        color: "#5bbad5",
      },
    ],
  },

  // Optional: Theme color for browser UI and mobile experience
  themeColor: "#18181b",

  // Optional: Color for Microsoft tiles and pinned sites
  msapplication: {
    TileColor: "#ffffff",
    TileImage: "/mstile-150x150.png",
  },
};

ou won’t need all these fields on every page of your website—and let’s be honest, you wouldn’t want to fill your main files with this much stuff anyway, right?

By now, you already know how to keep things clean and reusable. So just move the common parts into a separate constants file and pull them in wherever needed… Ahh, I should stop giving away answers 😅

That’s it. You’ve now got everything you need to make your site way more SEO-friendly .

0 Comments

"Please login to view comments"

glass-bbok

Join the Conversation!

Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.

Upgrade your account
tick-guideNext Lesson

Optimization Strategies