How to use the open graph generator
- 1Choose the og:type: article for posts, website for everything else.
- 2Fill in Title, Description, Page URL and Image URL; add an Image description for screen-reader users.
- 3Add Image width and Image height, Site name and Locale; for articles, the dates, section and tags.
- 4Check the Preview (press Show images to load your image), read any warnings, then Copy or Download the tags.
Example output for an article
og:type: article Title: How to make a sourdough starter Description: Seven days, two ingredients, one jar: a starter you can bake with by next weekend. URL: https://www.example.com/baking/sourdough-starter/ Image: https://www.example.com/images/starter-1200x630.jpg (1200 × 630) Site name: Bread Notes · Locale: en_US · Published: 2026-09-12 · Section: Baking · Tags: sourdough, bread
<meta property="og:type" content="article"> <meta property="og:title" content="How to make a sourdough starter"> <meta property="og:description" content="Seven days, two ingredients, one jar: a starter you can bake with by next weekend."> <meta property="og:url" content="https://www.example.com/baking/sourdough-starter/"> <meta property="og:image" content="https://www.example.com/images/starter-1200x630.jpg"> <meta property="og:image:alt" content="A jar of bubbly sourdough starter on a kitchen counter"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:site_name" content="Bread Notes"> <meta property="og:locale" content="en_US"> <meta property="article:published_time" content="2026-09-12"> <meta property="article:section" content="Baking"> <meta property="article:tag" content="sourdough"> <meta property="article:tag" content="bread">
Core og: properties
| Property | What to put in it |
|---|---|
og:title | The headline for the shared card; can be shorter or punchier than the <title> |
og:type | website or article (others below) |
og:url | The canonical URL, so shares of variants count together |
og:image | Absolute URL of the share image |
og:description | One or two sentences |
og:site_name | Your site or brand name |
og:locale | Language and territory, e.g. en_US, en_GB |
The first four are required by the protocol. The generator warns when one is missing.
Choosing og:type
Use article for blog posts, news and guides: it unlocks article:published_time, article:modified_time, article:author, article:section and article:tag. Use website for the homepage, product pages, tools and anything else. profile suits a person's page, book a single book, video.other a page built around a video. Facebook and LinkedIn render all of them the same way; the type mainly describes the content to apps that read it.
Image requirements
Use one image of 1200 × 630 px (1.91:1), under 5 MB, as JPG or PNG, on an absolute https:// URL that isn't blocked by robots.txt or a login. Under 600 × 315 px, Facebook shows a small thumbnail instead of a full-width image. Declaring og:image:width and og:image:height lets platforms lay out the card before they download the image, and og:image:alt describes it for screen-reader users.
Adding the tags to your site
Paste the tags inside <head>. If you use WordPress, Shopify or a framework, prefer its built-in fields: Yoast, Rank Math and SEOPress have a Social tab per post; Next.js accepts an openGraph object in the metadata export. Make sure only one system writes og: tags, because duplicate tags make platforms pick one unpredictably.
Testing after publishing
Once the page is live, run it through the Open Graph checker to confirm the tags are in the server HTML and the image loads. Then use Facebook's Sharing Debugger (Scrape Again) and LinkedIn's Post Inspector to make them fetch the new version, since both cache previews.
Is anything I enter stored?
This tool runs entirely in your browser. Your text is not uploaded to our servers.