HTML Course 15.4 Tags for social networks (Open Graph, Twitter Cards)

15.4 Tags for social networks (Open Graph, Twitter Cards)

1. Overview

Social networks rely on standardized meta tags to extract title, description, image and other metadata when a page is shared. Two main protocols exist:

Open Graph (used by Facebook, LinkedIn, Pinterest, many others)
Twitter Cards (used by Twitter and X)

These tags belong in the <head> section of your HTML page and must appear before any scripts that might alter DOM.

2. Open Graph protocol

Open Graph uses meta tags with property attributes prefixed by og:. Here’s a breakdown:

Property	Required	Description
og:title	Yes	The title of your page/content.
og:description	Yes	A brief description or summary.
og:image	Yes	URL to an image that represents the content.
og:url	Yes	Canonical URL of the page.
og:type	Yes	Type of object, e.g. `website`, `article`, `video.movie`.
og:locale	No	Locale string, e.g. `en_US`. Default is `en_US`.
og:site_name	No	Site name, e.g. “Example Blog”.

2.1 Example of basic Open Graph tags

2.2 Advanced Open Graph tags

og:video, og:video:width, og:video:height – embed a video preview.
og:audio – embed audio file URL.
article:author, article:published_time, article:tag – for article-specific metadata.
og:locale:alternate – specify alternative locales.

2.3 Example with video and article metadata

3. Twitter Cards

Twitter Cards use meta tags with name attributes prefixed by twitter:. You must also specify the card type:

Card Type	Description
summary	Small image and text preview.
summary_large_image	Large image with text preview.
player	Embedded video/audio player.
app	App download card with deep links.

3.1 Required Twitter Card tags

twitter:card – card type (summary, summary_large_image).
twitter:title – title of content.
twitter:description – brief description.
twitter:image – URL of image.

3.2 Basic Twitter Card example

3.3 Twitter Player Card example

4. Best Practices and Debugging

Always use absolute URLs (including protocol) for images and media.
Specify secure URLs (https://) when possible.
Check image dimensions: Open Graph recommends at least 1200×630 pixels, Twitter summary large 280×150 or 1200×628.
Validate with tools:
- Facebook Sharing Debugger
- Twitter Card Validator
- LinkedIn Post Inspector
Keep meta tags within the first 5 KB of the HTML for faster parsing.

5. Putting it all together

Below is a consolidated example combining both Open Graph and Twitter Cards: