---
title: "Add OG and Twitter cards"
description: "Open Graph and Twitter card tags control how links render in feeds, chats and some assistants. Set og:title, og:description, og:url, og:type and an absolute og:image, plus twitter:card and matching fields. Generate them per page and make og:url equal the canonical."
url: "https://seo-mcp.io/t/add-og-and-twitter-cards"
---

# Add OG and Twitter cards

Open Graph and Twitter card tags control how links render in feeds, chats and some assistants. Set og:title, og:description, og:url, og:type and an absolute og:image, plus twitter:card and matching fields. Generate them per page and make og:url equal the canonical.

## Prerequisites

- Access to the head template
- A social preview image per page or template

## Steps

1. **Add the core Open Graph fields** — Emit og:title, og:description, og:url, og:type and og:image as absolute URLs. Remove duplicate tags from other plugins or components.
   Check: The rendered head contains exactly one of each og tag and og:url equals the canonical.
2. **Add Twitter card fields** — Add twitter:card=summary_large_image plus twitter:title, twitter:description and twitter:image. Keep values consistent with the Open Graph fields.
   Check: The head contains the twitter:card tag and an absolute twitter:image URL.
3. **Validate a preview** *(general best practice)* — Run a link preview debugger for one article, one product and the homepage. Check the image dimensions and that the crop keeps essential text visible.
   Check: The preview shows the intended title, description and image for all three URL types.

## Source

@seo-mcp on 2026-10-19: https://ogp.me/

Canonical: https://seo-mcp.io/t/add-og-and-twitter-cards