~/og ☀ LIGHT apps ← about me

🌐 Language

// open graph · twitter card · social share preview
██████╗ ██████╗ ███╗ ███╗ ███████╗ ████████╗ █████╗ ██╔═══██╗ ██╔════╝ ████╗ ████║ ██╔════╝ ╚══██╔══╝ ██╔══██╗ ██║ ██║ ██║ ███╗ ██╔████╔██║ █████╗ ██║ ███████║ ██║ ██║ ██║ ██║ ██║╚██╔╝██║ ██╔══╝ ██║ ██╔══██║ ╚██████╔╝ ╚██████╔╝ ██║ ╚═╝ ██║ ███████╗ ██║ ██║ ██║ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝

OG image & meta tag previewer_

See exactly how your page looks when shared on Twitter/X, LinkedIn, Facebook and Discord.
Fill in the fields — previews update instantly. Copy the ready-to-paste HTML meta tags.

recommended: under 60 chars
recommended: under 160 chars
recommended: 1200×630 px · min 600×315 px
Twitter card type
Twitter / X
no image
yoursite.com
Your page title
A short description of your page content
LinkedIn
no image
Your page title
A short description of your page content
yoursite.com
Facebook
no image
YOURSITE.COM
Your page title
A short description of your page content
Discord
YOURSITE.COM
Your page title
A short description of your page content
no image

        

      


    

  










Frequently Asked Questions — OG Image & Meta Tag Previewer



grep






Open Graph Basics


What is Open Graph and why does it matter?
Open Graph is a set of meta tags (originally created by Facebook) that tell social platforms what title, description, image and URL to show when someone shares your link. Without them, most platforms fall back to guessing — often picking the wrong image, truncating your title, or showing no preview at all.


What are Open Graph meta tags exactly?
They're <head> <meta> tags using the og: prefix — og:title, og:description, og:image, og:url and og:type are the core five. Twitter/X reads a parallel set prefixed twitter:, which this tool also generates.


What happens if I don't add these tags?
The platform tries to guess: it may grab your page's visible <title>, the first image it finds in your HTML, or nothing at all. Results are inconsistent across LinkedIn, Twitter/X, Facebook and Discord, and can look broken or unbranded.


Is my data uploaded anywhere?
No. Everything runs client-side in your browser — the previews and code are generated locally from what you type. Nothing you enter here is sent to any server. (Loading an image you point to still comes from wherever you hosted it, since the browser has to fetch it to display it.)


Is this tool free to use?
Yes, completely free — no account, no signup, no limit. One of the free browser tools at jasperbernaers.com.



Image & Sizing


What's the recommended OG image size?
1200 × 630 pixels (roughly a 1.91:1 ratio) at a reasonable file size — displays as a full-width image card on Twitter/X, LinkedIn, Facebook and Discord without cropping badly.


What's the minimum image size that still works?
600 × 315 pixels is the safe floor most platforms accept for a large-image card. Below that, some platforms — notably Twitter/X — fall back to a smaller "summary" layout with a cropped square thumbnail instead of the full-width image.


What aspect ratio should the image use?
Stick to roughly 1.91:1 (1200×630 is the common reference). Off-ratio images get auto-cropped differently by each platform, so faces or text near the edges can get cut off — keep important content centered.


Why does my image show "image not found" in the preview?
This preview loads your image URL directly in the browser, the same way social platforms would. If it doesn't load here, check that the URL is public (not localhost, not behind a login), doesn't require special headers, and returns an actual image rather than an HTML page.


Does the image URL need to be publicly accessible?
Yes. Social platforms — and this tool's preview — fetch the image over the public internet. A URL that only works on your local machine or behind authentication will show as broken to anyone who isn't you.



Meta Tags & Code Output


Does this tool generate ready-to-paste HTML?
Yes. The code panel below the previews outputs complete <meta> tags — switch between the "OG tags", "Twitter card" and "all tags" tabs and click copy to grab exactly what you need for your <head>.


What's the difference between the "OG tags", "Twitter card" and "all tags" tabs?
OG tags are the Open Graph tags read by LinkedIn, Facebook, Discord and most other platforms. Twitter card holds the twitter:-prefixed tags Twitter/X reads instead, since it doesn't use Open Graph tags directly. All tags combines both blocks so you can paste everything at once.


What's the difference between summary and summary_large_image card types?
summary_large_image shows a full-width banner image above the title and description — the modern, more eye-catching layout, and what this tool defaults to. summary shows a small square thumbnail beside the text instead, useful if your image doesn't work well cropped wide.


What does og:site_name do, and do I need to fill in Site name?
og:site_name tells the platform your brand or site name, shown alongside the domain on some cards (mainly Facebook and Discord). It's optional — leave it blank and most platforms just show the domain from your Page URL instead.


Do I need to fill in Page URL?
It's optional for previewing, but recommended for the real tags — it becomes og:url, the canonical address the share should point back to, and it's also used here to derive the domain shown under the title in each preview card.


Do I need a Twitter handle?
No — it's optional. If filled in, it's added as twitter:creator, which some Twitter/X card types use to attribute the content to an account. Leaving it blank just omits that one tag.


Can I change og:type from "website" to something else, like "article"?
Not directly in the form — og:type is fixed to "website" here, since that covers the large majority of pages. If you're tagging a blog post or product page, copy the generated code and swap website for article or product yourself before pasting it in.



Platform Previews & Caching


How accurate are these previews to what actually shows on each platform?
They're a close visual approximation based on each platform's typical card layout, fonts and truncation behavior — useful for catching missing tags, bad image sizes or overlong titles before you publish. Platforms tweak their actual rendering over time, so for a guaranteed final check, also run your live URL through each platform's own debugger (see next question).


Why does LinkedIn/Facebook/Twitter still show my old title or image after I changed the tags?
These platforms cache the preview the first time a URL is shared and won't refetch it automatically. To force a refresh, use Facebook's Sharing Debugger, LinkedIn's Post Inspector, or Twitter/X's Card Validator — each has a "scrape again" / "inspect" action that clears the cached preview for that URL.


Does this tool support Slack previews?
Slack unfurls links using the same Open Graph tags shown in the "OG tags" tab, so whatever you generate here applies to Slack too — there's just no dedicated Slack-styled preview card in the layout above.



Using This Tool


What do the ✓ / ⚠ / ✗ checks mean?
They flag common mistakes before you publish: a red ✗ means a required field (title, description or image) is empty; a yellow ⚠ means it's present but too long, or your canonical URL is missing; a green ✓ means that field looks good.


What are the recommended character limits for title and description?
Roughly 60 characters for the title and 160 characters for the description — beyond that, most platforms truncate with an ellipsis. The character counters above each field turn amber once you cross the limit, though a few extra characters usually still display fine on wider cards.


What languages does this tool support?
The interface is available in English, Dutch, Spanish, Arabic, Indonesian, French, Portuguese, Russian, Japanese and German — switch via the 🌐 globe icon in the top bar.


Does the tool remember what I type if I reload the page?
No — nothing is saved between visits. Reloading resets the form to this page's own demo values (used to show you a working example), so copy your generated code before navigating away or refreshing.