What Is OGP? Meta Tag Basics, og:image Size, and How Social Cards Work

Have you ever pasted an article URL into X, Facebook, LINE, or Slack and watched it expand into one tidy "card" with a title, description, and thumbnail image? The mechanism that controls this appearance is a set of meta tags called OGP (Open Graph Protocol). This article walks through the basics of OGP and meta tags, the roles of the main tags, how social platforms build cards, and the recommended image size and how to verify your settings.

What OGP and Meta Tags Are

Meta tags are "information about the page (metadata)" written inside the HTML <head>. They are not displayed directly on screen, but they act as clues that let search engines, social platforms, and various tools understand the page. A page's title, description, character encoding, and zoom scale are all specified with meta tags.

OGP (Open Graph Protocol) is a standard originally proposed by Facebook. It is a group of meta tags that let the page itself specify "what title, description, and image should appear when this page is shared on social media." These tags carry the og: prefix, and today not only Facebook but also X (formerly Twitter), LINE, Slack, Discord, and many other services read this information to display a card.

In other words, OGP is a mechanism that lets site owners control how their pages look when shared. Without it, a shared link may appear with half-guessed information pulled from the body text, or as a plain link with no image. When you want to generate all the needed tags at once, the Meta Tag Generator can build correctly formatted tags from what you enter.

The Roles of title and description

Before the OGP-specific tags, let us cover the foundational basic meta tags. These are the most important elements, shared by both search results (SEO) and social media.

title is the single most important text expressing what the page is about. It becomes the headline that drives clicks in search results, and on social media it is used in place of og:title when that is not set. Because an overly long title gets truncated, put the key point first and keep it concise.

description is a summary of the page in roughly 120 characters. Search engines do not always show it verbatim, but it helps users decide whether to click. On a social card, this value is used as the description when og:description is absent. Since title and description underpin both OGP and search, always set them on every page.

The Meaning of og:title, og:image, and og:type

Now for the OGP-specific tags. Here are the representative ones. Each is written in the form <meta property="og:..." content="...">.

• og:title: the title shown when shared. If unset, <title> is used. You can make it shorter and more appealing for social.
• og:description: the description shown when shared, displayed below the title in the card.
• og:image: the URL of the card thumbnail. The centerpiece of appearance, it greatly affects visibility.
• og:url: the canonical URL of the page. Indicates which URL is the representative one when the same content is reachable via several URLs.
• og:type: the type of page. Use website for a normal page, or article for an article.
• og:site_name: the site name, shown as supplementary card information.

Of these, the minimum set worth having is the five: og:title, og:description, og:image, og:url, and og:type. In particular, og:image strongly affects the card's impression and click-through rate, so always specify a suitable image.

<meta property="og:title" content="What Is OGP">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:type" content="article">

Hand-writing each tag invites mistakes, so it is safer to generate them together with the Meta Tag Generator and copy and paste the result.

How Social Cards Work and twitter:card

Why does a card appear automatically when you paste a URL on social media? The flow is roughly as follows.

• A user posts the URL or opens a preview.
• The platform's crawler (an information-gathering program) accesses the page.
• It reads the OGP tags inside the page's <head> and obtains the title, description, and image.
• Based on that information, it generates and shows a card-style preview.

In addition to OGP, X (formerly Twitter) also reads its own twitter:card meta tag. The two common values are summary_large_image, which shows a large image at the top, and summary, which places a small square image beside the text. For articles where you want impact with a wide image, summary_large_image is the usual choice.

Note that many platforms cache (temporarily store) what the crawler fetched. As a result, changes to OGP may not appear immediately, and you may need to use each service's debugging tool to prompt a re-fetch of the cache.

Recommended og:image Size and How to Make One

og:image decides the card's first impression. The standard size for displaying cleanly and consistently across platforms is 1200 by 630 pixels (roughly a 1.91:1 wide ratio). Using this as your baseline, the image will appear properly as a large image card on major social platforms.

• Recommended size: 1200 by 630 pixels. Keeping the width at least 600 pixels is a safe minimum.
• Ratio: 1.91:1 wide. Square or tall images are prone to unintended cropping.
• File format: PNG or JPEG. Compress reasonably, since an overly large file can fail to fetch.
• Text placement: edges may be cut off, so place important text toward the center.

The image URL should be an absolute URL starting with https://, not a relative path. A relative path can prevent the crawler from fetching the image, causing the card to show no picture. When you want to prepare a 1200x630 share image quickly, the OG Image Generator lets you create an optimally sized image with your title text right on the spot. It is handy because you can prepare an image in the recommended ratio without opening design software.

How to Verify Your Settings

OGP is not finished once set; it is important to confirm that it is actually read correctly. The main verification methods are as follows.

1. Check the page source

Open the page in a browser and use the view-source feature to confirm that the og: tags are output correctly inside <head>. You can visually check for misspelled tags and whether og:image is an absolute URL.

2. Check with each platform's debugging tool

Major platforms such as Facebook and X provide debugging tools where you enter a URL and preview what the crawler actually fetched. Confirm that the image and title appear as intended, and after fixes, run a re-fetch of the cache.

OGP and meta tags are the foundation that creates your page's "face" in both search and social media. Start by setting up title and description, configure key tags such as og:title, og:image, og:type, and twitter:card, and prepare a 1200x630 image. Using the Meta Tag Generator for tags and the OG Image Generator for images, you can quickly get everything in order even without specialist knowledge.

Please note that this article is intended to provide general information. The specifications of OGP and twitter:card, the recommended sizes, and caching behavior may change at each service's discretion. When applying your settings, make your decision after checking the latest official information.