SEO Tools

Open Graph Tag Generator

Generate Open Graph and Twitter Card meta tags in your browser. Live Facebook, X, LinkedIn, and Discord previews, plus validation and copy-ready HTML.

Presets

Start from a typical page or build from scratch.

Core

These fields drive the title, description, canonical URL, og:url, og:type, and the Twitter Card title and description.

Title (37 chars)

Used for <title>, og:title, twitter:title. Aim for 50 to 60 characters.

Description (107 chars)

Used for meta description, og:description, twitter:description. 1 to 2 sentences.

Canonical URL

Absolute URL of this page. Used for canonical, og:url, and the preview hostname.

Site name

og:site_name. Shown on Discord embeds and some link previews.

Object type (og:type)

Choose the schema that matches the page. Type-specific fields appear below.

Locale

Format: language_TERRITORY. Examples: en_US, fr_FR, pt_BR.

Alternate locales

Comma-separated. One og:locale:alternate tag is emitted per value.

Image

Use an absolute https URL. The recommended size is 1200 by 630 (1.91:1 aspect).

Image URL

Image alt text

Set for og:image:alt and twitter:image:alt.

Width (px)

Height (px)

MIME type

Emit og:image:secure_url when the URL is https

Secondary image URL (optional)

Some platforms (Facebook, LinkedIn) let users pick from multiple images.

Secondary image alt

Twitter Card

Twitter falls back to Open Graph if Twitter-specific tags are missing, but explicit tags give you control over the card type and attribution.

Card type

Site @handle

Creator @handle

Extras

Optional but useful: Facebook app ID, theme color (drives Discord embed accent), and robots directives.

fb:app_id

fb:admins

theme-color

Discord uses this color for the embed accent stripe.

Robots

Live preview

zerosignuptools.com

Free Online Tools That Work Instantly

Browse fast, free online tools for text, code, SEO, security, and design. No signup, no login, no nonsense.

Previews are visual approximations. Each platform re-crops the image, hides or shows fields, and tweaks typography differently.

Validation

0 errors0 warnings

Looks good. All required fields are set and the values look valid.

Generated meta tags

<title>Free Online Tools That Work Instantly</title>
<meta name="title" content="Free Online Tools That Work Instantly" />
<meta name="description" content="Browse fast, free online tools for text, code, SEO, security, and design. No signup, no login, no nonsense." />
<link rel="canonical" href="https://zerosignuptools.com/" />
<meta name="theme-color" content="#05070b" />

<!-- Open Graph -->
<meta property="og:title" content="Free Online Tools That Work Instantly" />
<meta property="og:description" content="Browse fast, free online tools for text, code, SEO, security, and design. No signup, no login, no nonsense." />
<meta property="og:url" content="https://zerosignuptools.com/" />
<meta property="og:site_name" content="Zero Signup Tools" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://zerosignuptools.com/og-image.png" />
<meta property="og:image:secure_url" content="https://zerosignuptools.com/og-image.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Zero Signup Tools: free browser tools, no signup required." />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@zerosignuptools" />
<meta name="twitter:title" content="Free Online Tools That Work Instantly" />
<meta name="twitter:description" content="Browse fast, free online tools for text, code, SEO, security, and design. No signup, no login, no nonsense." />
<meta name="twitter:image" content="https://zerosignuptools.com/og-image.png" />
<meta name="twitter:image:alt" content="Zero Signup Tools: free browser tools, no signup required." />

Paste this block inside the page's <head> element. Tags are grouped with HTML comments for readability; you can keep or remove them.

Image and card sizing

Open Graph images render best at 1200 by 630 (aspect 1.91:1). The minimum for a large card on Facebook is 200 by 200.
Twitter summary_large_image renders at a 2:1 ratio. Use 1200 by 600 or 1200 by 630. Files larger than 5 MB are rejected.
Twitter summary renders the image as a small square. A 1:1 source at 800 by 800 looks crisp on high-density screens.
Discord reads og:image and uses theme-color for the accent stripe. There is no special Discord tag.
LinkedIn reads og:image and og:title. It does not show a description, so a strong title matters most there.

Common mistakes this tool prevents

Relative or missing og:url. The protocol requires an absolute URL.
Non-https image URLs combined with og:image:secure_url. Facebook will refuse.
Empty og:image:alt. Screen readers will skip the share card.
Locale formatted as en-US instead of en_US, which Facebook silently drops.
twitter:site or twitter:creator without the leading @ sign.
twitter:card set to player without a twitter:player URL, width, and height.
article:published_time stored as a non-ISO date string.

How to use

Pick a preset (Marketing site, Blog article, Personal profile, Video page, or Book) to start from a realistic example, or build from scratch.
Fill in the Core section: title, description, canonical URL, site name, og:type, and locale. The form expands type-specific fields when you change og:type.
Add the image URL with width, height, alt text, and MIME type. The recommended size is 1200 by 630 for og:image and summary_large_image.
Choose a Twitter Card type and add @handles for twitter:site and twitter:creator. Switch to Player or App for embedded media or mobile app cards.
Watch the live preview tabs (Facebook, X, LinkedIn, Discord) update as you type. Check the validation panel for missing fields and format issues.
Click Copy HTML to copy the full meta tag block. Paste it inside the <head> of your page or template.

About this tool

Open Graph Tag Generator builds the meta tags Facebook, X (Twitter), LinkedIn, Discord, Slack, and Pinterest read when your page is shared. It emits the full set: og:title, og:description, og:url, og:type, og:site_name, og:locale and og:locale:alternate, og:image with width, height, alt, MIME type, and an optional secondary image. The og:type selector switches the form to expose the protocol's object-specific properties: article (published_time, modified_time, author, section, tag), profile (first_name, last_name, username, gender), book (author, isbn, release_date, tag), video.* (og:video, og:video:secure_url, og:video:type, og:video:width, og:video:height, video:duration, video:release_date, video:tag), and music.* (music:duration, music:album, music:musician, music:release_date). On the Twitter side, the tool covers all four card types: summary, summary_large_image, app (with iPhone, iPad, and Google Play app IDs and deep links), and player (with twitter:player, width, and height). It also supports the extras most SEO checklists ask for: a theme-color tag (which drives Discord's embed accent), fb:app_id and fb:admins, and a robots directive selector with presets for noindex/nofollow, nosnippet, and max-image-preview:large. As you fill in the form, four live previews update on the right: a Facebook share card, an X summary or large-image card, a LinkedIn card, and a Discord embed using your theme-color. A validation panel flags missing required fields, malformed URLs, non-https image URLs combined with og:image:secure_url, non-ISO 8601 article timestamps, locale codes in the wrong format, Twitter handles missing an @ sign, and player cards with no width or height. The output is grouped with HTML comments and is ready to paste inside <head>. Everything runs in the browser; the values you type never leave your device. Useful for blog posts, product pages, video pages, podcast and music pages, author profile pages, books, and SaaS landing pages.

Free to use. Works in your browser. No signup, no login.

Related tools

Open Graph Tag Generator

How to use

About this tool

You may also like

Meta Tag Preview

Open Graph Image Generator

Schema Markup Generator

Canonical Tag Generator

Hreflang Tag Generator

UTM Builder

Open Graph Tag Generator