<meta name="description"> / OGP

Since:		HTML5（2014）

meta name="description" is a meta tag that tells search engines a summary of the page. OGP (Open Graph Protocol) is a metadata standard that specifies the title, description, image, and other information displayed when a link is shared on social media. The card-like preview that appears when you paste a link on social media is controlled by OGP.

Syntax

<!-- Description for search engines -->
<meta name="description" content="Write a summary of the page in around 120–160 characters.">

<!-- OGP (for Facebook and general social media) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description shown when the page is shared.">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description shown when shared on Twitter.">
<meta name="twitter:image" content="https://example.com/ogp.png">

Common OGP Properties

Property / name	Description
og:title	Specifies the title displayed when the page is shared on social media.
og:description	Specifies the description displayed when the page is shared on social media.
og:image	Specifies the thumbnail image URL for shares. The recommended size is 1200×630px.
og:url	Specifies the canonical URL of the page.
og:type	Specifies the type of content. Use `website` for the top page and `article` for article pages.
og:site_name	Specifies the name of the site.
twitter:card	Specifies the display format for the Twitter Card. Options are `summary`, `summary_large_image`, `app`, and `player`.
twitter:site	Specifies the Twitter account name (including @) of the site owner.

Sample Code

sample_meta_description_ogp.html

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

  <!-- Description for search engines -->
  <meta name="description"
        content="A beginner-friendly programming learning site covering HTML and CSS from the basics to advanced topics.">

  <!-- OGP: for sharing on Facebook, LINE, and other social media -->
  <meta property="og:title" content="HTML Basics | Easy Programming">
  <meta property="og:description"
        content="Covers HTML and CSS from the basics to advanced topics, explained in a beginner-friendly way.">
  <meta property="og:image" content="https://example.com/images/ogp.png">
  <meta property="og:url" content="https://example.com/html/">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Easy Programming">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="HTML Basics | Easy Programming">
  <meta name="twitter:description"
        content="Covers HTML and CSS from the basics to advanced topics, explained in a beginner-friendly way.">
  <meta name="twitter:image" content="https://example.com/images/ogp.png">

  <title>HTML Basics | Easy Programming</title>
</head>
<body>
  <h1>HTML Basics</h1>
</body>
</html>

Result

The page looks the same in the browser, but on Google's SERP (search results page), the description appears as a snippet. When you paste a URL into social media, the image, title, and description specified in OGP are expanded as a card.

View sample page

Notes

meta name="description" communicates the page content to search engines like Google. It often appears as the snippet (description text) in search results and directly affects click-through rate (CTR), so it is recommended to write around 120–160 characters that clearly summarize the page. The description is not a ranking factor (it is not directly evaluated for SEO), but it influences whether users choose to click, so write it carefully rather than leaving it out.

OGP was defined by Facebook and is now widely adopted by platforms such as LINE, Slack, and Discord. The image specified in og:image should be 1200×630px (aspect ratio 1.91:1); images that are too small may not display or may be scaled down. Always specify the image URL as an absolute URL.

Twitter has its own "Twitter Card" specification, and the value of twitter:card controls the display format. summary_large_image is the most commonly used option, displaying a card with a large thumbnail image. For information that overlaps with OGP (such as title and description), Twitter often falls back to OGP values if no Twitter Card tag overrides them, but it is safest to specify both explicitly. For managing canonical URLs, also refer to link rel="canonical".

OGP for Article Pages (og:type = article)

For blog posts and technical articles, setting og:type to article enables additional metadata properties.

<!-- OGP for an article page (og:type="article") -->
<head>
  <meta charset="UTF-8">
  <title>HTML Basics | Easy Programming</title>

  <!-- Basic OGP -->
  <meta property="og:title" content="HTML Basics | Easy Programming">
  <meta property="og:description" content="A beginner-friendly guide to HTML tags.">
  <meta property="og:image" content="https://example.com/img/html-basics-ogp.png">
  <meta property="og:url" content="https://example.com/html/basics/">

  <!-- Article-specific OGP properties -->
  <meta property="og:type" content="article">
  <meta property="article:published_time" content="2025-01-15T09:00:00+00:00">
  <meta property="article:modified_time" content="2025-06-01T12:00:00+00:00">
  <meta property="article:author" content="https://example.com/about/">
  <meta property="article:section" content="HTML">
  <meta property="article:tag" content="HTML">
  <meta property="article:tag" content="Frontend">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@yourhandle">
</head>

Debugging and Verifying OGP

How to verify that OGP is configured correctly, along with common issues and their solutions.

Tool / Issue	Solution
Facebook Sharing Debugger	Enter your URL at developers.facebook.com/tools/debug/ to inspect OGP tags and refresh Facebook's cache.
Twitter Card Validator	Preview Twitter Cards at cards-dev.twitter.com/validator.
og:image not displaying	Check that the image URL is absolute (not relative) and that the image is at least 1200×630px.
Old image still showing on SNS	SNS platforms cache OGP images. Use the Facebook Debugger to "scrape" and force a cache refresh.