About

SEO

Open Graph Generator

Generate Open Graph meta tags for better social previews and share cards on Facebook, LinkedIn, and more.

Features

  • Create og:title and og:description tags
  • Set URL and image fields
  • Prepare social sharing metadata

How to use it

  1. Enter the page title, description, and URL.
  2. Add an image and a site name if needed.
  3. Copy the generated Open Graph snippet.

Example and use cases

Prepare rich social preview tags for a product landing page or article.

Useful for improving how pages appear when shared on social networks and messaging platforms.

Open Graph Generator

Generate Open Graph meta tags for better social media link previews.

Advertisement

Ad Space

Open Graph Details

Enter the information you want to share.

0/60
0/200

Use a publicly accessible image URL.

Social Preview

Preview how your page information can appear when shared.

OG image preview

example.com

Your Open Graph title

Your Open Graph description will appear here.

Generated HTML

Add these tags inside your HTML head.

<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />

Open Graph tags should normally be placed inside the <head> section of your webpage.

What is Open Graph?

Open Graph is a metadata standard that allows webpages to control how their content is represented when a URL is shared on social platforms and other services that read Open Graph metadata.

Common Open Graph properties include og:title, og:description, og:image, og:urland og:type.

These tags provide structured information that sharing platforms can use to construct a link preview.

How the Open Graph Generator Works

1

Enter Page Details

Add your title, description, URL, image URL and other Open Graph information.

2

Preview

The tool creates a visual preview using the information you entered.

3

Generate HTML

Copy the generated Open Graph tags and place them in your webpage head.

Example

For a developer tools website, you might generate:

<meta property="og:title"
      content="Free Online Web Developer Tools" />

<meta property="og:description"
      content="Explore free online tools for developers, SEO, APIs and security." />

<meta property="og:url"
      content="https://example.com/" />

<meta property="og:image"
      content="https://example.com/og-image.png" />

<meta property="og:type"
      content="website" />

<meta property="og:site_name"
      content="WebTools" />

Open Graph Image Guidelines

Recommended Size

1200 × 630 pixels is a common format for social sharing images.

Use a Public URL

The image must be accessible through a publicly reachable URL.

Keep Text Readable

Use clear typography and strong visual hierarchy so the preview remains understandable.

Frequently Asked Questions

What is an Open Graph tag?

An Open Graph tag is an HTML meta tag that provides information about a webpage for systems that generate link previews.

Where do Open Graph tags go?

They normally go inside the head section of your webpage.

What is og:image?

The og:image property specifies an image that can be used in a social sharing preview.

What is og:title?

og:title defines the title that can be used for the shared page preview.

Does Open Graph improve Google rankings?

Open Graph is primarily intended for social sharing metadata. It should not be treated as a direct Google ranking factor.

Can I use Open Graph with Next.js?

Yes. Next.js provides metadata features that can generate Open Graph metadata, and the generated HTML concepts can also be implemented through the framework's metadata configuration.

Related Tools

Advertisement

Ad Space

Frequently asked questions

Do I need all fields filled?

No. You can generate a useful snippet with just the core title, description, and URL values.

Related developer tools

Meta Tag GeneratorSchema Markup GeneratorRedirect Checker