Meta Tags: Open Graph and Twitter Cards

When someone shares a link to your website on social media, in a messaging app, or in a collaboration tool like Slack or Discord, the platform generates a preview card showing a title, description, and image. These preview cards are not generated from magic — they are constructed from Open Graph and Twitter Card meta tags embedded in your page's HTML. Without these tags, platforms either display a bare URL with no preview or attempt to extract information from your page content, often with ugly or inaccurate results.

Social sharing meta tags sit at the intersection of SEO and marketing. While they do not directly influence search engine rankings, they dramatically affect how your content appears when shared, which influences click-through rates, brand perception, and the likelihood that people will share your content further. From a quality engineering perspective, these tags are straightforward to validate automatically, making them an easy win for your quality pipeline.

The Open Graph Protocol

The Open Graph protocol was originally created by Facebook in 2010 and has since become the universal standard for social sharing metadata. When a platform encounters a URL, it looks for Open Graph meta tags to determine how to display the share preview. Facebook, LinkedIn, Discord, Slack, iMessage, WhatsApp, and many other platforms all read Open Graph tags.

Open Graph tags are implemented as <meta> elements in the <head> of your HTML document, using the property attribute (not the name attribute, which is used for standard meta tags):

<meta property="og:title" content="Meta Tags: Open Graph and Twitter Cards">
<meta property="og:description" content="Learn about Open Graph and Twitter Card meta tags...">
<meta property="og:image" content="https://codefrog.app/images/codefrog_og_image.png">
<meta property="og:url" content="https://codefrog.app/quality-engineering/seo/meta-tags-og-twitter">
<meta property="og:type" content="article">

Required Open Graph Properties

The Open Graph protocol specifies four required properties that every page should include:

