Essential Meta Tags for AI and Search Visibility

Meta tags are the first thing every crawler reads when it visits your page. Before an AI model processes your heading structure, your body content, or your structured data, it reads your meta tags. The title tag tells it what the page is about. The meta description provides a summary. Open Graph tags define how the page is presented when shared. Together, they form the foundation of how your content is understood, indexed, and cited across the web.

Despite being one of the oldest elements of SEO, meta tags remain remarkably poorly implemented across the web. Our AgentReady scanner consistently finds that over 60% of scanned sites have missing or misconfigured meta tags -- missing descriptions, generic titles, absent Open Graph images, and broken canonical URLs. Each of these is a missed opportunity for AI visibility.

This guide covers every meta tag that matters for AI and search visibility, with best practices, complete examples, framework-specific implementation (including the Next.js metadata API), and the most common mistakes that cost you traffic. It is the reference document for getting meta tags right.

The title tag

The title tag is the single most important meta element on your page. It appears in browser tabs, search engine results, social media shares (as a fallback), and is one of the primary signals AI crawlers use to understand page content.

<title>How to Build an AI Agent for Your Website | p0stman</title>

Title tag best practices

• 50-60 characters. Google truncates titles beyond approximately 60 characters. Keep your most important words within this limit.
• Front-load keywords. Put the most important, searchable terms at the beginning. "AI Agent Development Services" is better than "Services We Offer: AI Agent Development".
• Use descriptive terms, not taglines. "AI-Powered Product Studio | p0stman" describes what you do. "Dream It. Build It. Ship It." does not.
• Include your brand name. Add it at the end, separated by a pipe (|) or dash (-). This builds brand recognition in search results.
• Make each title unique. Every page should have a different title tag. Duplicate titles confuse search engines and AI crawlers about which page is the canonical source for a topic.

Title tag patterns by page type

Page Type	Pattern	Example
Homepage	[Primary Offering] | [Brand]	AI-Powered Product Studio | p0stman
Service page	[Service Name] - [Brief Description] | [Brand]	AI Agent Development - Custom Voice and Chat Agents | p0stman
Blog post	[Article Title] | [Brand]	How to Create a robots.txt File for AI Crawlers | p0stman
Product page	[Product Name] - [Key Benefit] | [Brand]	AgentReady Scanner - Free AI Readiness Audit | p0stman
Location page	[Service] in [Location] | [Brand]	AI Development Agency in London | p0stman

What AI models do with the title tag

When an AI crawler indexes your page, the title tag is used as the primary identifier for the content. If a user asks "What does p0stman do?", the AI model uses the title tags across your pages to build a map of your site's content. A homepage title of "AI-Powered Product Studio | p0stman" immediately tells the model your core offering. A title of "Welcome to Our Website" tells it nothing.

AI models also use title tags when deciding which page to cite in their responses. If the title clearly matches the user's query, the model is more likely to reference that specific page and provide a link.

Meta description

The meta description provides a summary of the page content in 150-160 characters. While Google has stated that meta descriptions are not a direct ranking factor, they appear as the snippet text in search results and significantly affect click-through rates.

<meta name="description" content="Complete guide to creating and configuring robots.txt for AI crawlers like GPTBot, ClaudeBot, and PerplexityBot. Syntax, examples, and best practices.">

Meta description best practices

• 150-160 characters. Google truncates beyond approximately 160 characters. Some mobile results show even less.
• Include the primary keyword. Google bolds matching query terms in the description, which increases click-through rate.
• Write as a value proposition. Explain what the user will get from visiting the page. "Complete guide to..." is better than "This page discusses...".
• Include a call to action when appropriate. "Learn how to configure robots.txt for AI crawlers" is more compelling than a passive description.
• Make each description unique. Like titles, every page should have its own description. If you cannot write a unique description, the page may not justify its own URL.

When meta descriptions are used by AI

AI crawlers read meta descriptions as a quick summary of page content. When an AI model is deciding which of several pages to cite, the description helps it determine relevance without processing the full body content. A clear, accurate description increases the probability that your page is selected as a citation source.

If you do not set a meta description, search engines will auto-generate one from the page content. AI crawlers may not generate a fallback, which means your page has no summary in their index -- making it less likely to be cited.

Open Graph tags

Open Graph (OG) tags control how your page appears when shared on Facebook, LinkedIn, Slack, WhatsApp, iMessage, and most other platforms that generate link previews. They are also increasingly read by AI models as supplementary metadata.

