XBKit·Shopify / SEO

Open Graph Tag Generator

Generate OG meta tags and Twitter Card tags for rich social media previews when your products are shared.

Open Graph Details

Recommended: 1200 × 630 px, JPG or PNG

Generated Tags (OG + Twitter Card)
<meta property="og:type" content="website">

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

Twitter Card tags are automatically included. Test your tags with Facebook's Sharing Debugger or Twitter's Card Validator after deployment.

How to Use

  1. 1

    Fill in your page details

    Enter the page title, description, URL, and image URL for the page you want to create OG tags for.

  2. 2

    Set the OG type

    Choose "website" for homepages and blog posts, or "product" for product pages. This helps Facebook and LinkedIn render the appropriate preview card type.

  3. 3

    Add Twitter Card settings

    Select "summary_large_image" for a large image preview or "summary" for a smaller thumbnail. Include your Twitter site handle if you have one.

  4. 4

    Copy and add to your page

    Copy the generated OG tags and paste them inside the <head> section of your page's HTML, or add them via your Shopify theme's header.

Frequently Asked Questions

What are Open Graph tags?

Open Graph (OG) tags are meta tags in your page's HTML that control how your content appears when shared on social media. Without OG tags, Facebook, LinkedIn, and messaging apps may display a random image or no preview at all.

What is the recommended OG image size?

Facebook and LinkedIn recommend 1200×630px for OG images. Twitter (now X) recommends 1200×600px for summary_large_image cards. Use a clear product image or branded graphic — this is what people see before deciding to click.

Do OG tags help SEO?

OG tags do not directly affect Google rankings, but they influence social click-through rates. A compelling og:image and og:description drives more traffic from social platforms, which indirectly contributes to brand signals Google considers.

How do I test if my OG tags are working?

Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug) to preview your OG tags and force a cache refresh. For Twitter, use the Twitter Card Validator. Both are free.

Related Tools

Meta Tag GeneratorMeta Description ValidatorJSON-LD Schema Generator