Open Graph Tag Generator
Generate Open Graph and Twitter Card meta tags to control how your page looks when shared on social media.
Did this tool work for you?
How to use this calculator
- 1
Enter the title and description for how your page should appear on social media.
- 2
Add the full URL of the page and the URL of your social sharing image.
- 3
Set the site name, content type, and locale.
- 4
Choose whether to include Twitter Card tags and your Twitter handle.
- 5
Copy the generated tags and paste them inside the <head> of your HTML.
Frequently asked questions
Which tags are always written, and which are optional?
og:type and og:locale are always written, using website and en_US unless you change them. The remaining Open Graph tags (url, title, description, image, image alt, site name) appear only when their fields are filled in. Twitter Card tags appear only when “Include Twitter Cards” is Yes.
Why are og:image:width and og:image:height always 1200 and 630?
When an image URL is entered the tool writes those two values as fixed numbers. It does not open or measure the image, so if your file has other dimensions, edit or delete the two lines. The comment at the end of the block repeats that they are fixed.
What happens if I leave the image alt text blank?
The title is used. Both og:image:alt and twitter:image:alt are filled with the title text when an image URL is present and the alt field is empty. Write a real description of the picture if the title would not describe it.
Which Twitter Card types can I generate?
Only summary_large_image (the default) and summary. The tool does not switch type for you: if you enter no image and keep the large-image type, the output still says summary_large_image with no image tag, so choose summary or add an image.
Does it add the @ to my Twitter handle?
Yes. The handle is written to twitter:site, and an @ is added if you did not type one. The tool does not write twitter:creator.
Are quotes and ampersands in my text safe?
Yes. Whitespace is collapsed and the characters & < > " are replaced with HTML entities, so a title such as Feeding & care “basics” cannot break the attribute it sits in. Platforms decode the entities back when they read the tag.
Does the generator check that the URLs or the image work?
No. It writes exactly what you typed. Use absolute URLs, because the tool does not resolve relative paths, and confirm that the image loads publicly. After deploying, read the live page back with the Open Graph checker.
The tag set the Open Graph generator writes, and the fixed values inside it
Structure of the output
The output is one block with two parts. The first is the Open Graph set, headed by og:type, which is always present. The second is the Twitter Card set, written only when the Twitter option is Yes. Inside each, a tag is skipped when its field is empty, with a few built-in behaviours: the locale defaults to en_US, the image alt defaults to the title, and a Twitter handle gets an @ if it lacks one. All text is whitespace-collapsed and escaped for &, <, > and ", so descriptions typed across several lines come out on one line.
Tags and their conditions
This table lists what the generator can write and the condition for each tag.
| Tag | Written when | Value |
|---|---|---|
| og:type | Always | website, article, product or video.other |
| og:url, og:title, og:description | Field filled | As typed, escaped |
| og:image | Image URL filled | As typed |
| og:image:alt | Image URL filled | Alt text, else the title |
| og:site_name | Site name filled | As typed |
| og:locale | Always | Default en_US |
| og:image:width, og:image:height | Image URL filled | Fixed at 1200 and 630 |
| twitter:card | Twitter = Yes | summary_large_image or summary |
| twitter:url, title, description | Twitter = Yes and field filled | Same values as the og tags |
| twitter:image, twitter:image:alt | Twitter = Yes and image filled | Alt falls back to title |
| twitter:site | Twitter = Yes and handle filled | @ added if missing |
Worked example: an article with an image
Enter the title Sourdough Starter Guide, the description Feeding & care "basics", the URL https://example.com/sourdough, an image at https://example.com/og/sourdough.jpg, the site name Acme Bakery, type Article, locale en_GB and the handle acmebakery, and leave the alt text blank. The result writes og:type as article, escapes the description as Feeding & care "basics", sets og:image:alt and twitter:image:alt to Sourdough Starter Guide, adds the two fixed size lines, and writes twitter:site as @acmebakery. A comment closes the block reminding you that the 1200 by 630 values are fixed.
Worked example: no image
With only a title, description and URL, and the Twitter option left on its defaults, the block contains og:type, og:url, og:title, og:description and og:locale, plus the Twitter card line, url, title and description. There is no og:image, no size lines and no alt text. The Twitter card line still reads summary_large_image even though no image exists, which asks for a layout with nothing to fill it. Switch the card type to summary, or supply an image, before publishing.
What still needs a human check
The generator never fetches anything, so it cannot tell whether an image is reachable, whether it really measures 1200 by 630, or whether the page URL is the one you want shared. It does not decide which platforms read which tags; if that matters to you, confirm it in each platform’s documentation. Set the Twitter option to No to output only the Open Graph set.
Learn more from an authoritative source:
Google Search CentralKeyword Density Calculator
Calculate keyword density and frequency for any text. Paste your content and keyword to see how often it appears and whether density is in the recommended SEO range.
Meta Description Checker
Check your meta description length, character count, pixel width, and SEO quality. Get instant feedback on whether it will display fully in Google search results.
Title Tag Checker
Check a title tag’s character length, approximate pixel width and keyword position against the length figures built into this tool. Search engines choose how titles are displayed, so treat the result as a guide.
Reading Level Calculator
Calculate the reading level and readability score of any text using the Flesch-Kincaid formula. Find out what grade level your content targets.
SERP CTR Estimator
Estimate monthly organic traffic from search volume and SERP position. Uses industry-average click-through rates by ranking position to project traffic potential.
SEO Word Count Checker
Count the words in your content and see reading time, sentence statistics and where the total sits against the length bands built into this tool. Word count alone does not decide how a page ranks.
Results are estimates for informational purposes only and do not constitute professional financial, medical, legal, or technical advice. Read full disclaimer →