Configure Social Markup for Magento 2

Configure OpenGraph and Twitter Cards with the Rich Snippets Suite extension. These markup types control how your pages appear when shared on social media platforms.

When someone shares a link to your store on social media, the platform reads special meta tags to create a rich preview. Without these tags, shares may show:

Generic or missing images
Truncated or wrong titles
No description

With proper social markup, your shared links display:

The correct product image
Proper title and description
Your brand information

OpenGraph

OpenGraph is used by Facebook, LinkedIn, Pinterest, and many other platforms.

How It Works

OpenGraph adds meta tags to your page's <head>:

<meta property="og:title" content="Product Name" />
<meta property="og:description" content="Product description" />
<meta property="og:image" content="https://store.com/product.jpg" />
<meta property="og:url" content="https://store.com/product" />
<meta property="og:type" content="product" />

Configuration

Location: Magmodules → Rich Snippets Suite → Additional Markup

Product Pages

Setting	Description
OpenGraph	Enable OpenGraph tags on product pages

Product pages automatically use:

Product name as title
Product description
Product image
Product URL

Category Pages

Setting	Description
OpenGraph	Enable OpenGraph tags on category pages

Category pages use:

Category name as title
Category description (if set)
Category image or store logo

CMS Pages

Setting	Description
OpenGraph	Enable OpenGraph tags on CMS pages
OpenGraph: Title	Include page title
OpenGraph: Description	Include meta description
OpenGraph: Logo	Use store logo as image

Facebook App ID

Setting	Description
Facebook App ID	Your Facebook application ID

Adding your Facebook App ID enables:

Facebook analytics for shares
Additional debugging tools
Enhanced integration features

Twitter Cards

Twitter Cards provide rich previews when your pages are shared on Twitter/X.

Card Types

The extension uses Summary Cards which display:

Title
Description
Thumbnail image

Configuration

Product Pages

Setting	Description
Twitter Summary Cards	Enable Twitter Cards on product pages

Category Pages

Setting	Description
Twitter Summary Cards	Enable Twitter Cards on category pages

CMS Pages

Setting	Description
Twitter Summary	Enable Twitter Cards on CMS pages

Twitter Username

Setting	Description
Twitter Username	Your Twitter/X handle

Enter with or without @:

@yourstore
yourstore

This attributes shared content to your Twitter account.

Output Examples

OpenGraph (Product Page)

<meta property="og:type" content="product" />
<meta property="og:title" content="Premium Wireless Headphones" />
<meta property="og:description" content="High-quality wireless headphones" />
<meta property="og:image" content="https://store.com/media/headphones.jpg" />
<meta property="og:url" content="https://store.com/headphones" />
<meta property="og:site_name" content="Your Store" />
<meta property="fb:app_id" content="123456789" />

Twitter Cards (Product Page)

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@yourstore" />
<meta name="twitter:title" content="Premium Wireless Headphones" />
<meta name="twitter:description" content="High-quality wireless headphones" />
<meta name="twitter:image" content="https://store.com/media/headphones.jpg" />

Image Requirements

For best results on social platforms:

Facebook/OpenGraph

Minimum: 200 x 200 pixels
Recommended: 1200 x 630 pixels
Maximum file size: 8 MB
Supported formats: JPG, PNG, GIF

Twitter

Minimum: 144 x 144 pixels
Recommended: 800 x 418 pixels (for large images)
Maximum file size: 5 MB
Supported formats: JPG, PNG, GIF, WEBP

Best Practice

Use product images at least 1200 x 630 pixels to meet all platform requirements.

Testing Your Markup

Go to Facebook Sharing Debugger
Enter your page URL
Click "Debug"
Review the preview and any warnings
Click "Scrape Again" to refresh cached data

Twitter Card Validator

Go to Twitter Card Validator
Enter your page URL
Click "Preview Card"
Verify the card displays correctly

LinkedIn Post Inspector

Go to LinkedIn Post Inspector
Enter your page URL
Review the preview

Troubleshooting

Wrong Image Showing

Problem: Social platforms show old or wrong images.

Solution:

Use the platform's debugger to clear cache
Ensure image URL is absolute (starts with https://)
Check image meets size requirements

No Preview Appearing

Problem: Share shows plain link without preview.

Solution:

Verify OpenGraph/Twitter Cards are enabled
Check page source for meta tags
Test with platform debuggers
Ensure page is publicly accessible

Truncated Description

Problem: Description is cut off.

Solution:

Keep descriptions under 200 characters
Put important information first
Avoid special characters at cut-off points

Best Practices

Content

Write compelling titles (60 characters max)
Create engaging descriptions (155 characters ideal)
Use high-quality, relevant images

Technical

Use absolute URLs for images
Ensure HTTPS for all resources
Test after making changes
Clear platform caches when updating

Consistency

Match social preview with page content
Use consistent branding
Update when products change

Need More Help?

Documentation:

All Help Articles - Complete documentation overview

Support:

Contact Support - Get help from our team

Rich Snippets Suite

Configure Social Markup for Magento 2

What Is Social Markup?

OpenGraph

How It Works

Configuration

Product Pages

Category Pages

CMS Pages

Facebook App ID

Twitter Cards

Card Types

Configuration

Product Pages

Category Pages

CMS Pages

Twitter Username

Output Examples

OpenGraph (Product Page)

Twitter Cards (Product Page)

Image Requirements

Facebook/OpenGraph

Twitter

Best Practice

Testing Your Markup

Facebook Sharing Debugger

Twitter Card Validator

LinkedIn Post Inspector

Troubleshooting

Wrong Image Showing

No Preview Appearing

Truncated Description

Best Practices

Content

Technical

Consistency

Need More Help?