CodeBlanks Logo Icon CodeBlanks
Login Register

Open Graph

HTML course · Advanced · Lesson 25/56

Build social share metadata with og:title, og:image, og:type.

What is Open Graph?

When you share a link on social media, you see a card: title, description and a large image. That card is built with the Open Graph protocol.

Open Graph tags use the form <meta property="og:...">. Here you use the property attribute, not name. The three essential tags are og:title, og:image and og:type.

og:title and og:image

og:title is the title of the share card; it can match or differ from the page title. og:image is the URL of the image shown on the card.

Use an absolute URL for og:image: https://site.com/cover.jpg. The image is usually 1200x630 pixels; smaller sizes make the card look broken. Make sure the image is served over https.

og:type and og:url

og:type states the type of the page. Use article for a blog post, product for a product page and website for the home page.

og:url is the canonical URL of the page. When the same content is reachable from several addresses, og:url tells search engines and social platforms the original source.

Exercise Add Open Graph tags for a blog post

Add four Open Graph tags to the head for a blog post: <meta property="og:title" content="...">, <meta property="og:image" content="https://...">, <meta property="og:type" content="article"> and <meta property="og:url" content="https://...">.

Show example solution 
<head>
  <title>Blog Post</title>
  <meta property="og:title" content="Blog Post: Web Design">
  <meta property="og:image" content="https://alexblog.com/cover/design.jpg">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://alexblog.com/article/web-design">
</head>

Test yourself

  1. Which attribute do Open Graph tags use?

    <meta ?="og:title" content="...">
    • name
    • id
    • property
    • class
    Show answer

    property — Correct. Open Graph tags are written with the property attribute.

  2. Match the OG property with its role

    og:title
    Share title
    og:image
    Cover image
    og:type
    Content type
    og:url
    Page URL

  3. Complete the og:title tag

    <meta property="og:title" content="____">
    Show answer 
    <meta property="og:title" content="Blog Post: Web Design">

All lessons in Advanced

1 Advanced media

  1. Lazy loading
  2. Decoding async
  3. Srcset and sizes
  4. Width/height and CLS
  5. Preload and prefetch
  6. Summary - Performance gallery

2 Picture and responsive images

  1. Picture and source
  2. Media attribute
  3. Type attribute
  4. Aspect ratio
  5. Background vs img
  6. Summary - Responsive hero

3 Project: Video player

  1. Project: Accessible video player
  2. Video skeleton
  3. Track and captions
  4. Poster and preview
  5. Project final - Video player

4 Complex forms

  1. Form autocomplete
  2. Hidden input
  3. File upload
  4. Range and color
  5. Output and form events
  6. Summary - Settings panel

5 Metadata and SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical and hreflang
  5. Title and slug strategy
  6. Summary - SEO package

6 Project: Schema.org markup

  1. Project: Schema.org markup
  2. Itemtype and itemid
  3. Itemprop
  4. Nested itemtype
  5. Project final - Structured data

7 Web components HTML

  1. Template element
  2. Slot element
  3. Custom element names
  4. Shadow DOM skeleton
  5. Declarative shadow DOM
  6. Summary - Card template

8 Templates and partials

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript and progressive
  6. Summary - Component skeleton

9 Project: Dashboard widget

  1. Project: Dashboard widget
  2. Widget skeleton
  3. Visual data structure
  4. Template and slot
  5. Project final - Widget

10 Advanced final

  1. Challenge - Responsive image
  2. Challenge - Accessible video
  3. Challenge - Complex form
  4. Challenge - SEO and structured data
  5. Challenge - Advanced capstone