OGP Tag Generator

Easily generate Open Graph Protocol (OGP) meta tags.

Generated OGP Tags

<meta property="og:type" content="website" />

What is the OGP Tag Generator?

The OGP Tag Generator is a tool that easily generates metadata to optimize your web pages' social media display. It supports both OGP (Open Graph Protocol) tags and X(Twitter) Card tags, enabling attractive previews on platforms like Facebook, X, and LinkedIn.

Why Set Up OGP Tags?

When web pages are shared on social media without proper OGP tags, titles and images may not display correctly, leading to decreased click-through rates. Setting up OGP tags provides the following benefits:

  • Improved Engagement: Attract user attention with compelling images and titles
  • Enhanced Brand Recognition: Strengthen brand image through consistent visuals
  • Increased Traffic: Boost click-through rates with visually appealing previews

Basic Usage

Required Fields

Enter the following basic information to generate standard OGP tags:

  1. Title (og:title) - Page title (main title displayed on social media)
  2. Description (og:description) - Page summary (short description text shown in previews)
  3. URL (og:url) - Canonical URL of the page
  4. Image URL (og:image) - URL of the image to display (recommended size: 1200×630px)

Advanced Options

Additional settings for more detailed configuration:

  • Image Width & Height - Explicitly specify image pixel dimensions
  • Image Alt Text - Alternative text for improved accessibility
  • Type - Content type (website, article, book, etc.)
  • Site Name - Brand name or site name
  • Locale - Language and region settings (e.g., ja_JP, en_US)

X(Twitter) Card Settings

For optimized display on X(Twitter), you can configure additional settings:

  • Card Type - Choose from summary, summary_large_image, app, or player
  • X Account - Site's X account (in @username format)

Implementation

Using Generated Tags

  1. Enter required information in the left form
  2. View the HTML tags generated in real-time on the right
  3. Copy the generated tags
  4. Paste them into your web page's <head> section
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>

  <!-- Paste generated OGP tags here -->
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Page description" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Site Name" />

  <!-- X(Twitter) Card tags (optional) -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@username" />
</head>
<body>
  <!-- Page content -->
</body>
</html>

For optimal display results:

  • Image Size: 1200×630px (aspect ratio 1.91:1)
  • Image Format: JPEG or PNG
  • Title Length: Under 60 characters
  • Description Length: Under 160 characters

Implementation Notes

  • Prefix Attribute: Modern social media platforms do not require adding prefix="og: http://ogp.me/ns#" to the <html> tag
  • Required Tags: It's recommended to set at least og:title, og:type, og:image, and og:url
  • Image URLs: Always use absolute URLs (URLs starting with https://)