HTML Meta Tag & Open Graph Previewer
Build SEO meta blocks and preview how your page will appear when shared on Twitter, LinkedIn, and Facebook. Generates ready-to-paste HTML meta tag code.
Meta Tag & Social Card Previewer
How to use the Meta Tag & Social Card Previewer
Fill in the five fields: Page Title, Meta Description, Canonical URL, OG Image URL, and Site Name. The Google Search Preview and Twitter Card Preview update in real time as you type. Once you are happy with how the page will appear when shared, click Copy HTML to get the complete meta tag block and paste it into the head of your page.
Google displays approximately 60 characters of title and 155-160 characters of description on desktop. The preview shows you exactly what gets truncated. If your title reads "Best Project Management Software for Small Business Teams in 2024" the preview shows it cut off at "Best Project Management Software for Small Business Tea..." -- prompting you to shorten it.
When someone shares your page on Twitter, Facebook, or LinkedIn, the platform reads your OG tags to build a link preview card. The tool shows you exactly how that card will look -- title, description, image, and domain. If the OG image field is empty, you see a placeholder icon instead of a broken image, which is what your audience would see.
When launching a new page, fill in all five fields and copy the generated HTML. It includes the title tag, meta description, canonical link, Open Graph tags (og:type, og:title, og:description, og:url, og:image, og:site_name), and Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image). Paste this block into your page head and you are done.
What tags are generated
Standard meta tags
Title and meta description tags for search engines. These are the primary signals Google uses for search snippets. The tool shows a live preview of how they will appear in results.
Open Graph (OG)
og:title, og:description, og:url, og:image, og:site_name, og:type. Used by Facebook, LinkedIn, Slack, and most social platforms when generating link previews.
Twitter Card
twitter:card, twitter:title, twitter:description, twitter:image. Allows Twitter/X to display rich media cards when your link is shared.
Canonical URL
rel=canonical tells search engines which URL is the authoritative version of the page, preventing duplicate content issues across www and non-www or HTTP and HTTPS variants.
Frequently asked questions
How long should a meta description be?
Google displays up to approximately 155-160 characters on desktop and about 120 characters on mobile. Aim for 120-155 characters to ensure full display across devices. Include your primary keyword naturally in the first 100 characters. The preview tool shows you exactly where truncation occurs for your specific text.
What size should my OG image be?
1200x630 pixels is the standard for all major platforms. This 1.91:1 aspect ratio ensures correct display on Facebook, Twitter (summary_large_image card), and LinkedIn. Images smaller than 300x200 pixels may not display as rich cards. Keep the file under 8 MB and use PNG for graphics or JPEG for photographs.
Do I need both OG and Twitter tags?
Twitter falls back to OG tags if Twitter-specific tags are absent, so technically you could use only OG tags. However, explicitly setting twitter:card to summary_large_image ensures consistent rendering. Without it, Twitter may default to the smaller summary card format. Adding both guarantees correct display across all platforms.
Why isn't my social card updating?
Social platforms aggressively cache link previews -- Facebook caches for up to 30 days. To force a refresh, use Facebook's Sharing Debugger (click "Scrape Again"), Twitter's Card Validator (enter your URL and click "Preview card"), and LinkedIn's Post Inspector. After updating your OG tags, you must trigger a re-scrape on each platform individually.
What is a canonical URL and why does it matter?
A canonical URL tells search engines which version of a page is the authoritative one. Without it, Google may index both https://example.com/page and https://www.example.com/page as separate pages, splitting your ranking signals. The canonical tag consolidates these variants into a single authoritative URL. Always use the full HTTPS URL with trailing slash if your site uses one.