Meta Tags Generator
Generate complete HTML meta tags including Open Graph and Twitter Card tags. Preview how your page looks in search results and when shared on social media.
Google Search Preview
My Awesome Page
https://example.com/page
A brief description of this page for search engines and social media previews.
example.com
My Awesome Page
A brief description of this page for search engines and social media previews.
What Are Meta Tags?
Meta tags are HTML elements placed in the <head> section of a web page that provide metadata — information about the page that is not displayed to visitors but is read by search engines and social media platforms. They control how your page appears in search results and when shared on social networks like Facebook, Twitter/X, and LinkedIn.
Tag Types
- Basic tags: title, description, robots, canonical — for SEO
- Open Graph (og:): used by Facebook, LinkedIn, and most messaging apps for link previews
- Twitter Card: used by Twitter/X for rich card previews when links are shared
- theme-color: sets the browser toolbar/address bar color on mobile
Best Practices
- Title: 50–60 characters (longer gets truncated in search results)
- Description: 140–160 characters for best visibility
- OG image: 1200×630px recommended; minimum 600×315px
- Twitter image: 1200×600px for
summary_large_imagecards - If og:title / og:description are blank, most platforms fall back to the basic title/description
FAQ
Do keywords meta tags still matter for SEO?
No. Google has ignored the keywords meta tag since 2009. It is included here for completeness and for search engines that may still use it, but it has no effect on Google rankings.
What is the canonical tag for?
The canonical tag tells search engines which URL is the "master" version of a page when the same content is accessible via multiple URLs. It prevents duplicate content penalties and consolidates ranking signals.
What image size should I use for OG images?
Use 1200×630px for Open Graph images. This displays well across Facebook, LinkedIn, Discord, and messaging apps. For Twitter large card, use 1200×600px. Always use an absolute URL (https://...) for image paths.
Where do I place these tags in HTML?
All meta tags must go inside the <head> element of your HTML page, before the closing </head> tag. In Next.js, use the Metadata API or place them in your layout's <Head> component.