Optimize Social Media Link Previews with Open Graph Meta Tags
When users share a link to your website on social networks like Facebook, LinkedIn, Twitter, Slack, or WhatsApp, those platforms crawl your URL to generate a rich visual card. The Open Graph (OG) Protocol—originally developed by Facebook—defines the standard HTML metadata used to control how your site title, description, and thumbnail image appear across social feeds.
Why Open Graph Meta Tags are Essential for CTR
Sharing a link without Open Graph tags often results in broken images, truncated text, or unwanted boilerplate text appearing in news feeds. Adding customized OG tags ensures your social cards look professional, eye-catching, and branded, dramatically increasing user engagement and social Click-Through Rates (CTR).
Key Open Graph Meta Tags Explained
The core OG protocol properties you should include on every webpage:
-
og:title— Headline for Social Cards Serves as the main headline displayed on social cards. Keep it concise (under 60 characters) to prevent awkward line wrapping on mobile devices. -
og:description— Link Summary A brief summary of your page content. Unlike SEO meta descriptions, social descriptions should focus on driving curiosity and social engagement (~155 characters). -
og:image— Thumbnail Banner Image The single most important OG tag for capturing visual attention. Use high-resolution images with a 1.91:1 aspect ratio (recommended 1200 x 630 pixels). -
og:url— Canonical Destination URL The primary canonical URL of the shared page. Ensuring this URL is explicit prevents split social analytics across multiple URL parameter variants. -
og:type— Content Category Specifies the media category of your object (e.g., website, article, product, or video.movie) to help social engines render custom UI components.
How to Install Open Graph Tags on Your Website
Generate & Copy
Fill in your title, description, canonical link, and image URL above, then click "Copy Code".
Paste into <head>
Paste the generated <meta> tags inside the <head> element of your HTML page template.