Open Graph and Twitter Card Tags That Actually Render Correctly

The Open Graph and Twitter Card tags platforms actually read, the image rules that trip people up, and how to check a link before you post it.

Core Syntax and Required Properties

Open Graph and Twitter Card tags define how your content appears when shared on social platforms. They are implemented as <meta> tags in the HTML <head>. While Open Graph uses the property attribute, Twitter Cards use the name attribute. Mixing these up is the most common reason tags fail to render. Open Graph tags are prefixed with og:, while Twitter tags use the twitter: prefix.

The minimum viable set for Open Graph includes og:title, og:description, og:image, and og:url. Twitter Cards require twitter:card (usually summary or summary_large_image), twitter:site (your handle), twitter:creator (author handle), twitter:title, twitter:description, and twitter:image. If you omit twitter:card, the platform defaults to a basic card, which often lacks the large image display you intend.

Image Dimensions and Format Constraints

Image specifications are strict. Open Graph recommends a minimum of 600x600 pixels, but most platforms display best with 1200x630 pixels (1.91:1 aspect ratio). Twitter Cards explicitly require a minimum of 300x150 pixels, with 1200x630 pixels recommended for the large image variant. If your image is smaller than these thresholds, the card may render with a cropped or low-quality thumbnail.

File format matters. Use JPEG or PNG. WebP is supported by modern browsers but may fail in older social platform crawlers. Ensure the image URL is absolute (starts with https://) and accessible without authentication. Relative paths like /images/logo.png will not resolve for external crawlers.

Common Image Mistakes

Using a relative URL for og:image or twitter:image.
Serving images behind a login wall or paywall.
Using dimensions below the minimum threshold, causing automatic cropping.
Forgetting the twitter:card tag, which prevents large image rendering.

Content Length and Character Limits

Titles and descriptions have implicit length limits. While Open Graph does not enforce a hard limit, most platforms truncate titles around 60–70 characters and descriptions around 100–160 characters. Twitter Cards truncate titles at 60 characters and descriptions at 160 characters. If your meta description is longer, the excess is cut off, potentially removing key information or call-to-action phrases.

Keep titles under 60 characters and descriptions under 160 characters. This ensures full visibility across all major platforms. If you need more detail, place it in the page body, not the meta tags. Truncation is silent; you will not receive an error, only a broken preview.

Validation and Debugging

Platforms provide official debug tools, but they are slow and sometimes unreliable. For immediate feedback, use a local or automated audit tool. MetaForge allows you to paste a URL and receive an instant audit of title, description, Open Graph, and Twitter Card tags, along with rewrite suggestions that optimize for click-through rate. This is useful for catching syntax errors before deployment.

When debugging, check three things: first, that the tags are present in the raw HTML (not just in the rendered DOM); second, that the image URL returns a 200 status code and a valid image content type; third, that the tags are not blocked by JavaScript rendering. If your site is a single-page application, ensure meta tags are server-side rendered or injected before the crawler arrives. Crawlers do not execute JavaScript, so client-side-only meta tags will not be seen.

Trade-offs and Best Practices

Do not duplicate Open Graph and Twitter Card tags if they are identical. Twitter Cards fall back to Open Graph values if Twitter-specific tags are missing, but explicit Twitter tags allow for finer control, such as different images for Twitter versus Facebook. If you use different images, ensure both sets are valid. If you use the same image, you can omit the Twitter-specific image tag and rely on the fallback, but this is less reliable across all platforms.

Avoid dynamic meta tags that change based on user session. Crawlers see the default state, not the personalized state. If your page has different titles for logged-in versus anonymous users, the crawler will likely see the anonymous version. Ensure the default state is the one you want to share. Finally, remember that meta tags are not SEO factors. They do not affect search rankings. They only affect social sharing previews. Optimize them for shareability, not for search engines.

Tool mentioned: MetaForge