Open Graph + Twitter Tags
explained, generated, and previewed

og:title Required core

What it does: The main title shown in the preview card.

Best practice: Use a human-friendly title, not a raw slug, category trail, or keyword-stuffed sentence.

Common mistake: Using a title that is too long, too generic, or different from the actual page topic.

Example: <meta property="og:title" content="How to Debug Social Sharing Previews" />

og:type Required core

What it does: Tells crawlers what kind of object the page is.

Typical values: website for generic pages and article for blog posts or guides.

Common mistake: Leaving everything as website when article-specific metadata would make more sense.

og:image Required core

What it does: Supplies the preview image used in social cards.

Best practice: Use an absolute HTTPS URL, stable hosting, and a dedicated share image rather than a small logo or random page image.

Common mistake: Using tiny images, relative paths, blocked directories, or images that require cookies or login.

og:url Required core

What it does: Declares the permanent canonical identity of the page in the graph.

Best practice: Match it with the canonical URL and use the final public URL users should share.

Common mistake: Pointing it to the home page, a staging URL, or a redirected URL.

og:description Recommended

What it does: Provides a short summary that many platforms show under the title.

Best practice: Make it clear, useful, and readable in one or two compact sentences.

Common mistake: Dumping the whole intro paragraph, writing vague text, or repeating the title word-for-word.

og:site_name Recommended

What it does: Shows the broader site or brand name.

Best practice: Keep it stable across the site. Example: Learn with Champak.

og:locale Recommended

What it does: Declares the language/region format of the page, such as en_US.

Best practice: Add it if your content has a clear primary locale.

og:image:width and og:image:height Recommended

What they do: Help crawlers understand the image dimensions without guessing.

Best practice: Provide the actual image size when you know it.

Common mistake: Supplying incorrect dimensions or omitting them for important share images.

og:image:alt Recommended

What it does: Describes what is in the image.

Best practice: Describe the image content, not a caption, slogan, or keyword list.

Common mistake: Leaving it blank even though a share image exists.

og:image:secure_url and og:image:type Optional

What they do: Provide an HTTPS image URL and MIME type.

When useful: When you want to be explicit or maintain multiple image declarations cleanly.

og:locale:alternate Optional

What it does: Lists alternate locales for multilingual content.

When useful: When the same page is available in multiple translations.

article:published_time, article:modified_time, article:author Article metadata

What they do: Add article-specific context for pages that are actual posts or guides.

Best practice: Use ISO 8601 dates and keep author naming consistent.

twitter:card Most important

What it does: Chooses the card layout.

Common values: summary for a smaller image card and summary_large_image for a larger, more visual card.

Best practice: Use summary_large_image for articles, tutorials, and visual landing pages.

twitter:title Recommended

What it does: Supplies the card title.

Best practice: Usually mirror the OG title unless you need a shorter version for platform fit.

twitter:description Recommended

What it does: Supplies the summary beneath the title.

Best practice: Keep it concise and scannable.

twitter:image Recommended

What it does: Supplies the card image.

Best practice: Use the same share image as og:image unless you intentionally want a platform-specific crop.

twitter:image:alt Optional

What it does: Adds accessible descriptive text for the image.

Best practice: Keep it natural and descriptive, similar to og:image:alt.

twitter:site and twitter:creator Optional

What they do: Associate the card with a brand or author account handle.

When useful: When the project has an active X presence and you want attribution to appear consistently.