Open Graph Generator - Free OG & Twitter Card Tag Builder

Generate Open Graph and Twitter Card meta tags instantly. Paste the output into your <head> and control how your links look on Facebook, LinkedIn & X.

Title

Description

Page URL

Image URL

Site name

OG type

Twitter card

Open Graph + Twitter tags

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

<meta name="twitter:card" content="summary_large_image">

Generate Open Graph Tags in Seconds

Fill in your page details above and get the exact Open Graph meta tags you need to control how your link looks when someone shares it on Facebook, LinkedIn, Slack, or iMessage. No coding required, no sign-up, and nothing is sent to any server.

How to Use the Open Graph Generator

Enter your page title, description, and URL in the fields above.
Add your image URL (ideally 1200 × 630 px for best results on all platforms).
Choose a type - website for most pages, article for blog posts, product for shop items.
Hit Generate. The tool outputs a ready-to-paste HTML block with both OG and Twitter Card tags.
Copy the snippet and paste it inside the <head> of your page.

What an Open Graph Block Looks Like

Here is a concrete example. You enter these details:

Title: Best Running Shoes of 2025
Description: We tested 40 pairs so you don't have to. Here are the top picks for every budget.
URL: https://example.com/best-running-shoes
Image: https://example.com/images/running-shoes-og.jpg
Type: article

The generator produces this snippet - copy it straight into your <head>:

<!-- Open Graph -->
<meta property='og:title' content='Best Running Shoes of 2025' />
<meta property='og:description' content='We tested 40 pairs so you don&apos;t have to. Here are the top picks for every budget.' />
<meta property='og:url' content='https://example.com/best-running-shoes' />
<meta property='og:image' content='https://example.com/images/running-shoes-og.jpg' />
<meta property='og:type' content='article' />
<meta property='og:site_name' content='Example Site' />

<!-- Twitter Card -->
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:title' content='Best Running Shoes of 2025' />
<meta name='twitter:description' content='We tested 40 pairs so you don&apos;t have to.' />
<meta name='twitter:image' content='https://example.com/images/running-shoes-og.jpg' />

Share that URL on any major platform and they will pull in the title, description, and a large preview image automatically.

Quick Reference: The Key Open Graph Tags

Tag	What it controls	Tip
`og:title`	The bold headline in the link preview	Keep under 60 characters so it never gets cut off
`og:description`	The short summary beneath the title	Aim for 1-2 sentences, around 100-150 characters
`og:image`	The preview image shown in the card	1200 × 630 px JPEG or PNG; keep it under 1 MB for fast loading
`og:url`	The canonical URL of the page	Use the full URL including `https://`
`og:type`	The content category (`website`, `article`, `product`)	Use `website` when unsure; platforms treat untyped content as `website` anyway
`twitter:card`	The X/Twitter preview layout	`summary_large_image` shows a big image; `summary` shows a thumbnail

Paste these tags inside the <head> … </head> section of your HTML - before the closing </head> tag. If you use a CMS like WordPress, a plugin such as Yoast SEO or Rank Math will insert them for you, but you still control the values.

How to Add OG Tags in Code

If you manage your own templates, here is how to output the tags dynamically in two popular languages.

Python (Flask / Jinja2)

# In your Jinja2 template (e.g. base.html)
# Pass og_data dict from your Flask view
<meta property="og:title" content="{{ og_data.title }}">
<meta property="og:description" content="{{ og_data.description }}">
<meta property="og:image" content="{{ og_data.image }}">
<meta property="og:url" content="{{ request.url }}">
<meta property="og:type" content="{{ og_data.type | default('website') }}">

JavaScript (Next.js 14 App Router)

// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `https://example.com/blog/${params.slug}`,
      images: [{ url: post.ogImage, width: 1200, height: 630 }],
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.ogImage],
    },
  };
}

Next.js automatically renders these as <meta> tags in the <head> at build or request time.

How the Generator Works

Everything runs in your browser - no page data is sent to any server. When you click Generate, the tool takes your form inputs, wraps each value in the correct <meta> tag syntax defined by the Open Graph Protocol (ogp.me), and outputs the complete snippet. Twitter Card tags follow the separate X/Twitter Cards markup spec.

Social platforms like Facebook and LinkedIn send a small web crawler to your page URL when someone shares a link. That crawler reads the OG tags in your <head> and uses them to build the preview card - so the tags need to be in the server-rendered HTML, not injected by JavaScript after page load.

When to Use OG Tags - and When They Won't Help

Use Open Graph tags on: any public page you want to look good when shared - blog posts, product pages, landing pages, portfolio pieces, news articles.

You don't need them on: pages behind a login (crawlers can't reach them), internal admin dashboards, or pages blocked by robots.txt or a noindex directive.

OG tags vs. plain meta tags: the standard <meta name='description'> tag controls what search engines show. OG tags control what social platforms show. Both matter and they often carry different copy - your SEO description and your social teaser can be different lengths and tones.

Privacy: Your Data Stays in Your Browser

This tool runs entirely on your device. The page titles, descriptions, and image URLs you enter are never uploaded or stored anywhere. Close the tab and they are gone.

Good-looking social previews take about two minutes to set up - use the generator above, copy the output, and paste it into your page <head>.

Frequently asked questions

What is the difference between Open Graph tags and Twitter Card tags?+

Open Graph tags (og:*) are used by Facebook, LinkedIn, Slack, iMessage, and most other platforms. Twitter Card tags (twitter:*) are read by X (formerly Twitter). They serve the same purpose - controlling the link preview - but use different tag names. Most good og: generators output both sets at once, which is what this tool does.

What image size should I use for Open Graph?+

1200 x 630 pixels is the recommended size. It hits the ideal 1.91:1 aspect ratio that Facebook and most other platforms expect. Keep the file under 1 MB - JPEG works well for photos, PNG for graphics with text. Images smaller than 600 x 315 px may not display as a large card at all.

Is this tool free? Do I need to create an account?+

Completely free, no account required. Fill in the fields, click Generate, and copy the output - that's it.

I added OG tags but Facebook still shows the old preview. Why?+

Facebook caches link previews aggressively. Paste your URL into the Facebook Sharing Debugger and click 'Fetch new scrape information' to force a refresh. LinkedIn has a similar tool called the Post Inspector.

Does my data get stored or sent to a server when I use this tool?+

No. The generator runs entirely in your browser. Nothing you type - URLs, titles, descriptions - is ever uploaded or saved. Your data stays on your device.

What og:type value should I use?+

Use 'website' for most pages (homepages, landing pages, static content). Use 'article' for blog posts and news stories - it unlocks extra optional tags like og:article:published_time. Use 'product' for e-commerce pages. When in doubt, 'website' is safe and universally supported.

Do OG tags affect my Google search ranking?+

