HTML Open Graph Basics

Open Graph is a metadata protocol that helps webpages control how their content appears when shared on social media platforms and messaging apps. By adding Open Graph meta tags to your HTML document, you can specify the title, description, preview image, and URL associated with a webpage.

These tags are especially useful for blogs, tutorials, news articles, and business websites because a well-designed link preview helps people understand what they are about to open.

In this tutorial, you will learn what Open Graph is, how to add Open Graph meta tags, and how to create a basic social sharing preview.

What Is Open Graph in HTML?

Open Graph is a protocol originally developed by Facebook that allows webpages to provide structured metadata for social sharing.

Open Graph metadata is written using <meta> elements inside the HTML <head> section.

For example:

<meta property="og:title" content="HTML Open Graph Tutorial">
<meta property="og:description" content="Learn how Open Graph tags improve webpage link previews.">
<meta property="og:image" content="https://example.com/images/html-og.jpg">
<meta property="og:url" content="https://example.com/html-open-graph/">

These tags describe the page’s title, summary, preview image, and canonical sharing URL.

To understand where these tags belong, read our HTML Head tutorial.

Important Open Graph Meta Tags

The Open Graph protocol defines several properties. Four are particularly important for basic webpage sharing.

Property	Purpose
og:title	Specifies the title used for the shared content
og:description	Provides a short description of the page
og:image	Specifies the image used in the preview
og:url	Identifies the preferred URL for the shared page

For example:

<meta property="og:title" content="Learn HTML with Web4Learners">
<meta property="og:description" content="Explore practical HTML tutorials for beginners.">
<meta property="og:image" content="https://web4learners.com/images/html-tutorial.jpg">
<meta property="og:url" content="https://web4learners.com/html/html-head/">

Replace the example image URL with the actual public image you want to use, and make sure the URL accurately identifies the page being shared.

Creating a Complete Open Graph Example

The following example combines Open Graph metadata with standard HTML metadata.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML Open Graph Basics</title>

    <meta name="description"
          content="Learn how to add Open Graph meta tags for better social media link previews.">

    <meta property="og:title"
          content="HTML Open Graph Basics">

    <meta property="og:description"
          content="A beginner-friendly guide to Open Graph metadata.">

    <meta property="og:image"
          content="https://example.com/images/open-graph-preview.jpg">

    <meta property="og:url"
          content="https://example.com/html-open-graph/">

    <meta property="og:type" content="article">
</head>
<body>
    <h1>HTML Open Graph Basics</h1>
    <p>Learn how Open Graph metadata works.</p>
</body>
</html>

The og:type property identifies the kind of content. For an article, use article; for a general website page, website is commonly appropriate.

The regular HTML <title> and meta description serve browser and search-related purposes, while Open Graph tags provide metadata for sharing previews.

How Open Graph Tags Improve Social Sharing

When someone shares a link, a supported platform may retrieve the page’s Open Graph metadata to generate a preview.

A typical preview can include:

• A title describing the page.
• A short description.
• A thumbnail or preview image.
• A link to the original webpage.

For example, a tutorial shared in a messaging app might display its article title, a short summary, and a relevant image.

However, each platform has its own rules, caching behavior, and preview requirements. Adding Open Graph tags does not guarantee that every platform will display them exactly as specified.

Open Graph vs. Meta Description

Open Graph descriptions and standard meta descriptions have different purposes.

Feature	Open Graph Description	HTML Meta Description
HTML syntax	property="og:description"	name="description"
Main purpose	Describes content for link previews	Summarizes a page for search engines and other services
Typical use	Social media and messaging previews	Search-result snippets and page metadata
Display	Depends on the sharing platform	Depends on the search engine or service

You can learn more about standard metadata in our HTML Meta Tags tutorial.

Best Practices for Open Graph Metadata

• Add a relevant og:title and og:description to important pages.
• Use a high-quality, publicly accessible image for og:image.
• Specify the correct absolute URL for the shared page.
• Ensure the preview image matches the page content.
• Use the appropriate og:type value.
• Keep Open Graph metadata consistent with the actual page.
• Test link previews using the tools provided by the platform you are targeting.

Frequently Asked Questions

Is Open Graph required for HTML?

No. Open Graph tags are optional, but they can improve how shared links appear on supported platforms.

Does Open Graph improve Google rankings directly?

Open Graph tags are primarily intended for social sharing. They are not a direct Google ranking factor.

Can I use Open Graph tags on every webpage?

Yes. They are useful for articles, product pages, landing pages, and other pages that people may share.

What image should I use for og?

Choose a relevant, high-quality image that is publicly accessible and meets the target platform’s image requirements. Use an absolute URL rather than a relative file path.

Why is my Open Graph image not appearing?

The image may be inaccessible, cached metadata may be outdated, or the platform may have rejected the image because of its format or dimensions. Check the page’s metadata and the platform’s sharing-debugging tools.