og:title: The title of your content as it should appear in the share preview. This can differ from the HTML <title> tag. Keep it concise and compelling — around 60-90 characters works well across most platforms. Longer titles will be truncated.
og:description: A brief description of the content, typically displayed below the title in share previews. Aim for 155-200 characters. This is your elevator pitch for why someone should click the shared link.
og:image: The URL of the image to display in the share preview. This must be an absolute URL (starting with https://), not a relative path. The image is often the most visually dominant element of a share preview and has the greatest impact on engagement.
og:url: The canonical URL of the page. This tells social platforms which URL to use as the permanent link, similar to how the canonical tag works for search engines.

The og:type Property

The og:type property tells platforms what kind of content the page represents. Common values include:

website — for homepages and general pages (this is the default if no type is specified)
article — for blog posts, news articles, and editorial content
product — for e-commerce product pages
profile — for user profile pages
video.other — for pages featuring video content

For article pages, you can include additional properties like article:published_time, article:modified_time, article:author, and article:section to provide more context about the content.

Open Graph Image Requirements

The image is the most impactful element of a social share preview, and getting the dimensions right is critical for a professional appearance. Incorrectly sized images may be cropped, stretched, or display with large empty spaces.

Recommended dimensions for Open Graph images:

Minimum size: 200x200 pixels (absolute minimum that platforms will accept)
Recommended size: 1200x630 pixels (the standard for most platforms)
Aspect ratio: 1.91:1 (width to height) for the large summary format
Maximum file size: Keep images under 8MB (under 1MB is ideal for fast loading)
Supported formats: JPEG, PNG, GIF, and WebP are widely supported

Design tip: Keep important text and visual elements in the center of the image, away from the edges. Different platforms crop images differently, and content near the edges may be cut off. Design your OG images with a "safe zone" in the center.

Twitter Cards

Twitter (now X) uses its own set of meta tags for share previews, called Twitter Cards. While Twitter will fall back to Open Graph tags if Twitter Card tags are not present, including dedicated Twitter Card tags gives you more control over how your content appears on the platform.

Twitter Card meta tags use the name attribute rather than property:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Meta Tags: Open Graph and Twitter Cards">
<meta name="twitter:description" content="Learn about Open Graph and Twitter Card meta tags...">
<meta name="twitter:image" content="https://codefrog.app/images/codefrog_og_image.png">

Twitter Card Types

The twitter:card property specifies which card format to use:

summary: A small card with a square image thumbnail on the left and title/description on the right. Good for general content but less visually impactful.
summary_large_image: A large card with a prominent image above the title and description. This is the most common choice for articles, blog posts, and marketing pages because the large image attracts more attention in the feed.
player: Used for embedding video or audio content directly in the Twitter feed.
app: Used for mobile app promotion, displaying app name, description, and a download button.

Twitter Card Image Requirements

summary card: Minimum 144x144 pixels, maximum 4096x4096 pixels. Displayed as a square crop.
summary_large_image card: Minimum 300x157 pixels, recommended 1200x675 pixels. Aspect ratio of approximately 1.78:1 (16:9).
Maximum file size: 5MB for images
Supported formats: JPEG, PNG, GIF, and WebP

Note the slight difference in recommended aspect ratios: Open Graph images are typically 1200x630 (1.91:1) while Twitter's summary_large_image works best at 1200x675 (1.78:1). In practice, a 1200x630 image works acceptably for both platforms, but if you want to optimize for each platform separately, consider generating two versions of your share images.

Character Limits

Each platform has its own character limits for the title and description fields in share previews. While these limits change occasionally as platforms update their designs, the following guidelines are generally safe:

og:title / twitter:title: 60-90 characters. Facebook truncates at approximately 88 characters, Twitter at around 70 characters. Keeping titles under 70 characters ensures they display fully on both platforms.
og:description / twitter:description: 155-200 characters. Facebook truncates at approximately 300 characters, Twitter at about 200 characters. Aim for the key message in the first 155 characters.

The title and description you use for social sharing do not have to match your HTML title tag and meta description exactly. Social sharing tags are an opportunity to write more conversational, engaging copy that is optimized for the social context rather than the search context.

Implementing Both Open Graph and Twitter Cards

For maximum coverage, implement both Open Graph and Twitter Card tags on every page. A complete implementation looks like this:

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description of your page.">
<meta property="og:image" content="https://example.com/images/share-image.png">
<meta property="og:url" content="https://example.com/your-page/">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Your Site Name">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="A compelling description of your page.">
<meta name="twitter:image" content="https://example.com/images/share-image.png">

If you have a Twitter account for your brand, you can also include twitter:site (your brand's Twitter handle) and twitter:creator (the author's Twitter handle) to associate the card with your accounts.

Debugging Tools

After implementing your meta tags, you need to verify that they are working correctly. Each major platform provides a debugging tool:

Facebook Sharing Debugger: Available at developers.facebook.com/tools/debug/. Enter a URL to see exactly which Open Graph tags Facebook detects, preview the share card, and clear Facebook's cache for the URL. This is essential after updating OG tags, as Facebook aggressively caches share previews.
Twitter Card Validator: Available at cards-dev.twitter.com/validator. Enter a URL to preview how your Twitter Card will appear and verify that all required tags are present.
LinkedIn Post Inspector: Available at linkedin.com/post-inspector/. Similar to Facebook's debugger, it shows how LinkedIn will render a shared link and allows you to clear the cache.

One limitation of these platform-specific debuggers is that they require a publicly accessible URL. If you are developing locally or on a staging server behind a firewall, these tools cannot reach your pages.

CodeFrog Validates OG and Twitter Card Tags

This is where CodeFrog provides significant value. Unlike the platform debugging tools, CodeFrog can analyze any URL you can reach from your machine — including localhost, staging servers, and development environments. CodeFrog validates the presence of all required Open Graph and Twitter Card tags, checks that image URLs are valid and accessible, verifies that images meet minimum dimension requirements, and flags missing or improperly configured tags as SEO findings.

This means you can validate your social sharing meta tags during development, before deploying to production. You can even integrate CodeFrog into your CI/CD pipeline to prevent pages with missing or broken social metadata from reaching production. This proactive approach embodies the quality engineering principle of catching issues as early as possible in the development lifecycle.

Quality engineering approach: Do not wait until someone shares your page on social media and sees a broken preview. Validate your Open Graph and Twitter Card tags on every page during development with CodeFrog, and use platform debuggers as a final check before launch.

Resources

Open Graph Protocol Specification — The official specification for Open Graph meta tags
Twitter Cards Documentation — Official documentation for Twitter Card implementation
Facebook Sharing Debugger — Tool to preview and debug Open Graph tags for Facebook sharing