Meta Tag Generator

Generate HTML meta tags for SEO, Open Graph, and Twitter Cards. Preview how your page will look in Google and social media.

How it works: Fill in your page details below → see live previews of how it will look on Google and social media → copy the generated HTML and paste it in your website's <head> tag.

Title42/60

This appears as the clickable headline in Google results. Keep it under 60 characters.

Description111/160

This appears below the title in Google results. Keep it under 160 characters. Make it compelling!

Page URL

The full URL of your page. Used in social media previews.

Canonical URL

Only needed if your page is accessible from multiple URLs. Tells Google which one is the 'official' version.

Robots

Google Preview

https://example.com

My Awesome Website — Build Something Great

A modern web application that helps developers build better products faster. Free tools, guides, and resources.

Social Media Preview

No image set

example.com

My Awesome Website — Build Something Great

A modern web application that helps developers build better products faster. Free tools, guides, and resources.

Generated HTML

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Awesome Website — Build Something Great</title>
<meta name="description" content="A modern web application that helps developers build better products faster. Free tools, guides, and resources.">
<meta name="robots" content="index, follow">
<meta http-equiv="content-language" content="en">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="My Awesome Website — Build Something Great">
<meta property="og:description" content="A modern web application that helps developers build better products faster. Free tools, guides, and resources.">
<meta property="og:url" content="https://example.com">
<meta property="og:site_name" content="My Awesome Website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Awesome Website — Build Something Great">
<meta name="twitter:description" content="A modern web application that helps developers build better products faster. Free tools, guides, and resources.">

What Are Meta Tags?

Meta tags are HTML elements placed inside the <head> section of a webpage that provide metadata about the page to search engines and social media platforms. They influence how your page appears in Google search results, when shared on Twitter, Facebook, LinkedIn, and other platforms.

Essential Meta Tags for SEO

The most important meta tags for SEO are the title tag and meta description. The title tag (50–60 characters) appears as the clickable headline in search results. The meta description (150–160 characters) is the snippet below the title. A compelling description can significantly improve your click-through rate even when it does not directly affect rankings.

Open Graph Tags

Open Graph (OG) tags control how your content is displayed when shared on Facebook, LinkedIn, WhatsApp, and other platforms that support the OG protocol. The key tags are og:title, og:description, og:image, and og:url. Using a dedicated og:image (1200x630px recommended) greatly improves engagement when your content is shared.

Twitter Card Tags

Twitter Card tags define how your content appears when shared on Twitter/X. The twitter:card type can be summary, summary_large_image, app, or player. Using summary_large_image with a high-quality image significantly increases engagement on the platform.

How to Add Meta Tags

Copy the generated HTML and paste it inside the <head> section of your page. In Next.js, use the Metadata API in layout.tsx or page.tsx. In WordPress, use an SEO plugin like Yoast or RankMath. Verify your tags using Google's Rich Results Test and social media debugger tools.