メタタグ・OGP生成の使い方｜SNSシェアで見栄えするカードを作る

公開日：2026年8月10日対象ツール：メタタグ（OGP）生成

ブログ記事やサービスページのURLを、LINE・X・Slack・Facebookなどに貼ったとき、タイトル・説明文・サムネイル画像つきの「カード」できれいに表示されると、クリック率が大きく変わります。この見栄えを決めているのが、HTMLの<head>内に書くメタタグです。メタタグ（OGP）生成は、いくつかの項目を入力するだけで、title・description・OGP・Twitter Cardのタグ一式をその場で組み立てる無料ツールです。値が空の項目はタグ自体を出力しないため、余計な空タグが混ざりません。

OGP・Twitter Cardとは

OGP（Open Graph Protocol）は、WebページをSNSで共有したときに、タイトル・説明・画像つきのカードとして表示させるためのメタタグの仕組みで、LINE・Facebook・Slack・はてなブックマークなどが参照します。Twitter Card（Xのカード）はX上でのリンク表示を制御するメタタグです。多くのSNSはtwitter:*の値が無ければog:*にフォールバックするので、まずはog:*を揃えるのが基本です。

主要タグの役割

og:title：カードの見出し。<title>とは別に指定できます。
og:description：カードの説明文。要点を前半に置くのがコツです。
og:url：そのページの正規URL。表記ゆれを防ぎます。
og:image：サムネイル画像。見栄えを最も左右します。
og:type：ページ種別。通常は website、記事なら article。
og:site_name：サイト名。カードに併記されます。
twitter:card：summary_large_image は大きな画像つきカード、summary は小さめのカード。Xで大きく見せたいときは前者にします。

画像（og:image）の推奨仕様

サムネイルは推奨サイズ 1200×630px（横長 1.91:1）、http(s):// から始まる絶対URLの実在画像を指定します。相対パスや画像の無いページはカードが崩れたり、サムネイルが出なかったりします。画像は誰でもアクセスできる公開状態にし、読み込みが遅くならないよう数百KB程度に収めると安心です。og:url も同様に絶対URLで指定してください。

生成したタグの貼り方

「ページタイトル」と「説明（description）」を入力します。title・og:title・og:description などに反映されます。
「ページURL」に正規URL、「画像URL（og:image）」に絶対URLの画像を入力し、og:type・サイト名・Twitterカード種別・Twitterアカウントを必要に応じて指定します。
下の欄に生成されたメタタグを「コピー」し、HTMLの<head>内（</head>より前）に貼り付けます。
<title>は1ページに1つだけにし、既存のタグと重複する場合は片方を消して置き換えます。

タイトルや説明に < > " & などの記号や、<script> のような文字列を入れても、生成テキスト内で自動的にエスケープされるため、貼り付けたHTMLが壊れる心配はありません。

公開後はOGPチェッカーで確認

タグを貼って公開したら、実際の見え方を確認しましょう。姉妹ツールのOGP・メタタグ確認（ogp-checker）にURLを入れると、SNSでどんなカードとして表示されるかをその場で点検できます。SNS側はカード情報をキャッシュするため、修正が反映されないときは各SNSのデバッグツールでキャッシュを更新すると確実です。

よくある失敗

画像URLが相対パス：SNS側で解決できず、サムネイルが出ません。絶対URLにします。
og:image を未設定：画像なしの寂しいカードになります。1200×630pxの画像を用意しましょう。
description が長すぎる：末尾が省略されます。要点を前半にまとめます。
画像が非公開：外部からアクセスできない画像はカードに表示されません。

よくある質問

OGPとTwitter Cardの両方を書く必要がありますか

まずは og:* を揃えれば十分です。多くのSNSは twitter:* が無ければ og:* にフォールバックして表示します。Xで大きな画像カードにしたい、アカウントを表示したいなど細かく制御したい場合に、twitter:card や twitter:site を追加してください。このツールは入力に応じて両方を生成できます。

og:type の website と article はどう違いますか

website は通常のページやトップページ向け、article はブログ記事やニュースなどの記事ページ向けの種別です。見た目に大きな差は出ないことが多いですが、記事には article を指定しておくと意味が正しく伝わります。迷う場合は website のままで問題ありません。

入力した内容はサーバーに送られますか

送られません。生成はすべてお使いのブラウザ内で完結し、入力したタイトルやURLなどが外部に送信されることはありません。オフラインでも動作するので、下書きや非公開ページの内容も安心して入力できます。もちろん無料で、回数制限もありません。

タイトルや説明に絵文字や記号を入れても大丈夫ですか

大丈夫です。" < > & などの記号は属性値として自動的にエスケープされ、日本語や絵文字もそのまま使えます。貼り付けたHTMLが壊れたり、意図せずタグとして解釈されたりしないよう配慮しています。

SNSでシェアされたときの第一印象は、カードの見栄えで決まります。メタタグ（OGP）生成でタグ一式を作り、<head>に貼って公開し、OGP・メタタグ確認で仕上がりをチェックする——この流れを押さえておけば、どのページも安定してきれいなカードで表示できます。入力内容はすべてブラウザ内で処理され外部に送信されないので、まずは手元のページで気軽に試してみてください。

「メタタグ（OGP）生成」を使ってみる →