<meta name="description"> / OGP

meta name="description" is a meta tag that tells search engines a summary of the page. OGP (Open Graph Protocol) is a standard that specifies the title, image, and description shown when a URL is shared on social media.

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

<!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.

<!-- Example of a Google search result snippet -->
HTML Basics | Easy Programming
https://example.com/html/
A beginner-friendly programming learning site covering HTML and CSS from the basics to advanced topics.

<!-- Example of a social media share card -->
┌──────────────────────────────┐
│  [OGP image 1200×630px]      │
├──────────────────────────────┤
│ HTML Basics | Easy Programming │
│ Covers HTML and CSS from ... │
└──────────────────────────────┘

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".