logo
← All Posts

How to Generate SEO Meta Tags (Open Graph & Twitter Cards)

Published on February 10, 2026

What Are Meta Tags?

Meta tags are HTML elements placed in the <head> section of a webpage that provide metadata about the page to search engines, social media platforms, and browsers. They do not appear visibly on the page itself but play a critical role in how your content is discovered, indexed, and displayed in search results and social media previews.

While search engines have evolved to understand page content directly, meta tags remain essential for controlling how your pages appear in search result snippets, social media shares, and messaging app previews. Well-crafted meta tags increase click-through rates and drive more traffic to your site.

Essential Meta Tags for SEO

Title Tag

The title tag is the single most important on-page SEO element. It appears as the clickable headline in search engine results and in the browser tab. Google typically displays the first 50 to 60 characters of a title tag, truncating anything longer with an ellipsis.

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

Best practices for title tags:

  • Keep the length between 50 and 60 characters. Titles shorter than 50 characters may miss keyword opportunities; titles longer than 60 characters risk truncation.
  • Place your primary keyword near the beginning of the title. Search engines give more weight to words that appear early.
  • Include your brand name at the end, separated by a dash or pipe character (e.g., "Guide to Meta Tags — YourBrand").
  • Make each title unique across your site. Duplicate titles confuse search engines and reduce click-through rates.
  • Write for humans first. The title must be compelling enough to earn the click.

Meta Description

The meta description provides a brief summary of the page that appears below the title in search results. Google typically displays up to 155 to 160 characters. While meta descriptions are not a direct ranking factor, they heavily influence click-through rates, which indirectly affects your SEO performance.

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

Best practices for meta descriptions:

  • Keep the length between 120 and 155 characters. Mobile search results show fewer characters than desktop.
  • Include a clear call to action or value proposition. Tell users what they will learn or gain by clicking.
  • Naturally include your target keyword. Google bolds matching search terms in the description, making your result more eye-catching.
  • Make each description unique. Duplicate descriptions are a wasted opportunity.

Robots Meta Tag

The robots meta tag controls how search engines index and follow links on a specific page, giving you finer control than robots.txt:

<!-- Allow indexing and link following (default) -->
<meta name="robots" content="index, follow" />

<!-- Prevent indexing but follow links -->
<meta name="robots" content="noindex, follow" />

<!-- Prevent indexing and don't follow links -->
<meta name="robots" content="noindex, nofollow" />

<!-- Allow indexing, show large image previews -->
<meta name="robots" content="index, follow, max-image-preview:large" />

Canonical Tag

The canonical tag tells search engines which version of a page is the authoritative one when duplicate or near-duplicate content exists at multiple URLs. This consolidates link equity and prevents duplicate content penalties:

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

Common scenarios requiring canonical tags include pages accessible with and without trailing slashes, pages with query parameters (sort order, filters), HTTP vs HTTPS versions, and www vs non-www versions.

Open Graph Protocol

Open Graph (OG) is a protocol created by Facebook (now Meta) that controls how your content appears when shared on social media platforms. When someone shares a link on Facebook, LinkedIn, Discord, Slack, or most messaging apps, the platform reads the Open Graph tags to generate a rich preview card with an image, title, and description.

<meta property="og:title" content="How to Generate Meta Tags" />
<meta property="og:description" content="A complete 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 four required Open Graph properties are og:title, og:type, og:image, and og:url. The most common og:type values are website (for homepages), article (for blog posts), and product (for e-commerce).

For og:image, use images that are at least 1200 x 630 pixels for optimal display on high-resolution screens. Images smaller than 600 x 315 pixels may not be displayed as a large card. Always use absolute URLs for the image path.

Twitter Cards

Twitter Cards are Twitter's (now X's) equivalent of Open Graph tags. They control how your content appears when shared on Twitter. There are four card types:

  • summary — A small card with a square thumbnail, title, and description. Best for general content.
  • summary_large_image — A large card with a wide image above the title and description. Best for visual content and blog posts.
  • app — A card with a direct link to download a mobile app.
  • player — A card that can display 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 complete 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" />

If Twitter Card tags are not present, Twitter will fall back to Open Graph tags. For this reason, many developers only add twitter:card and twitter:site and let Open Graph tags handle the rest.

Google Search Preview Optimization

Google assembles search result snippets from multiple sources: the title tag, meta description, and on-page content. To optimize how your pages appear in Google search:

  • Structured data. Add schema.org JSON-LD markup to enable rich results like star ratings, FAQ accordions, recipe cards, and event details. Rich results significantly increase click-through rates.
  • Max snippet length. Use max-snippet:-1 in the robots meta tag to allow Google to show the full description, or set a character limit like max-snippet:160.
  • Breadcrumbs. Implement breadcrumb structured data to show a clear navigation path in search results instead of a raw URL.
  • Favicon. Google shows your site's favicon next to search results. Ensure you have a clear, recognizable favicon that renders well at 16x16 pixels.

Schema.org Basics

Schema.org is a vocabulary of structured data types that search engines use to understand your content. The most common implementation method is JSON-LD (JavaScript Object Notation for Linked Data), which is placed in 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 complete guide to SEO meta tags.",
  "author": {
    "@type": "Organization",
    "name": "YourBrand"
  },
  "datePublished": "2026-02-10"
}
</script>

Common schema types include Article, Product, FAQPage, Organization, BreadcrumbList, and HowTo. Use Google's Rich Results Test to validate your structured data.

Complete Meta Tag Template

Here is a comprehensive meta tag template that covers SEO, Open Graph, and Twitter Cards:

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

  <!-- Open Graph / Facebook -->
  <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 to Avoid

  • Duplicate titles across pages. Every page should have a unique title tag. Duplicate titles confuse search engines about which page to rank for a given query.
  • Missing or generic meta descriptions. A meta description like "Welcome to our website" provides no SEO value. Write specific descriptions that match user search intent.
  • Relative URLs in Open Graph tags. Always use absolute URLs (including https://) for og:url and og:image. Relative paths break social media previews.
  • Keyword stuffing in titles. Writing "SEO Meta Tags | Meta Tags Generator | Best Meta Tags Tool" looks spammy and can trigger search engine penalties.
  • Ignoring mobile preview. Meta descriptions are truncated more aggressively on mobile. Test how your tags render on both desktop and mobile search results.

Using the PulpMiner Meta Tags Generator

Manually writing meta tags for every page is tedious and error-prone. The PulpMiner Meta Tags Generator lets you fill in a simple form and instantly generates all the HTML you need — title tag, meta description, Open Graph tags, Twitter Card tags, and canonical link. It validates character limits in real time and shows a live preview of how your page will appear in Google search results and social media shares.

Try the Meta Tags Generator

Need to extract data from websites?

PulpMiner turns any webpage into structured JSON data. No scraping code needed.

Try PulpMiner Free

No credit card required