Open Graph data

What is Open Graph?

Open Graph is a protocol developed by Facebook (Meta) in 2010 that lets you control how your content appears when it’s shared on social media. Without Open Graph tags, the platforms themselves choose which title, description, and image to display, and the result is often inaccurate or unattractive.

With the right OG tags, you control the title, description, and image that appear in the preview card when someone shares a link to your online store.

The Most Important OG Tags

Here are the tags that matter most for your online store:

• og:title, the title that appears in the share. Should be short, precise, and catchy (typically 40–60 characters).
• og:description, the description below the title. Should summarize the content persuasively (typically 100–160 characters).
• og:image, the image displayed in the preview card. This is the most important tag, as images are the first thing the eye catches.
• and:url, the canonical URL for the page. Ensures that all shares link to the correct page.
• og:type, the type of content. For product pages, use “product”; otherwise, use “website.”
• og:site_name, your online store’s name.
• og:locale, the language (e.g., "da_DK" for Danish).

Open Graph in Shoporama

Shoporama automatically generates the basic Open Graph tags for all pages:

• Product pages: og:title, og:description, and og:image (primarily the product image). og:type is typically set to "product".
• Categories and landing pages: Title, description, and, if applicable, category image.
• Static pages: Title and description from the page’s metadata.

You can override the automatic values by setting the meta title and description individually for products, categories, and pages.

Product-specific OG tags depend on the theme

The extended product tags (product:price:amount, product:price:currency, etc.) are not part of the Shoporama platform’s core functionality. They are available in some of the included themes (e.g., Delaware/DelawareDK), where they are added via the theme’s templates. Other themes do not necessarily output them automatically.

If you need specific product tags, check your theme’s template (typically in partials/schema.product.html or similar) or add them yourself. For structured data about products (price, inventory, brand, etc.), Shoporama also automatically uses JSON-LD, which Google prefers over OG product tags.

Images for OG Tags

The image is the most important element in a social share. Here are the guidelines:

• Size: Recommended 1200×630 pixels (1.91:1 aspect ratio). Images smaller than 600×315 will be displayed as a small thumbnail instead of a large card.
• Format: JPG or PNG. Keep the file size under 8 MB.
• Content: Use high-quality product images. Avoid too much text in the image; Facebook may hide posts with excessive text.

Test your OG tags

Use these tools to test and debug your Open Graph tags:

• Facebook Sharing Debugger: Shows exactly how your link appears on Facebook and helps clear the cache when updates are made.
• LinkedIn Post Inspector: Similar for LinkedIn shares.
• Twitter Card Validator: For Twitter/X previews.

It’s important to test after making changes, since social media platforms cache Open Graph data. Use the debugger tools to force a refresh.