Meta Tag Generator
Generate SEO meta tags, Open Graph, and Twitter Card markup
Fill in the details
Basic Meta
Robots
Open Graph
Twitter Card
2HTML Output
<meta name="robots" content="index, follow" /> <!-- Open Graph --> <meta property="og:type" content="website" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" />
What Are Meta Tags?
Meta tags are HTML elements in your page's <head> section that provide metadata about the page to search engines and social media platforms. They control how your page appears in search results, social media shares, and browser tabs.
Tag Types Explained
Basic Meta Tags
The title tag sets the browser tab text and is the most important on-page SEO element. The meta description appears below the title in search results. Keep titles under 60 characters and descriptions under 160.
Canonical URL
Tells search engines which URL is the "official" version of a page. Essential for preventing duplicate content issues when the same content is accessible at multiple URLs.
Open Graph (OG)
Controls how your page appears when shared on Facebook, LinkedIn, and most social platforms. The OG image is particularly important — use 1200×630px images for best results.
Twitter Card
Controls how your page looks in Twitter/X posts. Use summary_large_image for blog posts and summary for general pages. Image falls back to OG image if not specified.
Best Practices
- ✓ Keep titles under 60 characters to avoid truncation in search results
- ✓ Keep descriptions under 160 characters — Google may truncate longer ones
- ✓ Always set a canonical URL to prevent duplicate content issues
- ✓ Use unique titles and descriptions for every page — avoid duplicates
- ✓ OG images should be 1200 × 630px for optimal display on social platforms
- ✓ Include your primary keyword naturally in both title and description
How to Add Meta Tags to Your Website
After copying the generated HTML, here's how to add it to your site depending on your platform:
Plain HTML
Open your HTML file and paste the generated code inside the <head> tag, before any CSS or JS links:
<html>
<head>
<!-- Paste your meta tags here -->
<title>My Page</title>
<meta name="description" content="..." />
...
</head>
WordPress
Use an SEO plugin like Yoast SEO or Rank Math — they provide fields for title, description, and OG tags without touching code. If you need custom tags, go to Appearance → Theme Editor → header.php and paste the code before </head>. Alternatively, use the Insert Headers and Footers plugin.
Next.js / React
Use Next.js built-in <Head> component or the metadata export (App Router):
export default function Page() {
return (
<Head>
<!-- Paste your meta tags here -->
</Head>
)
}
Shopify
Go to Online Store → Themes → Edit Code, open theme.liquid, and paste the meta tags inside the <head> section. For per-page SEO, use the built-in SEO fields in each page/product editor.
Frequently Asked Questions
Do meta keywords still matter for SEO?
No. Google has ignored the keywords meta tag since 2009. However, some smaller search engines may still use it. It's included here for completeness but is optional.
Should I set noindex or nofollow?
Use noindex for pages you don't want in search results (admin pages, thank you pages). Use nofollow if you don't want search engines to follow links on the page. Most pages should keep both set to their defaults.
What's the difference between OG and Twitter Card?
Open Graph is used by Facebook, LinkedIn, and most platforms. Twitter Card is specific to Twitter/X. Twitter will fall back to OG tags if Twitter-specific tags are missing, but having both ensures optimal display everywhere.
How can I test my meta tags?
Use Facebook Sharing Debugger for OG tags, Twitter Card Validator for Twitter tags, and Google Search Console for SEO meta tags.