How do I add meta tags to my website?

Copy the generated HTML code and paste it inside the section of your HTML page, before the closing tag. If you use a CMS like WordPress, you can use an SEO plugin to set these values through a user interface.

Web

SEO

Meta Tag Generator

Generate SEO meta tags, Open Graph, Twitter Card, JSON-LD structured data, and robots directives

Basic Meta Tags

Page Title0/60

Meta Description0/160

Keywords (comma-separated)

Author

Social / Open Graph

Canonical URL

OG Image URL

Site Name

Twitter Handle

Google Search Preview

Page Title

https://example.com

Your meta description will appear here. Write a compelling summary to encourage clicks from search results.

Generated HTML

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary">

Social Card Preview

Twitter / X

No image set

example.com

Page Title

Your description will appear here.

Facebook

No image set

example.com

Page Title

Your description will appear here.

No image set

Page Title

example.com

Share to Community

Was this tool helpful?

What is Meta Tag Generator?

Free online meta tag generator to create complete, SEO-optimized HTML meta tags for your web pages.

Fill in your page title, description, keywords, and social details, then get ready-to-use HTML including standard SEO meta tags, Open Graph tags for Facebook and LinkedIn, and Twitter Card markup. See a live preview of how the page will look as a Google search result and as a social share card before you ship it. Use it as an Open Graph generator, a Twitter Card generator, or a one-stop social media meta tag creator. Copy the generated HTML and paste it into your page's <head> section. No signup required.

How to Use Meta Tag Generator

1Fill in the basic fields: page title, description, keywords, and author
2Add Open Graph details: OG title, description, image URL, and site name
3Add Twitter Card details: card type, title, description, and image URL
4Preview how your page looks in Google search results and copy the generated HTML

Frequently Asked Questions

Meta tags are HTML elements in your page's <head> section that provide metadata about the page. Search engines use the title tag and meta description to display your page in search results. Well-crafted meta tags improve click-through rates from search results and help search engines understand your content.

Open Graph (OG) tags control how your page appears when shared on Facebook, LinkedIn, and other social platforms. They define the title, description, image, and URL that appear in the social share preview. Without OG tags, platforms will try to auto-generate a preview that may not look ideal.

Meta titles should be 50-60 characters to avoid being truncated in Google search results. Meta descriptions should be 150-160 characters. Both should include your target keyword naturally and be compelling enough to encourage clicks.

Copy the generated HTML code and paste it inside the <head> section of your HTML page, before the closing </head> tag. If you use a CMS like WordPress, you can use an SEO plugin to set these values through a user interface.

Use a 1200 by 630 pixel image for the og:image tag. That ratio displays as a large card on Facebook, LinkedIn, and X without cropping. Keep the file accessible at a public URL so the platforms can fetch it when your link is shared.

Open Graph tags (og:title, og:description, og:image) control previews on Facebook, LinkedIn, and most platforms. Twitter Card tags (twitter:card, twitter:title) control the preview on X. Many platforms fall back to Open Graph, but including both gives you the most control over how the link looks everywhere.

Share this tool

Related Tools

Open Graph Preview

Free online open graph preview - preview how your page looks when shared on social media platforms

SEO

SEO Analyzer

Free online SEO analyzer - analyze any website's SEO score and get actionable improvement tips

🌍

Hreflang Tag Generator

Generate hreflang tags for multilingual SEO - HTML, HTTP headers, and XML sitemap formats

ico

Favicon Generator

Free online favicon generator - generate favicons from text, emoji, or uploaded images in all required sizes

CSS

AI CSS Generator

Free online AI CSS generator - browse 25+ CSS effects or generate custom styles with AI

🤖

Robots.txt Generator

Free online robots.txt generator - generate robots.txt files to control search engine crawler access

Google Search Preview

Page Title

https://example.com

Your meta description will appear here. Write a compelling summary to encourage clicks from search results.

Generated HTML

What is Meta Tag Generator?

Free online meta tag generator to create complete, SEO-optimized HTML meta tags for your web pages.

Frequently Asked Questions