Meta Tag / OG Preview
Fill in title, description and image URL to preview Google search, Facebook Open Graph and Twitter cards. Copy ready-to-paste meta tags for SEO.
What is a meta tag and Open Graph preview tool?
What this tool does
This tool lets you enter a page title, meta description, canonical URL, site name, and OG image, then preview how the link appears in Google search results, Facebook Open Graph cards, and Twitter/X cards side by side. A copy-ready HTML meta tag block is generated from your inputs — paste it directly into your page <head>.
Why you need it
Social shares and search snippets are often the first impression of your page. Missing descriptions, truncated titles, or broken OG images make links look untrustworthy and reduce click-through rates. Debugging on live platforms requires cache busting and crawler delays. Local previews catch layout problems before launch — wrong image dimensions, empty descriptions, or titles that clip in Google results — without pinging external APIs.
Meta tags also feed tools beyond the browser tab: Slack and Discord unfurls, CRM link cards, and messaging-app previews all read the same og: fields. A missing or incorrect canonical URL can also cause search engines to index a duplicate parameter-laden version of a page instead of the one you actually want ranked, splitting link equity across near-identical URLs.
How to use it
- Enter your page title, meta description, and canonical URL in the Page section.
- Add an absolute HTTPS OG image URL to preview social cards.
- Review Google snippet, Facebook Open Graph, and Twitter card mockups as you edit.
- Click Copy Meta Tags and paste the generated block into your HTML head section.
Practical examples
- Validate a blog post title stays under ~60 characters before publishing to avoid Google truncation.
- Preview how a product launch page appears when shared on LinkedIn or Slack.
- Generate a complete og: and twitter: tag set for a static site without a CMS plugin.
- Pair with the Slug Generator so your canonical URL path matches your permalink slug.
- Check a documentation page's canonical URL matches the trailing-slash convention your server actually serves, avoiding a duplicate-content split.
How it works
As you type, the tool updates mock preview panels using your field values — title, description, domain extracted from the URL, and image src for card layouts. The meta code panel assembles standard tags: <title>, meta name="description", link rel="canonical", Open Graph properties (og:title, og:description, og:image, og:url), and Twitter card fields. Previews are approximations; real platforms may rewrite titles or crop images. Kitnax does not fetch your live URLs — everything renders locally from what you enter.
Google typically renders around 50–60 characters of a title and roughly 155–160 characters of a description before truncating with an ellipsis — exact cutoffs vary by pixel width and device, so the character counters here are guidelines rather than hard limits. When twitter: fields are left blank, X falls back to the equivalent og: properties, so duplicating every field is only necessary when you want platform-specific copy.
Common mistakes
- Using relative image paths — OG images must be absolute HTTPS URLs reachable by crawlers.
- Writing titles over 60–70 characters and expecting full display in Google results.
- Assuming preview mockups match Google exactly — Google may rewrite titles based on query and page content.
- Forgetting
twitter:cardwhen og: tags alone do not set the card layout on X. - Leaving the canonical URL pointed at a staging or parameterized address after launch, which can confuse crawlers about which version to index.
- Publishing an OG image at the wrong aspect ratio — a portrait photo cropped awkwardly to the 1.91:1 landscape frame most platforms expect looks worse than no custom image at all.
FAQ
Why is my OG image not showing in previews?
Use an absolute HTTPS URL publicly reachable by social crawlers. Relative paths and localhost URLs will not render on external platforms.
What title length should I aim for?
Keep titles under ~60 characters to avoid truncation in Google results. Social platforms allow slightly more but still clip long headlines.
Do previews match real Google results exactly?
Mockups approximate layout. Google may rewrite titles or descriptions based on query and page content.
Should I include Twitter-specific tags?
twitter:card tags complement og: tags. The copied block includes common fields for both ecosystems.
Is my draft content uploaded?
No. You type values locally; Kitnax does not ping your live URLs.