ZippyStarter logo

Meta tags

To generate all necessary meta tags it's as simple as adding three properties, making it clear to potential readers what your content is about and who it's for.

As most content is dynamically generated for blog posts and pages, it's defined in mdx files, which act as the database for your website. Take for example, the page your reading from now, the meta data is defined like so:

content/docs/seo/meta-data.mdx
---
title: "Meta tags"
date: 2024-02-25
description: "To generate all necessary meta tags it's as simple as adding three properties, making it clear to potential readers what your content is about and who it's for."
---

It is then output in the HEAD of a HTML document (a web page) like so:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meta data</title>
  <meta name="description" content="To generate all necessary meta tags it's as simple as adding three properties, making it clear to potential readers what your content is about and who it's for.">
</head>

Typically with next.js app router you add meta data by using a Next.js function called generateMetadata(), and that's what happens with ZippyStarter, except you don't have to configure it — it's done for you, all you have to do fill out a few lines of text in a file with the rest of your content and all the essential meta tags for your content are output.

Opengraph meta tags

The same three properties are re-used here, with the addition of a dynamically created opengraph image that appears when you share on social media. The title of the post is output in the card as a single image.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meta data</title>
  <meta name="description" content="To generate all necessary meta tags it's as simple as adding three properties, making it clear to potential readers what your content is about and who it's for.">
  <meta property="og:title" content="Meta tags">
  <meta property="og:description" content="To generate all necessary meta tags it's as simple as adding three properties, making it clear to potential readers what your content is about and who it's for.">
  <meta property="og:url" content="https://zippystarter.com/docs/seo/meta-data">
  <meta property="og:image" content="https://zippystarter.com/og?title=Meta%20data">
  <meta content="website" property="og:type">
</head>

Twitter card meta tags

Again, the same three properties are re-used here, with the addition of a dynamically created Twitter Card image that appears when you share on social media. The title of the post is output in the card as a single image.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meta data</title>
  <meta name="description" content="To generate all necessary meta tags it's as simple as adding three properties, making it clear to potential readers what your content is about and who it's for.">
  <meta property="og:title" content="Meta tags">
  <meta property="og:description" content="To generate all necessary meta tags it's as simple as adding three properties, making it clear to potential readers what your content is about and who it's for.">
  <meta property="og:url" content="https://zippystarter.com/docs/seo/meta-data">
  <meta property="og:image" content="https://zippystarter.com/og?title=Meta%20data">
  <meta content="website" property="og:type">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Meta data">
  <meta name="twitter:description" content="To generate all necessary meta tags it's as simple as adding three properties, making it clear to potential readers what your content is about and who it's for.">
  <meta name="twitter:image" content="https://zippystarter.com/og?title=Meta%20data">
</head>