How to generate SEO meta tags (Open Graph and Twitter cards)

You share your new blog post in the team Slack, and the preview shows no image, a title cut off halfway and a description pulled from the cookie banner. That's what happens when a page has no meta tags. The fix takes ten minutes, and this guide walks through it.

What are meta tags?

Meta tags are HTML elements in a page’s <head> that describe the page to search engines, social networks and browsers. Visitors don't see them on the page, but they decide how the page shows up in search results, social shares and chat app link previews.

Search engines read your page content directly, so meta tags are less about ranking than about presentation. Think of them as the shop window: a clear title and description make people more likely to click.

Essential meta tags for SEO

Title tag

The title is the clickable headline in search results and the text in the browser tab. Google cuts long titles by pixel width, which usually works out to around 50 to 60 characters.

<title>How to Generate Meta Tags for SEO | PulpMiner</title>

• Aim for 50 to 60 characters so the title is not truncated.
• Put the main keyword near the start.
• Put the brand at the end, after a separator such as |.
• Give every page its own title.
• Write it for people, not robots. It has to earn the click.

Meta description

The description is the summary under the title in search results. Google shows roughly 150 to 160 characters on desktop and fewer on mobile. It isn't a ranking factor, but it affects how many people click. Google may also swap it for text from your page if it doesn't match what someone searched for.

<meta name="description" content="Learn how to write meta tags for SEO, including title tags, meta descriptions, Open Graph and Twitter cards." />

• Keep it between about 120 and 155 characters so the key point survives on mobile.
• Say what the reader will get by clicking.
• Include the target keyword naturally. Google bolds words that match the search.
• Write a unique description for each page.

Robots meta tag

The robots meta tag tells search engines whether to show a page in results (index it) and whether to follow its links. It works per page, while robots.txt controls crawling for whole paths. One gotcha: a page blocked in robots.txt is never fetched, so its robots meta tag is never seen.

<!-- Index the page and follow links (the default) -->
<meta name="robots" content="index, follow" />

<!-- Keep the page out of results but follow its links -->
<meta name="robots" content="noindex, follow" />

<!-- Keep the page out of results and ignore its links -->
<meta name="robots" content="noindex, nofollow" />

<!-- Index the page and allow large image previews -->
<meta name="robots" content="index, follow, max-image-preview:large" />

Canonical tag

The same page often lives at several URLs. The canonical tag says which one is the real one. Search engines then combine signals, such as links from other sites, into that URL and show it in results.

<link rel="canonical" href="https://www.example.com/page" />

Typical cases are URLs with and without a trailing slash, URLs with sorting or filter parameters, HTTP and HTTPS versions, and www and non-www hosts. Duplicate content doesn't get you penalized, but without a canonical tag the search engine picks the URL for you, and it may not pick the one you'd like.

Open Graph

Open Graph is a protocol created by Facebook that controls how a link looks when it's shared. Facebook, LinkedIn, Discord, Slack and most messaging apps read these tags to build the preview card with an image, title and description. This is the fix for that sad Slack preview.

<meta property="og:title" content="How to Generate Meta Tags" />
<meta property="og:description" content="A guide to SEO meta tags." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.example.com/blog/meta-tags" />
<meta property="og:image" content="https://www.example.com/images/meta-tags-og.png" />
<meta property="og:site_name" content="Example Site" />

The protocol requires four properties: og:title, og:type, og:image and og:url. The most common og:type values are website for home and landing pages and article for posts.

Use an og:image of at least 1200 by 630 pixels so it looks sharp on large cards. Images smaller than 600 by 315 pixels may only show as a small thumbnail. Always give the image an absolute URL.

Twitter cards

Twitter cards are the X (formerly Twitter) version of Open Graph. Yes, they're still called Twitter cards. There are four types:

• summary: a small card with a square thumbnail, title and description.
• summary_large_image: a card with a wide image above the title and description, a good default for articles.
• app: a card that links to a mobile app download.
• player: a card that plays video or audio inline.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How to Generate Meta Tags" />
<meta name="twitter:description" content="A guide to SEO meta tags." />
<meta name="twitter:image" content="https://www.example.com/images/meta-tags-twitter.png" />
<meta name="twitter:site" content="@yourhandle" />

When the twitter: title, description or image are missing, X falls back to the matching Open Graph tags. Many sites only add twitter:card and twitter:site and let Open Graph supply the rest.

Improving how pages look in Google

Google builds each result from the title tag, the meta description and the page content. A few other things change how it looks:

• Structured data. schema.org markup in JSON-LD can make a page eligible for rich results such as review stars, recipe cards and event details.
• Snippet length. max-snippet:-1 in the robots meta tag lets Google show a snippet of any length, and a value such as max-snippet:160 sets a limit.
• Breadcrumbs. Breadcrumb structured data shows a readable path in the result instead of a raw URL.
• Favicon. Google shows the site’s favicon next to results. Provide a square icon of at least 48 by 48 pixels that is still recognisable when small.

Schema.org basics

Schema.org is a shared vocabulary that lets you tell search engines exactly what a page is: an article, a product, a recipe. The usual way to add it is JSON-LD, a block of JSON inside a <script type="application/ld+json"> tag:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to Generate Meta Tags",
  "description": "A guide to SEO meta tags.",
  "author": {
    "@type": "Organization",
    "name": "YourBrand"
  },
  "datePublished": "2026-02-10"
}
</script>

Common types include Article, Product, FAQPage, Organization and BreadcrumbList. Check your markup with Google’s Rich Results Test. To write it without typing JSON by hand, use the JSON-LD generator.

A complete meta tag template

Here's everything above in one place. Copy it, swap in your own values and you're most of the way there:

<head>
  <!-- Primary SEO -->
  <title>Page Title | Brand Name</title>
  <meta name="description" content="Page description under 155 characters." />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://www.example.com/page" />

  <!-- Open Graph -->
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://www.example.com/page" />
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Page description." />
  <meta property="og:image" content="https://www.example.com/og-image.png" />
  <meta property="og:site_name" content="Brand Name" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Page Title" />
  <meta name="twitter:description" content="Page description." />
  <meta name="twitter:image" content="https://www.example.com/twitter-image.png" />
</head>

Common mistakes

• The same title on many pages. Search engines can't tell which page fits a query, and people can't tell the results apart.
• Generic descriptions. “Welcome to our website” tells nobody anything. Say what the page actually offers.
• Relative URLs in Open Graph tags. Use absolute URLs, including https://, for og:url and og:image, or previews break.
• Keyword stuffing. A title like “SEO Meta Tags | Meta Tags Generator | Best Meta Tags Tool” looks spammy and goes against Google’s spam policies.
• Relying on the keywords tag. Google has ignored <meta name="keywords"> for ranking for over a decade, so don't spend time on it.

Using the meta tags generator

Writing all this by hand for every page gets old fast, and one typo in a property name quietly breaks a preview. In the meta tags generator you fill in a form and the HTML updates as you type:

• Basic SEO: page title and meta description with character counters (60 and 160), keywords, canonical URL, author, the robots directive (index or noindex, follow or nofollow), charset and viewport.
• Open Graph: og:title, og:description, og:image, og:type (website, article or product) and og:url.
• Twitter card: summary or summary_large_image, plus title, description and image.

A Google search preview shows how the title, description and URL may look in results. Empty fields are left out of the output, and Copy puts the finished tags on your clipboard. Add anything the form doesn't cover, such as og:site_name or twitter:site, by hand.