Open Graph meta tag generator

The tags a link preview is built from

When someone pastes your link into a post or a message, the app sends a crawler to the page and reads a handful of <meta> tags in the <head>. Those tags come from the Open Graph protocol, which lists four as required:

• og:title: the title as it should appear in the preview.
• og:type: what the page is. website fits most pages and article fits a blog post. The protocol also defines types such as profile, book, video.movie and music.song.
• og:image: the URL of the picture that represents the page.
• og:url: the canonical URL, which the protocol calls the object’s permanent ID.

The protocol also defines optional tags, and the generator writes the useful ones: og:description, og:site_name, and the image details og:image:width, og:image:height and og:image:alt. On alt text the protocol is direct: if a page specifies og:image, it should specify og:image:alt, and that text describes what is in the image, not a caption.

What X adds: twitter:card

X reads Open Graph too. Its cards markup reference (X’s developer documentation, linked here through the Internet Archive because the original page now redirects) lists the fallback for each tag: twitter:title falls back to og:title, twitter:description to og:description, twitter:image to og:image and twitter:image:alt to og:image:alt. So the one tag worth adding is twitter:card, which picks the layout. Leave it out and the same reference says X may fall back to a small summary card, even if you wanted the large one:

• summary_large_image: a full-width image above the title. X’s large image card page says images for it support a 2:1 aspect ratio, with minimum dimensions of 300 × 157 and a maximum of 4096 × 4096 pixels, under 5MB, in JPG, PNG, WEBP or GIF. SVG is not supported.
• summary: a smaller card with a square image. X’s summary card page says the image supports a 1:1 ratio, from 144 × 144 up to 4096 × 4096 pixels, and is cropped to a square on all platforms.

The same reference lists app and player cards, which need extra app store or video player fields, so they are left out here. It also documents limits the checks above use: 70 characters for a title, 200 for a description and 420 for alt text.

Image sizes the platforms state

• LinkedIn: its guide to making a website shareable asks for og:title, og:image, og:description and og:url, and lists a maximum file size of 5 MB, a minimum of 1200 × 627 pixels and a recommended ratio of 1.91:1.
• Meta: its sharing best practices say to use images at least 1080 pixels wide for high-resolution screens, and at least 600 pixels wide to display image link ads. The same page asks for og:image:width and og:image:height so the crawler can render the image immediately without having to download and process it first.

A 1200 × 630 image meets all of these: it is at least 1200 × 627 for LinkedIn, wider than 1080 for Meta, and 1.905:1, within 5% of X’s 2:1.

Check it, and refresh old previews

Apps cache what they scraped, so fixing the tags does not fix a preview that was already stored. Both big networks give you a tool for this:

• Meta’s Sharing Debugger shows the tags its crawler scrapes, with any errors or warnings, and triggers a fresh scrape. Meta’s webmaster guide describes it, and the best practices page notes that scraped content otherwise updates on a standard 24 hour period.
• LinkedIn’s Post Inspector refreshes a cached URL. LinkedIn’s help page notes that the refresh only affects new posts: posts that already include the URL keep the old preview.

What this tool does not do

It does not fetch your page or your image, so it cannot see what is actually live, and the preview above is a text sketch rather than a render. It writes the tags; your site still has to serve them in the <head> of the page, in the HTML the crawler receives. Tags added later by JavaScript may never be seen. And it does not write app or player cards, or the extra properties that types such as book or video.movie define.

If you would rather not hand-write this

Hermoso is marketing on autopilot: it researches the ads already working in your market, makes on-brand image and video ads, schedules the posts and runs paid campaigns on your own ad accounts. It works in the web app, or inside Claude, ChatGPT and Cursor through its MCP server.

Free tools: UTM link builder · QR code generator · Social media size guide

Frequently asked questions

Which Open Graph tags are required?

The Open Graph protocol lists four required properties: og:title, og:type, og:image and og:url. og:description, og:site_name and the og:image width, height and alt tags are optional but worth adding.

Do I need twitter:title and twitter:image if I have og: tags?

No. X's cards markup reference says twitter:title, twitter:description, twitter:image and twitter:image:alt fall back to their og: equivalents. The tag worth adding is twitter:card, which picks the card layout.

What size should an Open Graph image be?

LinkedIn asks for at least 1200 × 627 pixels at 1.91:1 and under 5 MB. Meta suggests at least 1080 pixels wide. X's large image card supports 2:1 from 300 × 157 to 4096 × 4096. A 1200 × 630 image fits all three.

Why does my link still show an old image after I changed the tags?

The app cached the old scrape. Run the URL through Meta's Sharing Debugger or LinkedIn's Post Inspector to fetch it again. LinkedIn notes that posts already sharing the URL keep the old preview.

Why are quotes and ampersands changed in the output?

They are HTML-escaped so the tag stays valid. A title like Tom & Jerry's "Sale" becomes Tom & Jerry's "Sale" inside the content attribute, and browsers and crawlers read it back as the original text.

Does the tool load my image?

No. Nothing you type is sent anywhere and the image URL is never fetched, which is why the preview shows a placeholder instead of the picture.