Generate open graph

Generate Open Graph meta tags for a predictable social link preview.

freeworks offlinenothing uploaded
ToolOpen Graph Generator
Input
Output
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Title, type, URL, image, description, site name, and locale become og: meta tags; image dimensions and alt text are added when supplied. The tags describe social previews rather than search ranking or document title.

  • Core object tags identify the shared URL.
  • Image metadata improves deterministic previews.

Worked example

Article Open Graph tags with site name
Generate Open Graph meta tags for a blog article with image, site name, and locale
Input
											Title: Building REST APIs with Node.js
Description: A comprehensive guide to building RESTful APIs using Express and Node.js
URL: https://example.com/blog/rest-apis
Image: https://example.com/images/rest-api-cover.jpg
Image width: 1200
Image height: 630
Type: article
Site name: Acme Dev Blog
Locale: en_US
										
Output
												<meta property="og:title" content="Building REST APIs with Node.js">
<meta property="og:description" content="A comprehensive guide to building RESTful APIs using Express and Node.js">
<meta property="og:url" content="https://example.com/blog/rest-apis">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/images/rest-api-cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Acme Dev Blog">
											

When to use this

Blogs, product links, and campaign CMS pages generate share metadata.

Edge cases

  • Relative images can fail when crawlers fetch them.
  • Blocked images produce incomplete cards.
  • Multiple og:image tags are ordered preferences.

References