Open Graph Generator

About Open Graph generator

Generates the Open Graph and Twitter Card meta tags that control how a link looks when it is shared in chat apps and social feeds. Fill in the title, description, canonical URL and image, and a live preview card appears next to the tags. Length warnings tell you when a title or description is likely to be cut off.

How to use it

1. Enter the Title, Description, Canonical URL and Site name under Page details, and choose a Content type such as website or article.
2. Add an Image URL that is absolute http or https, plus Image alt text. The suggested size is 1200 by 630 pixels.
3. Under Twitter Card & extras choose a Card type, and add a Site handle, an Author handle and an optional Theme color.
4. Compare the Large image and Compact previews to see how the card will read.
5. Choose Meta tags for the tag block or Full HTML for a minimal page, then copy the result.

Escaping and handle cleanup

Title: Trail Guide & Maps
Description: Hike "easy" routes.
Site handle: hikeapp

property="og:title" content="Trail Guide & Maps"
property="og:description" content="Hike "easy" routes."
name="twitter:site" content="@hikeapp"

When to use it

• Fixing a link that unfurls with the wrong image, or none at all, in a chat app.
• Checking that a title and description are short enough before publishing a blog post.
• Producing a complete head block for a static HTML page that has no framework generating metadata.
• Choosing between the summary and summary_large_image card types for a product page.

Questions about Open Graph generator

How do Open Graph and Twitter Card tags differ?

Open Graph tags, prefixed og:, were created by Facebook and are read by most platforms. Twitter Card tags, prefixed twitter:, are read by X. The tool writes both from one set of fields so you only type things once.

How long should titles and descriptions be?

The tool warns above 60 characters for a title and 155 for a description, which are practical truncation points on many platforms. They are guidance rather than hard limits.

Why does the preview image not load?

The preview asks your browser to fetch the image URL straight from its host, so the address must be reachable from your browser and use http or https. Other schemes are blocked, and a placeholder appears on failure.

What happens to special characters?

Ampersands, quotes and angle brackets in your text are escaped inside attribute values, so a title like Trail Guide & Maps still produces valid HTML.

Do I need the extra basic tags?

The option Include title, description and canonical tags adds a title element, a description meta tag and a canonical link. Turn it off if your framework already sets those.

Related tools

• Robots.txt generatorBuild a robots.txt with user-agent groups, crawl rules, crawl-delay and sitemaps.
• HTML minifierMinify your HTML by removing all the unnecessary characters.
• CSS minifierMinify your CSS by removing all the unnecessary characters.
• JS minifierMinify your JS by removing all the unnecessary characters.
• JSON validator & beautifierValidate JSON content and make it looks good.
• SQL formatter/beautifierFormat & beautify your SQL code with ease.