Essential Open Graph tags

<!-- Required OG tags -->
<meta property="og:title" content="How to Build an AI Agent Endpoint">
<meta property="og:description" content="Complete guide to the A2A protocol, AgentCard, and JSON-RPC 2.0 implementation.">
<meta property="og:url" content="https://p0stman.com/guides/a2a-agent-guide.html">
<meta property="og:type" content="article">
<meta property="og:image" content="https://p0stman.com/images/a2a-guide-og.png">

<!-- Recommended additional OG tags -->
<meta property="og:site_name" content="p0stman">
<meta property="og:locale" content="en_GB">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Guide to building an A2A agent endpoint">

OG tag reference

Tag	Purpose	Notes
og:title	Title shown in link previews	Can differ from the HTML title tag. Keep under 60 chars.
og:description	Description in link previews	Can differ from meta description. Aim for 2-3 sentences.
og:url	Canonical URL of the page	Should match your canonical link tag.
og:type	Content type	Common values: website, article, product.
og:image	Preview image	1200x630px, under 1MB. Absolute URL required.
og:site_name	Name of the website	Shown alongside the title on some platforms.
og:locale	Language and region	Format: en_GB, en_US, fr_FR, etc.

OG image specifications

The OG image is critically important for social sharing click-through rates. A compelling, well-designed OG image can double or triple the engagement when your link is shared on LinkedIn, Twitter, or in messaging apps.

