TechCompare LogoTechCompare
Showing centimeters. Press to switch to inches.Showing inches. Press to switch to centimeters.
Back

Open Graph & SEO Meta Tag Visualizer

Preview how your website links will look when shared on Google, Twitter, Facebook, and Discord.

Import from URL

Meta Tag Data

Recommended: 50-60 chars0
Recommended: 150-160 chars0
Recommended: 1200x630 (1.91:1 ratio)
Preview
techcompare.app
TechCompare - Tech Tools & Comparisons
TechCompare offers free browser-based tools to compare screen sizes, calculate PPI, visualize FPS, estimate bandwidth, and benchmark hardware performance.

Generated Meta Tags

How to use this tool

  1. Enter the page title

    Type the title you want social platforms to display when your link is shared. This becomes the og:title meta tag and is the headline platforms such as Facebook, LinkedIn, and chat apps may show.

  2. Add a description and image URL

    Type a short description (the og:description text) and paste an absolute image URL for the preview card. Recommended size is 1200×630 pixels, which fits the standard 1.91:1 ratio all major platforms crop to.

  3. Watch the preview update live

    The visualizer renders previews for Google, Twitter/X, Facebook, and Discord. LinkedIn and Slack may interpret the same Open Graph tags differently, so use their platform-specific inspectors to verify the final card. Adjust the title, description, or image until the metadata is ready to test.

  4. Copy the generated meta tags

    Click copy on the Generated Meta Tags panel and paste the HTML block inside the <head> of your page. In frameworks like Next.js or React Router, adapt these into the framework's metadata API instead of pasting raw HTML.

About this tool

The Open Graph Visualizer helps developers and marketers check their website's social metadata before deployment. Type your title, description, image, and URL to preview the formats supported here, then use the destination platform's inspector when you need to verify LinkedIn or Slack.

The tool also generates the HTML <meta> tags to copy into your website's <head>. Switch to Batch to check a whole site from its sitemap.

Why Link Previews Matter

When someone shares your link on social media or in a chat app, the preview card is the first thing they see. A clear title, a short description, and a sharp image make the link easier to recognize than plain text. Open Graph tags give you control over that card.

How to use the generated code

Click the copy button on the 'Generated Meta Tags' panel, then paste the HTML block inside the <head> tags of your site's HTML document. In a framework like Next.js or React Router, adapt the tags to its metadata API instead.

Check a whole site at once

Batch mode finds the bugs that only show up across many pages. Paste a sitemap URL, or up to 100 page URLs from one site, and you get a table of every page's title, description and image with its problems listed next to it. It flags missing og:title, og:description, og:image and twitter:card tags, og:images under 1200x630, titles over 60 characters, descriptions over 160, and titles or descriptions that repeat across pages. Click Preview on any row to open that page in the single page view. TechCompare's server fetches the pages, about one a second, while your browser loads each og:image to measure it. Nothing is saved.

Popular OG tag guides

Platform-specific guidance for link previews across Facebook, Twitter, LinkedIn, Discord, Slack, and messaging apps.

OG image dimensions
1200x630 and the safe zone for common platforms
View details
Twitter Card types
summary vs summary_large_image vs player
View details
Facebook vs Twitter tags
Why you need both og: and twitter: tags
View details

Frequently asked questions

What are Open Graph meta tags?
Open Graph meta tags are snippets of code in your website's <head> that control how your page appears when shared on social media. They let you set the title, description, and image that platforms like Facebook, Discord, and LinkedIn display.
Why do I need a separate twitter:card tag?
Twitter (X) uses its own meta tags (twitter:card, twitter:image, etc.) to format link previews, while many other platforms fall back to Open Graph (og:) tags. Providing both gives you the widest compatibility.
What is the best image size for Open Graph?
Use 1200x630 pixels. That's a 1.91:1 aspect ratio, which most major social platforms use for large preview cards.
How do I test if my tags are working live?
Once deployed, use the Facebook Sharing Debugger and any platform-specific inspection tools that are still available. For X, inspect the rendered tags and test a normal share or post preview because the old Twitter Card Validator is not a dependable current workflow. This visualizer helps you preview and generate the tags locally before deployment.
Can I check the tags on every page of my site at once?
Yes, with batch mode. Paste a sitemap URL or up to 100 page URLs from one site, and the tool checks each page for missing tags, og:images under 1200x630, long titles and descriptions, and titles or descriptions used on more than one page. It fetches about one page a second, and you can download the results as a CSV.

Related tools

JSON Formatter

Validate, format, and minify JSON. Browse it as a tree, run JSONPath queries, compare two documents, or validate against a JSON Schema.

Use tool

Contrast Checker

Check color contrast ratios for WCAG AA/AAA accessibility compliance.

Use tool

Color Picker

Pick colors, convert between HEX, RGB, HSL, HSV, OKLCH and CMYK, and find the nearest CSS and Tailwind color.

Use tool

Cron Generator

Visually build standard 5-part cron expressions or translate them into readable schedules.

Use tool