Where do I put Open Graph tags in my HTML?

Open Graph meta tags go inside the section of your HTML document, alongside your other meta tags. They should appear before any closing tag. Place them after your standard meta description and title tag for clean organization.

Open Graph Generator

Generate OG meta tags and preview how your page looks when shared on Facebook, Twitter, and LinkedIn

Tags Generated

Preview Ready

Twitter Cards

Fields Filled

0/7

Open Graph Properties

OG Title *

Recommended: 40–60 characters

0/100

OG Description *

Recommended: 100–160 characters

0/200

Page URL *

OG Image URL *

Recommended: 1200×630px, JPEG/PNG, under 5MB

OG Type

Site Name

Locale

Include Twitter Card tags

Twitter Card Type

Quick Presets

Fill fields with sample data to see the generator in action

Social Preview

Image preview

example.com

Your Page Title

Your page description will appear here

Image preview

Your Page Title

Your page description will appear here

example.com

Image preview

Your Page Title

example.com

Your page description will appear here

Generated Meta Tags

0 meta tags generated

Validation Checklist

OG title provided

OG description provided

Page URL is valid

OG image URL provided

Title length optimal (40–60)

Description length optimal (100–160)

Twitter Card tags included

What is an Open Graph Generator?

An Open Graph generator is a tool that helps you create the meta tags needed to control how your webpage appears when shared on social media platforms like Facebook, Twitter, LinkedIn, and Pinterest. These tags are part of the Open Graph protocol, originally developed by Facebook in 2010, which turns any web page into a rich object in a social graph. Instead of leaving it up to social platforms to guess what title, description, and image to display, you specify exactly what you want using OG meta tags.

When someone shares a link on Facebook, for example, the platform looks for og:title, og:description, and og:image tags in your page's HTML. If these tags are missing, Facebook might pull random text or images from your page, resulting in an unappealing or confusing share preview. An Open Graph generator eliminates this problem by letting you craft the perfect preview before publishing.

How Does the Open Graph Generator Work?

This Open Graph generator works entirely in your browser with a simple input-output flow:

Fill in Your Properties: Enter your page title, description, URL, image URL, content type, site name, and locale into the input fields. Each field corresponds to a specific OG meta tag.
Live Preview Update: As you type, the social media preview cards on the right update in real time. You can switch between Facebook, Twitter, and LinkedIn previews to see exactly how your link will look on each platform.
Validation Feedback: The validation checklist monitors your inputs as you type. It checks for required fields, validates URL formats, and flags title or description lengths that fall outside recommended ranges.
Code Generation: The tool assembles properly formatted HTML meta tags from your inputs. If you enable the Twitter Card option, it also generates the corresponding twitter: meta tags alongside the OG tags.
Copy and Paste: Click the copy button to copy the generated meta tags to your clipboard. Paste them directly into the <head> section of your HTML document.

No data is sent to any server. All processing happens locally in your browser using JavaScript, making this tool completely private and safe for confidential pages.

Benefits of Using an Open Graph Generator

Control Your Appearance

Decide exactly what title, description, and image people see when they share your link. No more random text or missing images in share previews.

Higher Click-Through Rates

Well-crafted share previews with compelling titles and images get significantly more clicks than default or broken previews.

Preview Before Publishing

See how your page will look on Facebook, Twitter, and LinkedIn side by side before going live, so there are no surprises after publishing.

Save Time

Writing OG meta tags manually is error-prone and tedious. The generator handles formatting and escaping automatically, producing clean, valid HTML in seconds.

Avoid Common Mistakes

The validation checklist catches issues like missing required fields, titles that are too long or too short, and invalid URLs before they become problems.

Multi-Platform Support

Generate tags that work across Facebook, Twitter, LinkedIn, Pinterest, Slack, Discord, and any other platform that supports the Open Graph protocol.

How to Use This Open Graph Generator

Enter Your Title: Type the title you want displayed when your page is shared. Keep it between 40 and 60 characters for the best display across all platforms.
Write a Description: Add a concise summary of your page content. Aim for 100 to 160 characters. Anything longer gets truncated in most share previews.
Add Your Page URL: Enter the full canonical URL of the page (e.g., https://example.com/my-page). This should match your page's actual URL.
Set the Image URL: Provide the full URL to the image you want displayed in the share card. Use an image that is 1200×630 pixels for optimal display. Click the image button to preview it.
Choose a Type: Select the content type that best describes your page — website for most pages, article for blog posts, or other types as appropriate.
Set Site Name and Locale: Optionally add your website name and language locale. The site name appears above the title in some preview formats.
Enable Twitter Cards: Keep the Twitter Card toggle on to also generate twitter: meta tags. Choose between summary_large_image (recommended) and summary formats.
Review the Preview: Switch between Facebook, Twitter, and LinkedIn tabs to verify the preview looks correct on each platform.
Check Validation: Make sure all items in the validation checklist show green checkmarks before copying.
Copy the Code: Click "Copy" to copy just the meta tags, or "Copy Full" for a complete head snippet. Paste into your HTML's head section.

Practical Use Cases

Blog Post Publishing: Before hitting publish on a new blog article, generate its OG tags to ensure the share preview shows the right title, a compelling description, and a relevant featured image.
E-Commerce Products: Create optimized share cards for product pages so that when customers share products on social media, the preview shows the product image, name, and a brief description instead of generic page text.
Landing Page Launches: When launching a new landing page or marketing campaign, use the generator to craft share previews that maximize click-through rates from social media posts.
Content Management Systems: Developers building CMS themes can use the generated code as a template for dynamically outputting OG tags based on page content.
Agency Client Deliverables: Digital marketing agencies can include properly generated OG tags as part of their on-page SEO deliverables for client websites.
Social Media Campaigns: For link-heavy social campaigns, ensure every shared URL renders an attractive, on-brand preview card across all target platforms.
Newsletter Link Previews: Many email clients and newsletter tools render OG previews for shared links. Proper tags ensure consistency from email to social share.

Frequently Asked Questions

Fill in the fields for title, description, URL, image URL, type, site name, and locale. The tool generates valid Open Graph meta tags instantly and shows a live social media preview. Copy the generated HTML and paste it into your webpage's head section.

Open Graph is a protocol created by Facebook that allows web pages to become rich objects in social media platforms. When someone shares your link, Open Graph tags control what title, description, and image appear in the preview card. Without OG tags, platforms guess what to show, often resulting in poor or irrelevant previews that reduce click-through rates.

The recommended Open Graph image size is 1200x630 pixels with an aspect ratio of 1.91:1. This works well across Facebook, Twitter, LinkedIn, and most other platforms. Images should be under 5MB in JPEG or PNG format for reliable loading. Avoid very small images or non-standard aspect ratios as they may be cropped or appear blurry.

Yes. The generator outputs both Open Graph and Twitter Card meta tags. Twitter uses its own tags (twitter:card, twitter:title, etc.) but falls back to Open Graph tags if Twitter-specific ones are missing. Including both ensures the best preview on all platforms. You can choose between summary_large_image and summary card types.

Open Graph meta tags go inside the <head> section of your HTML document, alongside your other meta tags. They should appear before any closing </head> tag. Place them after your standard meta description and title tag for clean organization. The property attribute (not name) is used for OG tags: <meta property="og:title" content="...">.

Related Tools & Resources

Boost your SEO and content workflow with these free tools.

Meta Tag Generator Keyword Density Checker Text Formatter SEO Meta Tags Guide SEO Analyzer Open Graph Generator JSON Formatter