• Dimensions: 1200 x 630 pixels (1.91:1 aspect ratio)
• Format: PNG or JPEG
• File size: Under 1MB (ideally under 300KB)
• Safe zone: Keep important content in the centre 80% of the image, as some platforms crop edges
• Text: Include the page title or key message as text overlay on the image
• Branding: Include your logo or brand colours for recognition
• URL: Must be an absolute URL (starting with https://), not a relative path

Common mistake: using a relative path like /images/og.png instead of https://yourdomain.com/images/og.png. Social platforms and AI crawlers need the full URL to fetch the image.

Twitter Card tags

Twitter Card tags control how your page appears when shared on Twitter/X. Twitter will fall back to Open Graph tags if Twitter Card tags are not present, but setting both gives you more control.

<!-- Twitter Card tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to Build an AI Agent Endpoint">
<meta name="twitter:description" content="Complete guide to the A2A protocol and JSON-RPC 2.0 implementation.">
<meta name="twitter:image" content="https://p0stman.com/images/a2a-guide-og.png">
<meta name="twitter:site" content="@p0stman">
<meta name="twitter:creator" content="@paulgosnell">

Twitter Card types

Card Type	Display	Best For
summary	Small square image with title and description	General content, homepages
summary_large_image	Large rectangular image above title and description	Blog posts, guides, product pages
player	Embedded video or audio player	Video content, podcasts

For most content pages, summary_large_image is the best choice. The large image format drives significantly higher engagement than the small summary card.

Canonical URL

The canonical URL tag tells search engines and AI crawlers which version of a page is the authoritative one. This prevents duplicate content issues when the same page is accessible at multiple URLs.

<link rel="canonical" href="https://p0stman.com/guides/meta-tags-guide.html">

When canonical URLs matter

• www vs non-www: www.example.com/page and example.com/page are technically different URLs
• Trailing slashes: /page and /page/ can be treated as different URLs
• Query parameters: /page and /page?utm_source=twitter are the same content at different URLs
• HTTP vs HTTPS: Both versions may be accessible during migration
• Pagination: Page 2 of a blog listing should not cannibalise page 1

Set the canonical URL to the preferred, clean version of each URL. Use HTTPS, include or exclude the trailing slash consistently, and strip query parameters. The canonical URL should match the og:url tag.

Complete meta tag template

Here is the complete set of meta tags every page should have:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Core SEO -->
  <title>Page Title - Brief Description | Brand</title>
  <meta name="description" content="150-160 character description of the page content.">
  <link rel="canonical" href="https://yourdomain.com/page-slug">

  <!-- Open Graph -->
  <meta property="og:title" content="Page Title - Brief Description">
  <meta property="og:description" content="Description optimised for social sharing.">
  <meta property="og:url" content="https://yourdomain.com/page-slug">
  <meta property="og:type" content="website">
  <meta property="og:image" content="https://yourdomain.com/images/page-og.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:site_name" content="Brand Name">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Page Title - Brief Description">
  <meta name="twitter:description" content="Description optimised for Twitter.">
  <meta name="twitter:image" content="https://yourdomain.com/images/page-og.png">
  <meta name="twitter:site" content="@yourbrand">
</head>

Implementing meta tags in Next.js

App Router metadata API

Next.js App Router provides a built-in metadata API that generates HTML meta tags from a typed configuration object:

// app/page.tsx - Static metadata
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "AI-Powered Product Studio | p0stman",
  description: "We build AI agents, websites, and mobile apps...",
  openGraph: {
    title: "AI-Powered Product Studio | p0stman",
    description: "We build AI agents, websites, and mobile apps...",
    url: "https://p0stman.com",
    siteName: "p0stman",
    type: "website",
    images: [
      {
        url: "https://p0stman.com/social-preview.png",
        width: 1200,
        height: 630,
        alt: "p0stman - AI-Powered Product Studio",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "AI-Powered Product Studio | p0stman",
    description: "We build AI agents, websites, and mobile apps...",
    images: ["https://p0stman.com/social-preview.png"],
  },
  alternates: {
    canonical: "https://p0stman.com",
  },
};

Dynamic metadata for content pages

For pages with dynamic content (blog posts, product pages), use generateMetadata:

// app/blog/[slug]/page.tsx
import { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: `${post.title} | p0stman`,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `https://p0stman.com/blog/${params.slug}`,
      type: "article",
      publishedTime: post.publishedAt,
      modifiedTime: post.updatedAt,
      authors: [post.author.name],
      images: [
        {
          url: post.ogImage || "https://p0stman.com/social-preview.png",
          width: 1200,
          height: 630,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.excerpt,
    },
    alternates: {
      canonical: `https://p0stman.com/blog/${params.slug}`,
    },
  };
}

Layout-level defaults

Set defaults in your root layout that apply to all pages unless overridden:

// app/layout.tsx
import { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://p0stman.com"),
  title: {
    default: "p0stman | AI-Powered Product Studio",
    template: "%s | p0stman",
  },
  description: "We build AI agents, websites, and mobile apps...",
  openGraph: {
    siteName: "p0stman",
    type: "website",
    locale: "en_GB",
  },
  twitter: {
    card: "summary_large_image",
    site: "@p0stman",
  },
};

The template pattern is particularly useful: child pages only need to set the page-specific title, and the brand name is automatically appended.

How AI models use meta tags differently from search engines

Search engines use meta tags primarily for display (what appears in the search results listing) and as a lightweight relevance signal. AI models use them as a primary source of page understanding.

When an AI crawler processes your page, it builds a representation of the content by reading, in order:

1. Title tag -- What is this page about?
2. Meta description -- What is the summary?
3. OG tags -- Supplementary context (type, image, site name)
4. Structured data -- Machine-readable entity information
5. Body content -- The full text of the page

If your title tag and meta description are well-written, the AI model has a strong foundation before it even starts processing the body content. This leads to more accurate indexing, better relevance matching, and more confident citations.

Conversely, if your title says "Welcome" and your description is missing, the model has to infer everything from the body content, which is less reliable and may result in your page being passed over in favour of a competitor with clearer metadata.

Common meta tag mistakes

Using your tagline as the title

"Dream It. Build It. Ship It." is a tagline, not a title. No one searches for that phrase. Replace with: "AI Development Agency - Custom AI Agents and Web Apps | p0stman". This tells both search engines and AI models exactly what you do.

Missing meta description

Without a meta description, Google generates one from your page content (often poorly). AI crawlers may have no fallback, leaving your page without a summary in their index. Always write an explicit description for every page.

Duplicate titles across pages

If your service page, about page, and homepage all have the same title, search engines and AI models cannot distinguish between them. Each page must have a unique title that describes its specific content.

Missing OG image

When someone shares your link on LinkedIn, Slack, or Twitter without an OG image, the preview shows a grey placeholder or a tiny favicon. This dramatically reduces click-through rates. Every page should have an OG image, even if it is a generic branded template.

Wrong OG image dimensions

An OG image that is not 1200x630 (or at least a 1.91:1 ratio) will be cropped unpredictably on different platforms. Always use the standard dimensions.

Relative URLs in OG tags

og:image and og:url require absolute URLs starting with https://. Social platforms and AI crawlers cannot resolve relative paths like /images/og.png.

No canonical URL

Without a canonical tag, search engines may split your ranking signals across multiple URL variants (with/without trailing slash, with/without www, with query parameters). Always set a canonical URL on every page.

Testing your meta tags

Manual inspection

# View all meta tags in a page
curl -s https://yourdomain.com | grep -E '(<title|<meta|<link rel="canonical)'

# Check specific tags
curl -s https://yourdomain.com | grep 'og:title'
curl -s https://yourdomain.com | grep 'og:image'
curl -s https://yourdomain.com | grep 'description'

Platform-specific previews

• Facebook/LinkedIn: Use the Facebook Sharing Debugger to preview how your link appears and clear cached versions
• Twitter/X: Use the Twitter Card Validator to preview your card and debug issues
• LinkedIn: Use the LinkedIn Post Inspector to preview and refresh cached link data

AgentReady scanner

The AgentReady scanner checks all meta tags as part of a comprehensive AI readiness audit. It verifies titles, descriptions, Open Graph tags, Twitter Cards, canonical URLs, and flags common issues alongside other visibility factors like robots.txt, structured data, and server-side rendering.

Meta tag checklist

For every page on your site, verify:

1. Title tag: Unique, descriptive, 50-60 characters, keywords front-loaded
2. Meta description: Unique, value-oriented, 150-160 characters
3. Canonical URL: Set to the preferred clean URL
4. og:title: Set (can match title tag)
5. og:description: Set (can match meta description)
6. og:url: Set to absolute URL (matches canonical)
7. og:type: Set (website for pages, article for posts)
8. og:image: Set to absolute URL, 1200x630px image
9. twitter:card: Set to summary_large_image
10. twitter:title: Set
11. twitter:description: Set

Frequently Asked Questions

What meta tags do AI crawlers use?

AI crawlers primarily use the title tag and meta description to understand page content. They also read Open Graph tags (og:title, og:description, og:image) and canonical URLs. These tags provide a structured summary of the page that AI models use to determine relevance and generate accurate citations in their responses. Without clear meta tags, AI models must infer your page's purpose from body content alone, which is less reliable.

What is the ideal length for a title tag?

Title tags should be 50-60 characters to avoid truncation in search results. Place the most important keywords at the beginning. Include your brand name at the end, separated by a pipe (|) or dash (-). For AI visibility, use descriptive, searchable terms rather than creative taglines. The title should clearly state what the page is about so both search engines and AI models can classify it correctly.

What is the difference between og:title and the regular title tag?

The regular title tag appears in browser tabs and search engine results. The og:title tag appears when your page is shared on social media platforms like Facebook, LinkedIn, and messaging apps. They can be different: the title tag should be optimised for search with keywords, while og:title can be more conversational for social engagement. If og:title is not set, social platforms fall back to the regular title tag.

What size should OG images be?

Open Graph images should be 1200x630 pixels for optimal display across all platforms. This is the recommended size by Facebook, LinkedIn, and most social platforms. Use a 1.91:1 aspect ratio. Keep important content in the centre of the image as some platforms crop the edges. File size should be under 1MB, and PNG or JPEG formats are both acceptable. Always use an absolute URL starting with https://.

Do I need both Open Graph and Twitter Card tags?

Twitter/X will fall back to Open Graph tags if Twitter Card tags are not present. However, setting both gives you more control over how your content appears on each platform. Twitter Card tags let you specify a different card type (summary vs summary_large_image), a different image, or a different description tailored for the Twitter audience. For most sites, setting both with similar values provides the best coverage across all platforms.

How do I implement meta tags in Next.js App Router?

Next.js App Router provides a built-in metadata API. Export a metadata object or a generateMetadata function from your page or layout file. The framework automatically renders the correct HTML meta tags in the page head. For dynamic pages, use generateMetadata to fetch data and return metadata based on the page content. The metadata API handles title, description, Open Graph, Twitter Cards, canonical URLs, and more.

What is a canonical URL and why does it matter?

A canonical URL tells search engines and AI crawlers which version of a page is the authoritative one. If the same content is accessible at multiple URLs (with or without www, with query parameters, with trailing slashes), the canonical tag prevents duplicate content issues and consolidates ranking signals. Set it to the preferred, clean URL of each page. Without it, search engines may split ranking signals across duplicate URLs, weakening your position.

What are the most common meta tag mistakes?

The most common mistakes are: using a brand tagline as the title instead of descriptive keywords, missing meta descriptions entirely, missing or incorrectly-sized OG images, duplicate titles across multiple pages, using the same meta description for every page, relative URLs in OG tags instead of absolute URLs, and not setting a canonical URL. Each of these reduces your visibility in both search results and AI-generated responses. The AgentReady scanner checks for all of these issues automatically.