Open Graph Tags

Technical & Infrastructure

Meta tags that control how content appears when shared on social media platforms like Facebook.

Definition

Open Graph (OG) tags are HTML meta tags placed in the `<head>` section of a webpage that control how that page appears when its URL is shared on social media platforms, messaging apps, and other services that generate link previews. The protocol was originally created by Facebook in 2010 and has since become the universal standard for link previews across the web. OG tags define four core properties: `og:title` (the headline shown in the preview), `og:description` (the summary text), `og:image` (the preview thumbnail), and `og:url` (the canonical link). Additional properties like `og:type`, `og:site_name`, and `og:locale` provide further context. Without OG tags, platforms attempt to guess what to display by scraping the page, which often produces broken images, truncated text, or irrelevant content.

Why It Matters

Every link shared on social media generates a preview card. That card is the first and often only thing people see before deciding whether to click. A well-configured OG image, clear title, and compelling description can multiply click-through rates compared to a generic or missing preview. For publishers distributing [flipbooks](/glossary/flipbook) through social channels, the preview card acts as a miniature advertisement for the content. A broken or bland preview wastes the visibility that the share provided. OG tags also affect how links appear in messaging apps like WhatsApp, Slack, and iMessage, meaning they influence click behavior far beyond social media feeds.

How It Works in FlipLink

FlipLink's [SEO and social previews](/features/seo-and-social-previews) feature lets you configure OG tags for each publication. You set a custom title, description, and preview image through the publication settings, and FlipLink generates the correct `og:title`, `og:description`, `og:image`, `og:url`, and `og:type` meta tags automatically. This means every shared flipbook link displays a polished, branded preview card without requiring any HTML editing. The OG image can be your flipbook's cover page or a custom graphic designed for social sharing.

Setup Checklist

Follow these steps to configure OG tags correctly for maximum social sharing impact: 1. **Set og:title** - Keep it under 60 characters. Use a descriptive title that includes the content topic, not just your brand name. Example: "Spring Collection Catalog | YourBrand" rather than just "YourBrand." 2. **Write og:description** - Aim for 120-155 characters. Include a value proposition or call-to-action. Describe what the reader will find inside the flipbook. 3. **Choose og:image** - Use an image at least 1200x630 pixels. The cover page of your flipbook works well, but a custom social graphic with text overlay can perform better. Avoid images with too much small text since they get displayed as thumbnails. 4. **Verify og:url** - This should be the [canonical URL](/glossary/canonical-url) of the publication. If your flipbook is accessible through multiple URLs, the og:url should point to the primary one. 5. **Set og:type** - Use "website" for landing pages and "article" for individual publications or blog posts. 6. **Test before sharing** - Use Facebook's Sharing Debugger, Twitter's Card Validator, or LinkedIn's Post Inspector to preview how your link will appear before sharing it publicly.

Frequently Asked Questions

**What happens if I do not set OG tags?** The social platform will attempt to scrape your page and guess the title, description, and image. Results are unpredictable: you might get a random image from the page, a truncated HTML title, or no preview at all. Setting explicit OG tags removes this guesswork entirely. **Do OG tags affect SEO rankings?** OG tags do not directly influence search engine rankings. However, they significantly affect click-through rates on shared links, which drives traffic. More traffic and engagement can indirectly improve your search visibility over time. **Are OG tags the same as Twitter Cards?** Twitter has its own meta tags (`twitter:card`, `twitter:title`, `twitter:image`), but it falls back to OG tags when Twitter-specific tags are not present. Most platforms, including LinkedIn, WhatsApp, Slack, and iMessage, use OG tags as their primary source for link previews.

Technical Details

OG tags follow a straightforward HTML structure placed within the `<head>` element: - `og:title` - The title displayed in the preview. Should differ from the page's `<title>` tag if the page title includes navigational breadcrumbs or site-wide suffixes that do not make sense in a social context. - `og:description` - A concise summary. Unlike the meta description used for search engines, the OG description should be optimized for social context: shorter, more direct, and action-oriented. - `og:image` - An absolute URL to the image file. Facebook recommends 1200x630 pixels. Images smaller than 200x200 pixels may not render in some platforms. - `og:type` - Categorizes the content. Common values are "website", "article", "product", and "video.other". - `og:url` - The canonical URL. This prevents duplicate preview cards when the same content is accessible from multiple URLs. - `og:locale` - Specifies the content language (e.g., "en_US", "de_DE"). Useful for multilingual publications. When a URL is shared, the platform's crawler fetches the page, reads the OG tags from the HTML, and caches the result. This is why changes to OG tags do not take effect immediately on platforms that have already cached the old preview. Use each platform's debug tool to force a re-scrape after updating tags.

Related Terms

Payment Gateway

A service that processes online payments, like Stripe, enabling document sales through FlipLink.

PDF.js

Mozilla's open-source JavaScript library that renders PDF files directly in web browsers.

Progressive Web App (PWA)

A web application that works offline and can be installed on devices like a native app.

Responsive Design

Automatically adapting layout and content to work well on screens of all sizes and devices.

Responsive Embed

An embed code that automatically adjusts the flipbook size to fit any container or screen width.

Related Features

Seo And Social Previews

Available in other languages

Ready to Transform
Your PDFs?

Join thousands of businesses using FlipLink to create engaging, interactive content from their PDFs. Start free — no credit card required.

Create Your First Flipbook View Pricing