Not directly - Google does not use OG tags as a ranking signal. But a good preview image and title increase click-throughs when your link is shared on social media, which can drive more traffic. Your SEO title and description come from the standard and tags, which are separate.</div></details><details class="group bg-white open:bg-gray-50 dark:bg-gray-900 dark:open:bg-gray-900/60"><summary class="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-4 font-medium text-gray-900 dark:text-gray-100">Can I use the same OG tags on every page of my site?<span class="text-gray-500 dark:text-gray-400 transition group-open:rotate-45 group-open:text-brand-500">+</span></summary><div class="px-4 pb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-300">You can, but it's bad practice. When someone shares any page, they will all show the same generic title and image, which looks spammy and reduces clicks. Generate unique tags for each important page - at minimum: the homepage, every blog post, and any page you actively share on social media.</div></details></div></section></div><aside class="lg:sticky lg:top-20 lg:self-start"><h2 class="mb-3 text-base font-bold tracking-tight text-gray-900 dark:text-gray-50">Related tools</h2><ul class="space-y-2"><li><a class="group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-indigo-300 dark:hover:border-indigo-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60" href="/tools/meta-tag-generator"><span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/15 dark:text-indigo-300"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-3.5-3.5M8 11l2 2 3-3.5"></path></svg></span><span class="min-w-0"><span class="flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100"><span class="truncate">Meta Tag Generator</span><span aria-hidden="true" class="shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100">→</span></span><span class="mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400">Generate SEO meta tags for your page's <head>.</span></span></a></li><li><a class="group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-cyan-300 dark:hover:border-cyan-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60" href="/tools/robots-txt-generator"><span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cyan-50 text-cyan-600 dark:bg-cyan-500/15 dark:text-cyan-300"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-3.5-3.5M8 11l2 2 3-3.5"></path></svg></span><span class="min-w-0"><span class="flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100"><span class="truncate">Robots.txt Generator</span><span aria-hidden="true" class="shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100">→</span></span><span class="mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400">Build a robots.txt file with allow/disallow rules and your sitemap.</span></span></a></li><li><a class="group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-emerald-300 dark:hover:border-emerald-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60" href="/tools/utm-builder"><span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-300"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-3.5-3.5M8 11l2 2 3-3.5"></path></svg></span><span class="min-w-0"><span class="flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100"><span class="truncate">UTM Link Builder</span><span aria-hidden="true" class="shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100">→</span></span><span class="mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400">Build campaign tracking URLs with UTM parameters.</span></span></a></li><li><a class="group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-indigo-300 dark:hover:border-indigo-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60" href="/tools/json-ld-generator"><span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/15 dark:text-indigo-300"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-3.5-3.5M8 11l2 2 3-3.5"></path></svg></span><span class="min-w-0"><span class="flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100"><span class="truncate">JSON-LD Schema Generator</span><span aria-hidden="true" class="shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100">→</span></span><span class="mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400">Generate JSON-LD structured data for Organization, Article, Product, FAQ, Breadcrumb and more.</span></span></a></li><li><a class="group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-teal-300 dark:hover:border-teal-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60" href="/tools/xml-sitemap-generator"><span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-teal-50 text-teal-600 dark:bg-teal-500/15 dark:text-teal-300"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-3.5-3.5M8 11l2 2 3-3.5"></path></svg></span><span class="min-w-0"><span class="flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100"><span class="truncate">XML Sitemap Generator</span><span aria-hidden="true" class="shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100">→</span></span><span class="mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400">Turn a list of URLs into a valid sitemap.xml with lastmod, changefreq and priority.</span></span></a></li><li><a class="group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-blue-300 dark:hover:border-blue-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60" href="/tools/hreflang-generator"><span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-500/15 dark:text-blue-300"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-3.5-3.5M8 11l2 2 3-3.5"></path></svg></span><span class="min-w-0"><span class="flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100"><span class="truncate">Hreflang Tag Generator</span><span aria-hidden="true" class="shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100">→</span></span><span class="mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400">Generate hreflang alternate link tags for multilingual and multi-region pages.</span></span></a></li><li><a class="group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-cyan-300 dark:hover:border-cyan-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60" href="/tools/keyword-density-checker"><span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cyan-50 text-cyan-600 dark:bg-cyan-500/15 dark:text-cyan-300"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m21 21-3.5-3.5M8 11l2 2 3-3.5"></path></svg></span><span class="min-w-0"><span class="flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100"><span class="truncate">Keyword Density Checker</span><span aria-hidden="true" class="shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100">→</span></span><span class="mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400">Analyse text for keyword and phrase density — word counts and percentages.</span></span></a></li><li><a class="group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-blue-300 dark:hover:border-blue-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60" href="/tools/json-formatter"><span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-500/15 dark:text-blue-300"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1"></path><path d="M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-1"></path></svg></span><span class="min-w-0"><span class="flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100"><span class="truncate">JSON Formatter</span><span aria-hidden="true" class="shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100">→</span></span><span class="mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400">Beautify, minify, and validate JSON.</span></span></a></li><li><a class="group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-emerald-300 dark:hover:border-emerald-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60" href="/tools/json-beautifier"><span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-300"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1"></path><path d="M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-1"></path></svg></span><span class="min-w-0"><span class="flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100"><span class="truncate">JSON Beautifier</span><span aria-hidden="true" class="shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100">→</span></span><span class="mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400">Beautify, minify, and validate JSON.</span></span></a></li><li><a class="group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-emerald-300 dark:hover:border-emerald-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60" href="/tools/json-minifier"><span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-300"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1"></path><path d="M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-1"></path></svg></span><span class="min-w-0"><span class="flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100"><span class="truncate">JSON Minifier</span><span aria-hidden="true" class="shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100">→</span></span><span class="mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400">Beautify, minify, and validate JSON.</span></span></a></li></ul></aside></div><script type="application/ld+json">[{"url":"/tools/open-graph-generator","name":"Open Graph Generator - Free OG & Twitter Card Tag Builder","@type":"SoftwareApplication","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"@context":"https://schema.org","description":"Generate Open Graph and Twitter Card meta tags instantly. Paste the output into your <head> and control how your links look on Facebook, LinkedIn & X.","applicationCategory":"DeveloperApplication"},{"@type":"BreadcrumbList","@context":"https://schema.org","itemListElement":[{"item":"https://techtoolexpert.com/","name":"Home","@type":"ListItem","position":1},{"item":"https://techtoolexpert.com/tools/open-graph-generator","name":"Open Graph Generator - Free OG & Twitter Card Tag Builder","@type":"ListItem","position":2}]},{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is the difference between Open Graph tags and Twitter Card tags?","acceptedAnswer":{"@type":"Answer","text":"Open Graph tags (og:*) are used by Facebook, LinkedIn, Slack, iMessage, and most other platforms. Twitter Card tags (twitter:*) are read by X (formerly Twitter). They serve the same purpose - controlling the link preview - but use different tag names. Most good og: generators output both sets at once, which is what this tool does."}},{"@type":"Question","name":"What image size should I use for Open Graph?","acceptedAnswer":{"@type":"Answer","text":"1200 x 630 pixels is the recommended size. It hits the ideal 1.91:1 aspect ratio that Facebook and most other platforms expect. Keep the file under 1 MB - JPEG works well for photos, PNG for graphics with text. Images smaller than 600 x 315 px may not display as a large card at all."}},{"@type":"Question","name":"Is this tool free? Do I need to create an account?","acceptedAnswer":{"@type":"Answer","text":"Completely free, no account required. Fill in the fields, click Generate, and copy the output - that's it."}},{"@type":"Question","name":"I added OG tags but Facebook still shows the old preview. Why?","acceptedAnswer":{"@type":"Answer","text":"Facebook caches link previews aggressively. Paste your URL into the <a href='https://developers.facebook.com/tools/debug/' rel='noopener' target='_blank'>Facebook Sharing Debugger</a> and click 'Fetch new scrape information' to force a refresh. LinkedIn has a similar tool called the Post Inspector."}},{"@type":"Question","name":"Does my data get stored or sent to a server when I use this tool?","acceptedAnswer":{"@type":"Answer","text":"No. The generator runs entirely in your browser. Nothing you type - URLs, titles, descriptions - is ever uploaded or saved. Your data stays on your device."}},{"@type":"Question","name":"What og:type value should I use?","acceptedAnswer":{"@type":"Answer","text":"Use 'website' for most pages (homepages, landing pages, static content). Use 'article' for blog posts and news stories - it unlocks extra optional tags like og:article:published_time. Use 'product' for e-commerce pages. When in doubt, 'website' is safe and universally supported."}},{"@type":"Question","name":"Do OG tags affect my Google search ranking?","acceptedAnswer":{"@type":"Answer","text":"Not directly - Google does not use OG tags as a ranking signal. But a good preview image and title increase click-throughs when your link is shared on social media, which can drive more traffic. Your SEO title and description come from the standard <meta name='description'> and <title> tags, which are separate."}},{"@type":"Question","name":"Can I use the same OG tags on every page of my site?","acceptedAnswer":{"@type":"Answer","text":"You can, but it's bad practice. When someone shares any page, they will all show the same generic title and image, which looks spammy and reduces clicks. Generate unique tags for each important page - at minimum: the homepage, every blog post, and any page you actively share on social media."}}]}]</script></main></div><footer class="mt-16 border-t border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950"><div class="mx-auto w-full max-w-[1800px] px-4 py-12 sm:px-6 lg:px-8"><div class="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-6"><nav aria-label="JSON Tools tools"><h2 class="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100"><a class="transition hover:text-brand-600 dark:hover:text-brand-400" href="/tools/category/json">JSON Tools</a></h2><ul class="space-y-2"><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/json-formatter">JSON Formatter</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/json-beautifier">JSON Beautifier</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/json-minifier">JSON Minifier</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/json-validator">JSON Validator</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/json-viewer">JSON Viewer</a></li><li><a class="text-sm font-medium text-brand-600 transition hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300" href="/tools/category/json">+1 more →</a></li></ul></nav><nav aria-label="Converters tools"><h2 class="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100"><a class="transition hover:text-brand-600 dark:hover:text-brand-400" href="/tools/category/converters">Converters</a></h2><ul class="space-y-2"><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/json-to-yaml">JSON to YAML</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/yaml-to-json">YAML to JSON</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/json-to-csv">JSON to CSV</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/csv-to-json">CSV to JSON</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/number-base-converter">Number Base Converter</a></li><li><a class="text-sm font-medium text-brand-600 transition hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300" href="/tools/category/converters">+34 more →</a></li></ul></nav><nav aria-label="Encoders & Decoders tools"><h2 class="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100"><a class="transition hover:text-brand-600 dark:hover:text-brand-400" href="/tools/category/encoders">Encoders & Decoders</a></h2><ul class="space-y-2"><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/base64-encode-decode">Base64 Encode / Decode</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/url-encode-decode">URL Encode / Decode</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/html-encode-decode">HTML Encode / Decode</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/jwt-decoder">JWT Decoder</a></li></ul></nav><nav aria-label="Generators tools"><h2 class="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100"><a class="transition hover:text-brand-600 dark:hover:text-brand-400" href="/tools/category/generators">Generators</a></h2><ul class="space-y-2"><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/uuid-generator">UUID Generator</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/password-generator">Password Generator</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/hash-generator">Hash Generator</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/md5-hash-generator">MD5 Hash Generator</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/sha256-hash-generator">SHA-256 Hash Generator</a></li><li><a class="text-sm font-medium text-brand-600 transition hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300" href="/tools/category/generators">+1 more →</a></li></ul></nav><nav aria-label="Text & Web tools"><h2 class="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100"><a class="transition hover:text-brand-600 dark:hover:text-brand-400" href="/tools/category/text">Text & Web</a></h2><ul class="space-y-2"><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/case-converter">Case Converter</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/slug-generator">Slug Generator</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/text-diff">Text Diff Checker</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/regex-tester">Regex Tester</a></li></ul></nav><nav aria-label="Code Formatters tools"><h2 class="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100"><a class="transition hover:text-brand-600 dark:hover:text-brand-400" href="/tools/category/formatters">Code Formatters</a></h2><ul class="space-y-2"><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/sql-formatter">SQL Formatter</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/xml-formatter">XML Formatter</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/markdown-preview">Markdown Preview</a></li><li><a class="text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400" href="/tools/cron-expression-parser">Cron Expression Parser</a></li></ul></nav></div><div class="mt-10 flex flex-col items-start justify-between gap-4 border-t border-gray-200 pt-6 text-sm text-gray-500 sm:flex-row sm:items-center dark:border-gray-800 dark:text-gray-400"><p><span class="font-semibold text-gray-700 dark:text-gray-200">TechToolExpert</span> - Free online tools & calculators that run in your browser. All tools run in your browser.</p><nav aria-label="Footer" class="flex flex-wrap gap-4"><a class="transition hover:text-brand-600 dark:hover:text-brand-400" href="/about">About</a><a class="transition hover:text-brand-600 dark:hover:text-brand-400" href="/contact">Contact</a><a class="transition hover:text-brand-600 dark:hover:text-brand-400" href="/privacy-policy">Privacy Policy</a><a class="transition hover:text-brand-600 dark:hover:text-brand-400" href="/terms-and-conditions">Terms & Conditions</a></nav></div><p class="mt-4 text-xs text-gray-500 dark:text-gray-400">© 2026 TechToolExpert. All rights reserved.</p></div></footer><script src="/_next/static/chunks/2s8imv4bwjpu2.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[45745,[\"/_next/static/chunks/44xfvks_t464n.js\",\"/_next/static/chunks/1eufoyx5cd10d.js\"],\"default\"]\n3:I[39756,[\"/_next/static/chunks/05-c3ty_6dwfk.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"default\"]\n4:I[37457,[\"/_next/static/chunks/05-c3ty_6dwfk.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"default\"]\n5:I[22016,[\"/_next/static/chunks/44xfvks_t464n.js\",\"/_next/static/chunks/1eufoyx5cd10d.js\",\"/_next/static/chunks/3qq7n1ywmjqi-.js\",\"/_next/static/chunks/07i02wsjs3osz.js\"],\"\"]\n15:I[68027,[\"/_next/static/chunks/44xfvks_t464n.js\",\"/_next/static/chunks/1eufoyx5cd10d.js\"],\"default\",1]\n18:I[54576,[\"/_next/static/chunks/44xfvks_t464n.js\",\"/_next/static/chunks/1eufoyx5cd10d.js\"],\"GoogleAnalytics\"]\n1a:I[97367,[\"/_next/static/chunks/05-c3ty_6dwfk.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"OutletBoundary\"]\n1b:\"$Sreact.suspense\"\n1e:I[97367,[\"/_next/static/chunks/05-c3ty_6dwfk.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"ViewportBoundary\"]\n20:I[97367,[\"/_next/static/chunks/05-c3ty_6dwfk.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/1emitry_y4ln7.css\",\"style\"]\n:HL[\"/_next/static/chunks/2t86kq_cvsk9d.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.0r6juujl39pe6.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"tools\",\"open-graph-generator\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"tools\",{\"children\":[[\"slug\",\"open-graph-generator\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/1emitry_y4ln7.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2t86kq_cvsk9d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/44xfvks_t464n.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/1eufoyx5cd10d.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"data-scroll-behavior\":\"smooth\",\"className\":\"inter_7b064e0d-module__MOT0tq__variable geist_mono_1bf8cbf6-module__FlyLvG__variable h-full antialiased\",\"children\":[[\"$\",\"head\",null,{\"children\":[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"(function(){try{var t=localStorage.getItem('theme');if(t==='dark'||(!t\u0026\u0026window.matchMedia('(prefers-color-scheme: dark)').matches)){document.documentElement.classList.add('dark');}}catch(e){}})();\"}}]}],[\"$\",\"body\",null,{\"className\":\"flex min-h-full flex-col bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"footer\",null,{\"className\":\"mt-16 border-t border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto w-full max-w-[1800px] px-4 py-12 sm:px-6 lg:px-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-6\",\"children\":[[\"$\",\"nav\",\"json\",{\"aria-label\":\"JSON Tools tools\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100\",\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/category/json\",\"className\":\"transition hover:text-brand-600 dark:hover:text-brand-400\",\"children\":\"JSON Tools\"}]}],[\"$\",\"ul\",null,{\"className\":\"space-y-2\",\"children\":[[[\"$\",\"li\",\"json-formatter\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/json-formatter\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"JSON Formatter\"}]}],[\"$\",\"li\",\"json-beautifier\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/json-beautifier\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"JSON Beautifier\"}]}],[\"$\",\"li\",\"json-minifier\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/json-minifier\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"JSON Minifier\"}]}],[\"$\",\"li\",\"json-validator\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/json-validator\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"JSON Validator\"}]}],\"$L6\"],\"$L7\"]}]]}],\"$L8\",\"$L9\",\"$La\",\"$Lb\",\"$Lc\"]}],\"$Ld\",\"$Le\"]}]}]]}],\"$Lf\"]}]]}],{\"children\":[\"$L10\",{\"children\":[\"$L11\",{\"children\":[\"$L12\",{},null,false,null]},null,false,\"$@13\"]},null,false,\"$@13\"]},null,false,null],\"$L14\",false]],\"m\":\"$undefined\",\"G\":[\"$15\",[\"$L16\",\"$L17\"]],\"S\":false,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"H-athLJYZuUuE-et31J7O\"}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"li\",\"json-viewer\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/json-viewer\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"JSON Viewer\"}]}]\n7:[\"$\",\"li\",null,{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/category/json\",\"className\":\"text-sm font-medium text-brand-600 transition hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300\",\"children\":[\"+\",1,\" more →\"]}]}]\n"])</script><script>self.__next_f.push([1,"8:[\"$\",\"nav\",\"converters\",{\"aria-label\":\"Converters tools\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100\",\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/category/converters\",\"className\":\"transition hover:text-brand-600 dark:hover:text-brand-400\",\"children\":\"Converters\"}]}],[\"$\",\"ul\",null,{\"className\":\"space-y-2\",\"children\":[[[\"$\",\"li\",\"json-to-yaml\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/json-to-yaml\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"JSON to YAML\"}]}],[\"$\",\"li\",\"yaml-to-json\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/yaml-to-json\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"YAML to JSON\"}]}],[\"$\",\"li\",\"json-to-csv\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/json-to-csv\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"JSON to CSV\"}]}],[\"$\",\"li\",\"csv-to-json\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/csv-to-json\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"CSV to JSON\"}]}],[\"$\",\"li\",\"number-base-converter\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/number-base-converter\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"Number Base Converter\"}]}]],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/category/converters\",\"className\":\"text-sm font-medium text-brand-600 transition hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300\",\"children\":[\"+\",34,\" more →\"]}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"9:[\"$\",\"nav\",\"encoders\",{\"aria-label\":\"Encoders \u0026 Decoders tools\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100\",\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/category/encoders\",\"className\":\"transition hover:text-brand-600 dark:hover:text-brand-400\",\"children\":\"Encoders \u0026 Decoders\"}]}],[\"$\",\"ul\",null,{\"className\":\"space-y-2\",\"children\":[[[\"$\",\"li\",\"base64-encode-decode\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/base64-encode-decode\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"Base64 Encode / Decode\"}]}],[\"$\",\"li\",\"url-encode-decode\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/url-encode-decode\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"URL Encode / Decode\"}]}],[\"$\",\"li\",\"html-encode-decode\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/html-encode-decode\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"HTML Encode / Decode\"}]}],[\"$\",\"li\",\"jwt-decoder\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/jwt-decoder\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"JWT Decoder\"}]}]],false]}]]}]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"nav\",\"generators\",{\"aria-label\":\"Generators tools\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100\",\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/category/generators\",\"className\":\"transition hover:text-brand-600 dark:hover:text-brand-400\",\"children\":\"Generators\"}]}],[\"$\",\"ul\",null,{\"className\":\"space-y-2\",\"children\":[[[\"$\",\"li\",\"uuid-generator\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/uuid-generator\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"UUID Generator\"}]}],[\"$\",\"li\",\"password-generator\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/password-generator\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"Password Generator\"}]}],[\"$\",\"li\",\"hash-generator\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/hash-generator\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"Hash Generator\"}]}],[\"$\",\"li\",\"md5-hash-generator\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/md5-hash-generator\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"MD5 Hash Generator\"}]}],[\"$\",\"li\",\"sha256-hash-generator\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/sha256-hash-generator\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"SHA-256 Hash Generator\"}]}]],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/category/generators\",\"className\":\"text-sm font-medium text-brand-600 transition hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300\",\"children\":[\"+\",1,\" more →\"]}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"b:[\"$\",\"nav\",\"text\",{\"aria-label\":\"Text \u0026 Web tools\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100\",\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/category/text\",\"className\":\"transition hover:text-brand-600 dark:hover:text-brand-400\",\"children\":\"Text \u0026 Web\"}]}],[\"$\",\"ul\",null,{\"className\":\"space-y-2\",\"children\":[[[\"$\",\"li\",\"case-converter\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/case-converter\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"Case Converter\"}]}],[\"$\",\"li\",\"slug-generator\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/slug-generator\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"Slug Generator\"}]}],[\"$\",\"li\",\"text-diff\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/text-diff\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"Text Diff Checker\"}]}],[\"$\",\"li\",\"regex-tester\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/regex-tester\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"Regex Tester\"}]}]],false]}]]}]\nc:[\"$\",\"nav\",\"formatters\",{\"aria-label\":\"Code Formatters tools\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100\",\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/category/formatters\",\"className\":\"transition hover:text-brand-600 dark:hover:text-brand-400\",\"children\":\"Code Formatters\"}]}],[\"$\",\"ul\",null,{\"className\":\"space-y-2\",\"children\":[[[\"$\",\"li\",\"sql-formatter\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/sql-formatter\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"SQL Formatter\"}]}],[\"$\",\"li\",\"xml-formatter\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/xml-formatter\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"XML Formatter\"}]}],[\"$\",\"li\",\"markdown-preview\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/markdown-preview\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"Markdown Preview\"}]}],[\"$\",\"li\",\"cron-expression-parser\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/cron-expression-parser\",\"className\":\"text-sm text-gray-500 transition hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400\",\"children\":\"Cron Expression Parser\"}]}]],false]}]]}]\nd:[\"$\",\"div\",null,{\"className\":\"mt-10 flex flex-col items-start justify-between gap-4 border-t border-gray-200 pt-6 text-sm text-gray-500 sm:flex-row sm:items-center dark:border-gray-800 dark:text-gray-400\",\"children\":[[\"$\",\"p\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"font-semibold text-gray-700 dark:text-gray-200\",\"children\":\"TechToolExpert\"}],\" - \",\"Free online tools \u0026 calculators that run in your browser\",\". All tools run in your browser.\"]}],[\"$\",\"nav\",null,{\"aria-label\":\"Footer\",\"className\":\"flex flex-wrap gap-4\",\"children\":[[\"$\",\"$L5\",\"/about\",{\"href\":\"/about\",\"className\":\"transition hover:text-brand-600 dark:hover:text-brand-400\",\"children\":\"About\"}],[\"$\",\"$L5\",\"/contact\",{\"href\":\"/contact\",\"className\":\"transition hover:text-brand-600 dark:hover:text-brand-400\",\"children\":\"Contact\"}],[\"$\",\"$L5\",\"/privacy-policy\",{\"href\":\"/privacy-policy\",\"className\":\"transition hover:text-brand-600 dark:hover:text-brand-400\",\"children\":\"Privacy Policy\"}],[\"$\",\"$L5\",\"/terms-and-conditions\",{\"href\":\"/terms-and-conditions\",\"className\":\"transition hover:text-brand-600 dark:hover:text-brand-400\",\"children\":\"Terms \u0026 Conditions\"}]]}]]}]\ne:[\"$\",\"p\",null,{\"className\":\"mt-4 text-xs text-gray-500 dark:text-gray-400\",\"children\":[\"© \",2026,\" \",\"TechToolExpert\",\". All rights reserved.\"]}]\nf:[\"$\",\"$L18\",null,{\"gaId\":\"G-P5RDCC9E91\"}]\n10:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"error"])</script><script>self.__next_f.push([1,"Styles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n11:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n12:[\"$\",\"$1\",\"c\",{\"children\":[\"$L19\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/3qq7n1ywmjqi-.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/07i02wsjs3osz.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L1a\",null,{\"children\":[\"$\",\"$1b\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@1c\"}]}]]}]\n1d:[]\n13:\"$W1d\"\n14:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L1e\",null,{\"children\":\"$L1f\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L20\",null,{\"children\":[\"$\",\"$1b\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L21\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n16:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/1emitry_y4ln7.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n17:[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2t86kq_cvsk9d.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n1f:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"22:I[27201,[\"/_next/static/chunks/05-c3ty_6dwfk.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"IconMark\"]\n1c:null\n"])</script><script>self.__next_f.push([1,"21:[[\"$\",\"title\",\"0\",{\"children\":\"Open Graph Generator - Free OG \u0026 Twitter Card Tags | TechToolExpert\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Generate Open Graph and Twitter Card meta tags instantly. Paste the output into your \u003chead\u003e and control how your links look on Facebook, LinkedIn \u0026 X.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"application-name\",\"content\":\"TechToolExpert\"}],[\"$\",\"link\",\"3\",{\"rel\":\"author\",\"href\":\"https://techtoolexpert.com\"}],[\"$\",\"meta\",\"4\",{\"name\":\"author\",\"content\":\"TechToolExpert\"}],[\"$\",\"link\",\"5\",{\"rel\":\"manifest\",\"href\":\"/manifest.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"online tools,free online tools,online calculators,browser tools,developer tools,json formatter,base64 encode decode,jwt decoder,hash generator,financial calculators,sip calculator,emi calculator,income tax calculator,bmi calculator,percentage calculator,age calculator\"}],[\"$\",\"meta\",\"7\",{\"name\":\"creator\",\"content\":\"TechToolExpert\"}],[\"$\",\"meta\",\"8\",{\"name\":\"publisher\",\"content\":\"TechToolExpert\"}],[\"$\",\"meta\",\"9\",{\"name\":\"category\",\"content\":\"technology\"}],[\"$\",\"link\",\"10\",{\"rel\":\"canonical\",\"href\":\"https://techtoolexpert.com/tools/open-graph-generator\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:title\",\"content\":\"Open Graph Generator - Free OG \u0026 Twitter Card Tags\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:description\",\"content\":\"Generate Open Graph and Twitter Card meta tags instantly. Paste the output into your \u003chead\u003e and control how your links look on Facebook, LinkedIn \u0026 X.\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:url\",\"content\":\"https://techtoolexpert.com/tools/open-graph-generator\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:site_name\",\"content\":\"TechToolExpert\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"Open Graph Generator - Free OG \u0026 Twitter Card Tags\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"Generate Open Graph and Twitter Card meta tags instantly. Paste the output into your \u003chead\u003e and control how your links look on Facebook, LinkedIn \u0026 X.\"}],[\"$\",\"link\",\"20\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.21gntqinodqg9.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"21\",{\"rel\":\"icon\",\"href\":\"/icon.png?icon.2e5jj3-_43626.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"22\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon?6c5e0510c1aa0e9f\",\"alt\":\"$undefined\",\"type\":\"image/png\",\"sizes\":\"180x180\"}],[\"$\",\"$L22\",\"23\",{}]]\n"])</script><script>self.__next_f.push([1,"23:I[36606,[\"/_next/static/chunks/44xfvks_t464n.js\",\"/_next/static/chunks/1eufoyx5cd10d.js\",\"/_next/static/chunks/3qq7n1ywmjqi-.js\",\"/_next/static/chunks/07i02wsjs3osz.js\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"main\",null,{\"className\":\"w-full pb-4\",\"children\":[[\"$\",\"section\",null,{\"className\":\"relative overflow-hidden border-b border-gray-200 bg-gradient-to-b from-brand-50/80 via-white to-white dark:border-gray-800 dark:from-brand-950/25 dark:via-gray-950 dark:to-gray-950\",\"children\":[[\"$\",\"div\",null,{\"aria-hidden\":true,\"className\":\"pointer-events-none absolute inset-0 overflow-hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -top-24 -left-20 h-72 w-72 rounded-full bg-brand-300/30 blur-3xl dark:bg-brand-700/20\"}],[\"$\",\"div\",null,{\"className\":\"absolute -top-16 right-0 h-72 w-72 rounded-full bg-violet-300/25 blur-3xl dark:bg-violet-700/15\"}],null,[[\"$\",\"span\",\"0\",{\"className\":\"absolute left-[6%] top-[38%] h-2.5 w-2.5 rounded-full bg-brand-400/40 animate-float-a motion-reduce:animate-none\",\"style\":\"$undefined\"}],[\"$\",\"span\",\"1\",{\"className\":\"absolute right-[10%] top-[26%] h-3 w-3 rotate-12 rounded-md bg-violet-400/35 animate-float-b motion-reduce:animate-none\",\"style\":{\"animationDelay\":\"0.5s\"}}],[\"$\",\"span\",\"2\",{\"className\":\"absolute right-[24%] bottom-[24%] h-2 w-2 rounded-full bg-emerald-400/40 animate-float-c motion-reduce:animate-none\",\"style\":{\"animationDelay\":\"1s\"}}],[\"$\",\"span\",\"3\",{\"className\":\"absolute left-[20%] bottom-[22%] h-2 w-2 rounded-full bg-amber-400/40 animate-float-a motion-reduce:animate-none\",\"style\":{\"animationDelay\":\"1.4s\"}}]]]}],[\"$\",\"div\",null,{\"className\":\"relative mx-auto w-full max-w-[1800px] px-4 sm:px-6 lg:px-8 py-4 sm:py-5\",\"children\":[[\"$\",\"nav\",null,{\"className\":\"text-[13px] text-gray-500 dark:text-gray-400\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"className\":\"transition hover:text-brand-600\",\"children\":\"Home\"}],[\"$\",\"span\",null,{\"className\":\"mx-1.5 text-gray-300 dark:text-gray-600\",\"children\":\"/\"}],[\"$\",\"$L5\",null,{\"href\":\"/tools\",\"className\":\"transition hover:text-brand-600\",\"children\":\"Tools\"}],[[\"$\",\"span\",null,{\"className\":\"mx-1.5 text-gray-300 dark:text-gray-600\",\"children\":\"/\"}],[\"$\",\"$L5\",null,{\"href\":\"/tools/category/developer-tools\",\"className\":\"transition hover:text-brand-600\",\"children\":\"Developer Tools\"}]],[[\"$\",\"span\",null,{\"className\":\"mx-1.5 text-gray-300 dark:text-gray-600\",\"children\":\"/\"}],[\"$\",\"$L5\",null,{\"href\":\"/tools/category/seo-tools\",\"className\":\"transition hover:text-brand-600\",\"children\":\"SEO Tools\"}]],[\"$\",\"span\",null,{\"className\":\"mx-1.5 text-gray-300 dark:text-gray-600\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-700 dark:text-gray-300\",\"children\":\"Open Graph Generator - Free OG \u0026 Twitter Card Tag Builder\"}]]}],[\"$\",\"div\",null,{\"className\":\"mt-2 flex items-center gap-2.5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"hidden h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 text-white shadow-sm shadow-brand-500/20 ring-1 ring-inset ring-white/20 sm:inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-5 w-5\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.8,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"circle\",null,{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"7\"}],[\"$\",\"path\",null,{\"d\":\"m21 21-3.5-3.5M8 11l2 2 3-3.5\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-lg font-bold tracking-tight text-gray-900 sm:text-xl dark:text-gray-50\",\"children\":\"Open Graph Generator - Free OG \u0026 Twitter Card Tag Builder\"}],[\"$\",\"p\",null,{\"className\":\"mt-0.5 max-w-2xl truncate text-[13px] leading-snug text-gray-600 sm:text-sm dark:text-gray-300\",\"children\":\"Generate Open Graph and Twitter Card meta tags instantly. Paste the output into your \u003chead\u003e and control how your links look on Facebook, LinkedIn \u0026 X.\"}]]}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mx-auto w-full max-w-[1800px] px-4 sm:px-6 lg:px-8 pt-4 sm:pt-5\",\"children\":[\"$\",\"$L23\",null,{\"toolType\":\"open_graph_generator\",\"config\":{},\"slug\":\"open-graph-generator\"}]}],[\"$\",\"div\",null,{\"className\":\"mx-auto mt-14 grid w-full max-w-6xl gap-x-12 gap-y-12 px-4 sm:px-6 lg:px-8 lg:grid-cols-[minmax(0,1fr)_320px]\",\"children\":[\"$L24\",\"$L25\"]}],\"$L26\"]}]\n"])</script><script>self.__next_f.push([1,"27:T1edd,"])</script><script>self.__next_f.push([1,"\u003ch2\u003eGenerate Open Graph Tags in Seconds\u003c/h2\u003e\n\u003cp\u003eFill in your page details above and get the exact \u003cstrong\u003eOpen Graph meta tags\u003c/strong\u003e you need to control how your link looks when someone shares it on Facebook, LinkedIn, Slack, or iMessage. No coding required, no sign-up, and nothing is sent to any server.\u003c/p\u003e\n\n\u003ch2\u003eHow to Use the Open Graph Generator\u003c/h2\u003e\n\u003col\u003e\n \u003cli\u003eEnter your page \u003cstrong\u003etitle\u003c/strong\u003e, \u003cstrong\u003edescription\u003c/strong\u003e, and \u003cstrong\u003eURL\u003c/strong\u003e in the fields above.\u003c/li\u003e\n \u003cli\u003eAdd your \u003cstrong\u003eimage URL\u003c/strong\u003e (ideally 1200 \u0026times; 630 px for best results on all platforms).\u003c/li\u003e\n \u003cli\u003eChoose a \u003cstrong\u003etype\u003c/strong\u003e - \u003ccode\u003ewebsite\u003c/code\u003e for most pages, \u003ccode\u003earticle\u003c/code\u003e for blog posts, \u003ccode\u003eproduct\u003c/code\u003e for shop items.\u003c/li\u003e\n \u003cli\u003eHit \u003cstrong\u003eGenerate\u003c/strong\u003e. The tool outputs a ready-to-paste HTML block with both OG and Twitter Card tags.\u003c/li\u003e\n \u003cli\u003eCopy the snippet and paste it inside the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e of your page.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch2\u003eWhat an Open Graph Block Looks Like\u003c/h2\u003e\n\u003cp\u003eHere is a concrete example. You enter these details:\u003c/p\u003e\n\u003cul\u003e\n \u003cli\u003e\u003cstrong\u003eTitle:\u003c/strong\u003e Best Running Shoes of 2025\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003eDescription:\u003c/strong\u003e We tested 40 pairs so you don\u0026apos;t have to. Here are the top picks for every budget.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003eURL:\u003c/strong\u003e https://example.com/best-running-shoes\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003eImage:\u003c/strong\u003e https://example.com/images/running-shoes-og.jpg\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003eType:\u003c/strong\u003e article\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eThe generator produces this snippet - copy it straight into your \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e:\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;!-- Open Graph --\u0026gt;\n\u0026lt;meta property='og:title' content='Best Running Shoes of 2025' /\u0026gt;\n\u0026lt;meta property='og:description' content='We tested 40 pairs so you don\u0026amp;apos;t have to. Here are the top picks for every budget.' /\u0026gt;\n\u0026lt;meta property='og:url' content='https://example.com/best-running-shoes' /\u0026gt;\n\u0026lt;meta property='og:image' content='https://example.com/images/running-shoes-og.jpg' /\u0026gt;\n\u0026lt;meta property='og:type' content='article' /\u0026gt;\n\u0026lt;meta property='og:site_name' content='Example Site' /\u0026gt;\n\n\u0026lt;!-- Twitter Card --\u0026gt;\n\u0026lt;meta name='twitter:card' content='summary_large_image' /\u0026gt;\n\u0026lt;meta name='twitter:title' content='Best Running Shoes of 2025' /\u0026gt;\n\u0026lt;meta name='twitter:description' content='We tested 40 pairs so you don\u0026amp;apos;t have to.' /\u0026gt;\n\u0026lt;meta name='twitter:image' content='https://example.com/images/running-shoes-og.jpg' /\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eShare that URL on any major platform and they will pull in the title, description, and a large preview image automatically.\u003c/p\u003e\n\n\u003ch2\u003eQuick Reference: The Key Open Graph Tags\u003c/h2\u003e\n\u003ctable\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth\u003eTag\u003c/th\u003e\n \u003cth\u003eWhat it controls\u003c/th\u003e\n \u003cth\u003eTip\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003eog:title\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eThe bold headline in the link preview\u003c/td\u003e\n \u003ctd\u003eKeep under 60 characters so it never gets cut off\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003eog:description\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eThe short summary beneath the title\u003c/td\u003e\n \u003ctd\u003eAim for 1-2 sentences, around 100-150 characters\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003eog:image\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eThe preview image shown in the card\u003c/td\u003e\n \u003ctd\u003e1200 \u0026times; 630 px JPEG or PNG; keep it under 1 MB for fast loading\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003eog:url\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eThe canonical URL of the page\u003c/td\u003e\n \u003ctd\u003eUse the full URL including \u003ccode\u003ehttps://\u003c/code\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003eog:type\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eThe content category (\u003ccode\u003ewebsite\u003c/code\u003e, \u003ccode\u003earticle\u003c/code\u003e, \u003ccode\u003eproduct\u003c/code\u003e)\u003c/td\u003e\n \u003ctd\u003eUse \u003ccode\u003ewebsite\u003c/code\u003e when unsure; platforms treat untyped content as \u003ccode\u003ewebsite\u003c/code\u003e anyway\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ccode\u003etwitter:card\u003c/code\u003e\u003c/td\u003e\n \u003ctd\u003eThe X/Twitter preview layout\u003c/td\u003e\n \u003ctd\u003e\u003ccode\u003esummary_large_image\u003c/code\u003e shows a big image; \u003ccode\u003esummary\u003c/code\u003e shows a thumbnail\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\n\u003cp\u003ePaste these tags inside the \u003ccode\u003e\u0026lt;head\u0026gt; \u0026hellip; \u0026lt;/head\u0026gt;\u003c/code\u003e section of your HTML - before the closing \u003ccode\u003e\u0026lt;/head\u0026gt;\u003c/code\u003e tag. If you use a CMS like WordPress, a plugin such as Yoast SEO or Rank Math will insert them for you, but you still control the values.\u003c/p\u003e\n\n\u003ch2\u003eHow to Add OG Tags in Code\u003c/h2\u003e\n\u003cp\u003eIf you manage your own templates, here is how to output the tags dynamically in two popular languages.\u003c/p\u003e\n\n\u003ch3\u003ePython (Flask / Jinja2)\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class='language-python'\u003e# In your Jinja2 template (e.g. base.html)\n# Pass og_data dict from your Flask view\n\u0026lt;meta property=\u0026quot;og:title\u0026quot; content=\u0026quot;{{ og_data.title }}\u0026quot;\u0026gt;\n\u0026lt;meta property=\u0026quot;og:description\u0026quot; content=\u0026quot;{{ og_data.description }}\u0026quot;\u0026gt;\n\u0026lt;meta property=\u0026quot;og:image\u0026quot; content=\u0026quot;{{ og_data.image }}\u0026quot;\u0026gt;\n\u0026lt;meta property=\u0026quot;og:url\u0026quot; content=\u0026quot;{{ request.url }}\u0026quot;\u0026gt;\n\u0026lt;meta property=\u0026quot;og:type\u0026quot; content=\u0026quot;{{ og_data.type | default('website') }}\u0026quot;\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch3\u003eJavaScript (Next.js 14 App Router)\u003c/h3\u003e\n\u003cpre\u003e\u003ccode class='language-javascript'\u003e// app/blog/[slug]/page.js\nexport async function generateMetadata({ params }) {\n const post = await getPost(params.slug);\n return {\n openGraph: {\n title: post.title,\n description: post.excerpt,\n url: `https://example.com/blog/${params.slug}`,\n images: [{ url: post.ogImage, width: 1200, height: 630 }],\n type: 'article',\n },\n twitter: {\n card: 'summary_large_image',\n title: post.title,\n description: post.excerpt,\n images: [post.ogImage],\n },\n };\n}\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eNext.js automatically renders these as \u003ccode\u003e\u0026lt;meta\u0026gt;\u003c/code\u003e tags in the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e at build or request time.\u003c/p\u003e\n\n\u003ch2\u003eHow the Generator Works\u003c/h2\u003e\n\u003cp\u003eEverything runs in your browser - no page data is sent to any server. When you click \u003cstrong\u003eGenerate\u003c/strong\u003e, the tool takes your form inputs, wraps each value in the correct \u003ccode\u003e\u0026lt;meta\u0026gt;\u003c/code\u003e tag syntax defined by the \u003ca href='https://ogp.me/' rel='noopener' target='_blank'\u003eOpen Graph Protocol (ogp.me)\u003c/a\u003e, and outputs the complete snippet. Twitter Card tags follow the separate \u003ca href='https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup' rel='noopener' target='_blank'\u003eX/Twitter Cards markup spec\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eSocial platforms like Facebook and LinkedIn send a small web crawler to your page URL when someone shares a link. That crawler reads the OG tags in your \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e and uses them to build the preview card - so the tags need to be in the server-rendered HTML, not injected by JavaScript after page load.\u003c/p\u003e\n\n\u003ch2\u003eWhen to Use OG Tags - and When They Won't Help\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eUse Open Graph tags on:\u003c/strong\u003e any public page you want to look good when shared - blog posts, product pages, landing pages, portfolio pieces, news articles.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eYou don\u0026apos;t need them on:\u003c/strong\u003e pages behind a login (crawlers can\u0026apos;t reach them), internal admin dashboards, or pages blocked by \u003ccode\u003erobots.txt\u003c/code\u003e or a \u003ccode\u003enoindex\u003c/code\u003e directive.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eOG tags vs. plain meta tags:\u003c/strong\u003e the standard \u003ccode\u003e\u0026lt;meta name='description'\u0026gt;\u003c/code\u003e tag controls what search engines show. OG tags control what social platforms show. Both matter and they often carry different copy - your SEO description and your social teaser can be different lengths and tones.\u003c/p\u003e\n\n\u003ch2\u003ePrivacy: Your Data Stays in Your Browser\u003c/h2\u003e\n\u003cp\u003eThis tool runs entirely on your device. The page titles, descriptions, and image URLs you enter are never uploaded or stored anywhere. Close the tab and they are gone.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eGood-looking social previews take about two minutes to set up\u003c/strong\u003e - use the generator above, copy the output, and paste it into your page \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e.\u003c/p\u003e"])</script><script>self.__next_f.push([1,"24:[\"$\",\"div\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"article\",null,{\"className\":\"tool-content\",\"dangerouslySetInnerHTML\":{\"__html\":\"$27\"}}],\"$L28\"]}]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"aside\",null,{\"className\":\"lg:sticky lg:top-20 lg:self-start\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-3 text-base font-bold tracking-tight text-gray-900 dark:text-gray-50\",\"children\":\"Related tools\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2\",\"children\":[[\"$\",\"li\",\"meta-tag-generator\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/meta-tag-generator\",\"className\":\"group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-indigo-300 dark:hover:border-indigo-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60\",\"children\":[[\"$\",\"span\",null,{\"className\":\"mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/15 dark:text-indigo-300\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-4 w-4\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.8,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"circle\",null,{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"7\"}],[\"$\",\"path\",null,{\"d\":\"m21 21-3.5-3.5M8 11l2 2 3-3.5\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"Meta Tag Generator\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100\",\"children\":\"→\"}]]}],[\"$\",\"span\",null,{\"className\":\"mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400\",\"children\":\"Generate SEO meta tags for your page's \u003chead\u003e.\"}]]}]]}]}],[\"$\",\"li\",\"robots-txt-generator\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/robots-txt-generator\",\"className\":\"group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-cyan-300 dark:hover:border-cyan-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60\",\"children\":[[\"$\",\"span\",null,{\"className\":\"mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cyan-50 text-cyan-600 dark:bg-cyan-500/15 dark:text-cyan-300\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-4 w-4\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.8,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"circle\",null,{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"7\"}],[\"$\",\"path\",null,{\"d\":\"m21 21-3.5-3.5M8 11l2 2 3-3.5\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"Robots.txt Generator\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100\",\"children\":\"→\"}]]}],[\"$\",\"span\",null,{\"className\":\"mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400\",\"children\":\"Build a robots.txt file with allow/disallow rules and your sitemap.\"}]]}]]}]}],[\"$\",\"li\",\"utm-builder\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/utm-builder\",\"className\":\"group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-emerald-300 dark:hover:border-emerald-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60\",\"children\":[[\"$\",\"span\",null,{\"className\":\"mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-300\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-4 w-4\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.8,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"circle\",null,{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"7\"}],[\"$\",\"path\",null,{\"d\":\"m21 21-3.5-3.5M8 11l2 2 3-3.5\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"min-w-0\",\"children\":[\"$L29\",\"$L2a\"]}]]}]}],\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\"]}]]}]\n"])</script><script>self.__next_f.push([1,"32:Tf57,"])</script><script>self.__next_f.push([1,"[{\"url\":\"/tools/open-graph-generator\",\"name\":\"Open Graph Generator - Free OG \u0026 Twitter Card Tag Builder\",\"@type\":\"SoftwareApplication\",\"offers\":{\"@type\":\"Offer\",\"price\":\"0\",\"priceCurrency\":\"USD\"},\"@context\":\"https://schema.org\",\"description\":\"Generate Open Graph and Twitter Card meta tags instantly. Paste the output into your \u003chead\u003e and control how your links look on Facebook, LinkedIn \u0026 X.\",\"applicationCategory\":\"DeveloperApplication\"},{\"@type\":\"BreadcrumbList\",\"@context\":\"https://schema.org\",\"itemListElement\":[{\"item\":\"https://techtoolexpert.com/\",\"name\":\"Home\",\"@type\":\"ListItem\",\"position\":1},{\"item\":\"https://techtoolexpert.com/tools/open-graph-generator\",\"name\":\"Open Graph Generator - Free OG \u0026 Twitter Card Tag Builder\",\"@type\":\"ListItem\",\"position\":2}]},{\"@context\":\"https://schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What is the difference between Open Graph tags and Twitter Card tags?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Open Graph tags (og:*) are used by Facebook, LinkedIn, Slack, iMessage, and most other platforms. Twitter Card tags (twitter:*) are read by X (formerly Twitter). They serve the same purpose - controlling the link preview - but use different tag names. Most good og: generators output both sets at once, which is what this tool does.\"}},{\"@type\":\"Question\",\"name\":\"What image size should I use for Open Graph?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"1200 x 630 pixels is the recommended size. It hits the ideal 1.91:1 aspect ratio that Facebook and most other platforms expect. Keep the file under 1 MB - JPEG works well for photos, PNG for graphics with text. Images smaller than 600 x 315 px may not display as a large card at all.\"}},{\"@type\":\"Question\",\"name\":\"Is this tool free? Do I need to create an account?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Completely free, no account required. Fill in the fields, click Generate, and copy the output - that's it.\"}},{\"@type\":\"Question\",\"name\":\"I added OG tags but Facebook still shows the old preview. Why?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Facebook caches link previews aggressively. Paste your URL into the \u003ca href='https://developers.facebook.com/tools/debug/' rel='noopener' target='_blank'\u003eFacebook Sharing Debugger\u003c/a\u003e and click 'Fetch new scrape information' to force a refresh. LinkedIn has a similar tool called the Post Inspector.\"}},{\"@type\":\"Question\",\"name\":\"Does my data get stored or sent to a server when I use this tool?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"No. The generator runs entirely in your browser. Nothing you type - URLs, titles, descriptions - is ever uploaded or saved. Your data stays on your device.\"}},{\"@type\":\"Question\",\"name\":\"What og:type value should I use?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Use 'website' for most pages (homepages, landing pages, static content). Use 'article' for blog posts and news stories - it unlocks extra optional tags like og:article:published_time. Use 'product' for e-commerce pages. When in doubt, 'website' is safe and universally supported.\"}},{\"@type\":\"Question\",\"name\":\"Do OG tags affect my Google search ranking?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Not directly - Google does not use OG tags as a ranking signal. But a good preview image and title increase click-throughs when your link is shared on social media, which can drive more traffic. Your SEO title and description come from the standard \u003cmeta name='description'\u003e and \u003ctitle\u003e tags, which are separate.\"}},{\"@type\":\"Question\",\"name\":\"Can I use the same OG tags on every page of my site?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"You can, but it's bad practice. When someone shares any page, they will all show the same generic title and image, which looks spammy and reduces clicks. Generate unique tags for each important page - at minimum: the homepage, every blog post, and any page you actively share on social media.\"}}]}]"])</script><script>self.__next_f.push([1,"26:[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$32\"}}]\n"])</script><script>self.__next_f.push([1,"28:[\"$\",\"section\",null,{\"className\":\"mt-12\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-5 text-2xl font-bold text-gray-900 dark:text-gray-50\",\"children\":\"Frequently asked questions\"}],[\"$\",\"div\",null,{\"className\":\"divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-gray-800 dark:border-gray-800\",\"children\":[[\"$\",\"details\",\"0\",{\"className\":\"group bg-white open:bg-gray-50 dark:bg-gray-900 dark:open:bg-gray-900/60\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-4 font-medium text-gray-900 dark:text-gray-100\",\"children\":[\"What is the difference between Open Graph tags and Twitter Card tags?\",[\"$\",\"span\",null,{\"className\":\"text-gray-500 dark:text-gray-400 transition group-open:rotate-45 group-open:text-brand-500\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 pb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-300\",\"dangerouslySetInnerHTML\":{\"__html\":\"Open Graph tags (og:*) are used by Facebook, LinkedIn, Slack, iMessage, and most other platforms. Twitter Card tags (twitter:*) are read by X (formerly Twitter). They serve the same purpose - controlling the link preview - but use different tag names. Most good og: generators output both sets at once, which is what this tool does.\"}}]]}],[\"$\",\"details\",\"1\",{\"className\":\"group bg-white open:bg-gray-50 dark:bg-gray-900 dark:open:bg-gray-900/60\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-4 font-medium text-gray-900 dark:text-gray-100\",\"children\":[\"What image size should I use for Open Graph?\",[\"$\",\"span\",null,{\"className\":\"text-gray-500 dark:text-gray-400 transition group-open:rotate-45 group-open:text-brand-500\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 pb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-300\",\"dangerouslySetInnerHTML\":{\"__html\":\"1200 x 630 pixels is the recommended size. It hits the ideal 1.91:1 aspect ratio that Facebook and most other platforms expect. Keep the file under 1 MB - JPEG works well for photos, PNG for graphics with text. Images smaller than 600 x 315 px may not display as a large card at all.\"}}]]}],[\"$\",\"details\",\"2\",{\"className\":\"group bg-white open:bg-gray-50 dark:bg-gray-900 dark:open:bg-gray-900/60\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-4 font-medium text-gray-900 dark:text-gray-100\",\"children\":[\"Is this tool free? Do I need to create an account?\",[\"$\",\"span\",null,{\"className\":\"text-gray-500 dark:text-gray-400 transition group-open:rotate-45 group-open:text-brand-500\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 pb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-300\",\"dangerouslySetInnerHTML\":{\"__html\":\"Completely free, no account required. Fill in the fields, click Generate, and copy the output - that's it.\"}}]]}],[\"$\",\"details\",\"3\",{\"className\":\"group bg-white open:bg-gray-50 dark:bg-gray-900 dark:open:bg-gray-900/60\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-4 font-medium text-gray-900 dark:text-gray-100\",\"children\":[\"I added OG tags but Facebook still shows the old preview. Why?\",[\"$\",\"span\",null,{\"className\":\"text-gray-500 dark:text-gray-400 transition group-open:rotate-45 group-open:text-brand-500\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 pb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-300\",\"dangerouslySetInnerHTML\":{\"__html\":\"Facebook caches link previews aggressively. Paste your URL into the \u003ca href='https://developers.facebook.com/tools/debug/' rel='noopener' target='_blank'\u003eFacebook Sharing Debugger\u003c/a\u003e and click 'Fetch new scrape information' to force a refresh. LinkedIn has a similar tool called the Post Inspector.\"}}]]}],\"$L33\",\"$L34\",\"$L35\",\"$L36\"]}]]}]\n"])</script><script>self.__next_f.push([1,"29:[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"UTM Link Builder\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100\",\"children\":\"→\"}]]}]\n2a:[\"$\",\"span\",null,{\"className\":\"mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400\",\"children\":\"Build campaign tracking URLs with UTM parameters.\"}]\n"])</script><script>self.__next_f.push([1,"2b:[\"$\",\"li\",\"json-ld-generator\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/json-ld-generator\",\"className\":\"group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-indigo-300 dark:hover:border-indigo-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60\",\"children\":[[\"$\",\"span\",null,{\"className\":\"mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-500/15 dark:text-indigo-300\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-4 w-4\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.8,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"circle\",null,{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"7\"}],[\"$\",\"path\",null,{\"d\":\"m21 21-3.5-3.5M8 11l2 2 3-3.5\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"JSON-LD Schema Generator\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100\",\"children\":\"→\"}]]}],[\"$\",\"span\",null,{\"className\":\"mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400\",\"children\":\"Generate JSON-LD structured data for Organization, Article, Product, FAQ, Breadcrumb and more.\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"2c:[\"$\",\"li\",\"xml-sitemap-generator\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/xml-sitemap-generator\",\"className\":\"group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-teal-300 dark:hover:border-teal-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60\",\"children\":[[\"$\",\"span\",null,{\"className\":\"mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-teal-50 text-teal-600 dark:bg-teal-500/15 dark:text-teal-300\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-4 w-4\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.8,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"circle\",null,{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"7\"}],[\"$\",\"path\",null,{\"d\":\"m21 21-3.5-3.5M8 11l2 2 3-3.5\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"XML Sitemap Generator\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100\",\"children\":\"→\"}]]}],[\"$\",\"span\",null,{\"className\":\"mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400\",\"children\":\"Turn a list of URLs into a valid sitemap.xml with lastmod, changefreq and priority.\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"2d:[\"$\",\"li\",\"hreflang-generator\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/hreflang-generator\",\"className\":\"group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-blue-300 dark:hover:border-blue-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60\",\"children\":[[\"$\",\"span\",null,{\"className\":\"mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-500/15 dark:text-blue-300\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-4 w-4\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.8,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"circle\",null,{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"7\"}],[\"$\",\"path\",null,{\"d\":\"m21 21-3.5-3.5M8 11l2 2 3-3.5\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"Hreflang Tag Generator\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100\",\"children\":\"→\"}]]}],[\"$\",\"span\",null,{\"className\":\"mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400\",\"children\":\"Generate hreflang alternate link tags for multilingual and multi-region pages.\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"2e:[\"$\",\"li\",\"keyword-density-checker\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/keyword-density-checker\",\"className\":\"group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-cyan-300 dark:hover:border-cyan-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60\",\"children\":[[\"$\",\"span\",null,{\"className\":\"mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cyan-50 text-cyan-600 dark:bg-cyan-500/15 dark:text-cyan-300\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-4 w-4\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.8,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"circle\",null,{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"7\"}],[\"$\",\"path\",null,{\"d\":\"m21 21-3.5-3.5M8 11l2 2 3-3.5\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"Keyword Density Checker\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100\",\"children\":\"→\"}]]}],[\"$\",\"span\",null,{\"className\":\"mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400\",\"children\":\"Analyse text for keyword and phrase density — word counts and percentages.\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"2f:[\"$\",\"li\",\"json-formatter\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/json-formatter\",\"className\":\"group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-blue-300 dark:hover:border-blue-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60\",\"children\":[[\"$\",\"span\",null,{\"className\":\"mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-500/15 dark:text-blue-300\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-4 w-4\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.8,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"path\",null,{\"d\":\"M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1\"}],[\"$\",\"path\",null,{\"d\":\"M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-1\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"JSON Formatter\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100\",\"children\":\"→\"}]]}],[\"$\",\"span\",null,{\"className\":\"mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400\",\"children\":\"Beautify, minify, and validate JSON.\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"30:[\"$\",\"li\",\"json-beautifier\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/json-beautifier\",\"className\":\"group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-emerald-300 dark:hover:border-emerald-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60\",\"children\":[[\"$\",\"span\",null,{\"className\":\"mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-300\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-4 w-4\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.8,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"path\",null,{\"d\":\"M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1\"}],[\"$\",\"path\",null,{\"d\":\"M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-1\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"JSON Beautifier\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100\",\"children\":\"→\"}]]}],[\"$\",\"span\",null,{\"className\":\"mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400\",\"children\":\"Beautify, minify, and validate JSON.\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"31:[\"$\",\"li\",\"json-minifier\",{\"children\":[\"$\",\"$L5\",null,{\"href\":\"/tools/json-minifier\",\"className\":\"group flex items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 transition hover:bg-gray-50 hover:border-emerald-300 dark:hover:border-emerald-500/40 dark:border-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800/60\",\"children\":[[\"$\",\"span\",null,{\"className\":\"mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-300\",\"children\":[\"$\",\"svg\",null,{\"className\":\"h-4 w-4\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.8,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"children\":[[\"$\",\"path\",null,{\"d\":\"M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1\"}],[\"$\",\"path\",null,{\"d\":\"M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-1\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1 text-[15px] font-semibold leading-snug text-gray-900 dark:text-gray-100\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate\",\"children\":\"JSON Minifier\"}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"shrink-0 text-brand-500 opacity-0 transition group-hover:translate-x-0.5 group-hover:opacity-100\",\"children\":\"→\"}]]}],[\"$\",\"span\",null,{\"className\":\"mt-0.5 line-clamp-1 text-[13px] leading-snug text-gray-500 dark:text-gray-400\",\"children\":\"Beautify, minify, and validate JSON.\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"33:[\"$\",\"details\",\"4\",{\"className\":\"group bg-white open:bg-gray-50 dark:bg-gray-900 dark:open:bg-gray-900/60\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-4 font-medium text-gray-900 dark:text-gray-100\",\"children\":[\"Does my data get stored or sent to a server when I use this tool?\",[\"$\",\"span\",null,{\"className\":\"text-gray-500 dark:text-gray-400 transition group-open:rotate-45 group-open:text-brand-500\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 pb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-300\",\"dangerouslySetInnerHTML\":{\"__html\":\"No. The generator runs entirely in your browser. Nothing you type - URLs, titles, descriptions - is ever uploaded or saved. Your data stays on your device.\"}}]]}]\n34:[\"$\",\"details\",\"5\",{\"className\":\"group bg-white open:bg-gray-50 dark:bg-gray-900 dark:open:bg-gray-900/60\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-4 font-medium text-gray-900 dark:text-gray-100\",\"children\":[\"What og:type value should I use?\",[\"$\",\"span\",null,{\"className\":\"text-gray-500 dark:text-gray-400 transition group-open:rotate-45 group-open:text-brand-500\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 pb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-300\",\"dangerouslySetInnerHTML\":{\"__html\":\"Use 'website' for most pages (homepages, landing pages, static content). Use 'article' for blog posts and news stories - it unlocks extra optional tags like og:article:published_time. Use 'product' for e-commerce pages. When in doubt, 'website' is safe and universally supported.\"}}]]}]\n35:[\"$\",\"details\",\"6\",{\"className\":\"group bg-white open:bg-gray-50 dark:bg-gray-900 dark:open:bg-gray-900/60\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-4 font-medium text-gray-900 dark:text-gray-100\",\"children\":[\"Do OG tags affect my Google search ranking?\",[\"$\",\"span\",null,{\"className\":\"text-gray-500 dark:text-gray-400 transition group-open:rotate-45 group-open:text-brand-500\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 pb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-300\",\"dangerouslySetInnerHTML\":{\"__html\":\"Not directly - Google does not use OG tags as a ranking signal. But a good preview image and title increase click-throughs when your link is shared on social media, which can drive more traffic. Your SEO title and description come from the standard \u003cmeta name='description'\u003e and \u003ctitle\u003e tags, which are separate.\"}}]]}]\n36:[\"$\",\"details\",\"7\",{\"className\":\"group bg-white open:bg-gray-50 dark:bg-gray-900 dark:open:bg-gray-900/60\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-4 font-medium text-gray-900 dark:text-gray-100\",\"children\":[\"Can I use the same OG tags on every page of my site?\",[\"$\",\"span\",null,{\"className\":\"text-gray-500 dark:text-gray-400 transition group-open:rotate-45 group-open:text-brand-500\",\"children\":\"+\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 pb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-300\",\"dangerouslySetInnerHTML\":{\"__html\":\"You can, but it's bad practice. When someone shares any page, they will all show the same generic title and image, which looks spammy and reduces clicks. Generate unique tags for each important page - at minimum: the homepage, every blog post, and any page you actively share on social media.\"}}]]}]\n"])</script></body></html>