Meta Tag Builder
Generate complete HTML meta tags, Open Graph tags, and Twitter Card tags for SEO and social sharing. Fill in your details and copy ready-to-paste HTML.
SEO Meta Tag Builder
Generate standard HTML meta tags and Open Graph tags for social sharing.
All processing happens locally in your browser — nothing is stored or sent to any server.
How to Use the Meta Tag Builder
- Enter your page title (up to 60 characters).
- Write a meta description (up to 160 characters).
- Add your page URL and optional Open Graph image URL.
- Copy the generated HTML tags and paste them into your page's head section.
About HTML Meta Tags
Meta tags live in the HTML <head> section and communicate page metadata to browsers, search engines, and social platforms. They are invisible to users but critical for SEO and social sharing performance.
Three sets of tags serve different purposes: standard meta tags (title, description, robots) tell search engines about your page; Open Graph tags (og:title, og:description, og:image) control how your page looks when shared on Facebook, LinkedIn, Discord, and Slack; Twitter Card tags control previews on X (Twitter). Writing all three correctly is repetitive — this tool generates them all at once from a single form.
A common mistake is setting og:image to a relative URL — social crawlers fetch images from an absolute URL including the domain. This builder reminds you to use full URLs for all image fields. All processing runs locally in your browser.
Frequently Asked Questions
What are Open Graph tags? ▼
Open Graph (OG) tags are meta tags in your HTML head section that control how your page appears when shared on social platforms — Facebook, LinkedIn, Discord, Slack, and others. They define the title, description, and thumbnail image for link previews.
How long should my meta description be? ▼
Aim for 150–160 characters. Google typically shows 155-160 characters in desktop search results and slightly fewer on mobile. Longer descriptions get cut off mid-sentence. The description does not directly affect rankings but influences click-through rate from search results.
Do I need both OG tags and Twitter Card tags? ▼
Twitter (now X) falls back to og:title, og:description, and og:image if Twitter Card tags are absent. However, twitter:card is required to enable the rich preview — without it, the link shows as a plain URL. Including both sets ensures full compatibility across all platforms.
What is the ideal og:image size? ▼
Use 1200×630 pixels for og:image. This is the recommended size for Facebook and displays well across most platforms. For Twitter summary_large_image cards, the same 1200×630 size works. Images below 600px wide may not render as rich previews on some platforms.
Does the meta description affect SEO? ▼
Not directly as a ranking factor. Google does not use meta descriptions for ranking. However, a well-written description increases click-through rate from search results, which can indirectly improve rankings by signaling to Google that users find your result relevant.
What is the difference between og:url and canonical? ▼
og:url tells social platforms the canonical URL to attribute shares to. The HTML canonical tag (<link rel="canonical">) tells search engines which URL to index for duplicate content. Both should point to the same primary URL for each page.
What does twitter:card: summary_large_image mean? ▼
summary_large_image displays a large image above the title and description in Twitter/X link previews. The plain summary card shows a small thumbnail next to the text. Use summary_large_image when you have a strong visual — it generates significantly more engagement.
Are viewport and charset meta tags important? ▼
Yes. <meta charset="UTF-8"> is required for proper text rendering. <meta name="viewport" content="width=device-width, initial-scale=1.0"> is required for correct mobile display. Both should be in every page's head section.