あなたのウェブページがSNSでシェアされたとき、期待通りの画像やタイトル、説明文で表示されないのは残念ですよね。そこで本記事では、OGPタグを自分で作る方法を基本の書き方から設定・確認・活用まで丁寧に解説します。HTML初心者でも理解できるようにステップごとに紹介しますので、最後まで読んで設定マスターになりましょう。最新情報を基にして安心して試せる内容になっております。
目次
OGP タグ 自分で 作る 方法の基本構成と必要要素
まずはOGPタグを自分で作る方法で絶対に押さえておきたい基本構成や必要要素について解説します。OGP（Open Graph Protocol）はページをSNSでシェアする際に見える情報をコントロールする仕組みですので、頭の中で構造を理解しておくことが大切です。
OGPタグの基本構成は head タグ内に配置し、meta 属性で指定します。以下の要素を揃えることでSNSでの見映えが良くなります。ここでいう「自分で作る方法」には、HTMLで直接記述する方法も含みます。
og:title や og:description の役割と書き方
まず og:title はシェア時に目立つタイトルを指定するタグです。ページタイトルと同じでも構いませんが、SNSで途切れないよう文字数（たとえば全角30～60文字前後）に調整するとよいです。内容を端的に伝え、クリックしたくなる魅力を持たせることがポイントです。
og:description はそのページの概要を表す説明文です。クリック率に直接影響するため、「何が書いてあるか」を簡潔に要約します。全角80～100文字程度を目安に、重要な情報を先に持ってくることが望ましいです。スマホでの省略表示を考慮すると冒頭に核となる内容を入れましょう。
og:image の指定と画像サイズ・形式の注意点
og:image はSNSで表示されるサムネイル画像を指定します。ここで指定する画像がないと、SNS側が勝手に推定することになるため、必ず設定することが大切です。画像はサーバーにアップロードし、絶対URLで指定してください。
画像の推奨サイズは 横1200px × 縦630px が一般的で、比率はおおよそ1.91:1 です。画像形式は JPG または PNG を選びます。WebPなどの次世代フォーマットは対応が不十分なSNSもあるため、汎用性を重視するなら JPG／PNG にしておいた方が無難です。
og:type・og:url・og:site_name の意味と使い分け
og:type はそのページがどんな種類のページかを指定します。記事ページなら article、サイトのトップや一覧など共通コンテンツなら website などを選ぶとよいです。SNS表示のスタイルが変わることがあるため、適切なタイプを指定します。
og:url はそのページの正規URLを指定するタグです。リダイレクト先やクエリ付き URL ではなく、正しく表示すべき URL を指定します。絶対URLで書きます。
og:site_name はそのサイト全体の名前を示します。ブランドやサイト名を書くことで信頼感が増し、複数コンテンツ間で統一感を出すのに役立ちます。こちらも書いておくとよいです。
HTMLにOGPタグを自分で作る方法と書き方の具体例
ここからは、具体的にタグを HTML に書く方法をご紹介します。自分で作る方法として、手動で head タグ内に記述する方法を中心に、テンプレート例や prefix 属性の使い方などをまとめます。
HTML の head 内に書くべき基本テンプレートは以下のような構成です。これは多くの SNS で推奨されている形式を取り入れていますので、自サイトに合わせて変数を入れてください。
<head prefix="og: http://ogp.me/ns#"> <meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="ページの説明文"> <meta property="og:image" content="絶対パスで画像URL"> <meta property="og:url" content="ページの正規URL"> <meta property="og:type" content="article or website"> <meta property="og:site_name" content="サイト名"> </head>
prefix 属性の書き方と注意点
HTML 文書で OGP を使う際には、 head タグの開始タグに prefix 属性を追加するのが望ましいです。たとえば “ のように設定します。これによって OGP の namespace を明示でき、SNS や検証ツールで正しく解釈されやすくなります。
ただし、テーマや CMS によってはこの属性が自動で付与されていたり、不要な場合もあります。先に既存のソースコードを確認し、重複しないように注意してください。
テンプレート例：コピペで使える基本メタタグセット
以下は汎用的に使えるテンプレートセットです。自分のページタイトルや説明文、画像 URL、サイト名などを書き換えて使ってください。大きく手を加える必要はありませんが、可読性を意識して記入すると修正がしやすくなります。
<head prefix="og: http://ogp.me/ns#"> <meta property="og:title" content="あなたのページタイトルをここに書く"> <meta property="og:description" content="このページの内容を簡潔に説明する文を書く"> <meta property="og:image" content="https://サーバーパス/画像ファイル名.jpg or png"> <meta property="og:url" content="https://サーバーの正規URL"> <meta property="og:type" content="article"> <meta property="og:site_name" content="サイトの名前"> </head>
言語設定や特殊文字のエスケープ
タイトルや説明文内で日本語を含める場合、HTML エンティティを使って & や のような特殊文字を正しく表現することが重要です。違うと表示崩れやタグ解釈ミスにつながることがあります。
また lang 属性などを html タグにつけておくと、言語の情報が伝わりやすくなります。meta charset=”utf-8″ を指定しておくこともトラブル防止になります。
WordPress など CMS で OGPタグを自分で作る方法
自分で HTML を書くのが苦手、またはテンプレートテーマを使っている場合は CMS（とくに WordPress）で設定する方法もあります。テーマやプラグインを活用すれば手軽に正しい OGP が設定できます。
WordPress での一般的な流れと注意点を押さえておけば、HTML を直接編集するのが苦手な人でもサイト全体で統一した表示が可能になります。
テーマにデフォルトで備わっている OGP 対応機能の調査
まずは現在使っているテーマが OGP に対応しているかどうかを確認します。テーマのカスタマイズ設定に「OGP」「ソーシャル」などの項目があれば、そこからタイトル・画像・説明文を設定できる場合があります。
対応している場合、その設定項目で各 meta タグを入力または自動生成できるので、テーマアップデート時に崩れにくいメリットがあります。テーマ内で自動生成されていない項目があれば手動で追記することも可能です。
代表的なプラグインでの設定方法の流れ
SEO系プラグインには OGP 設定機能が含まれていることが多く、タイトル・説明文・画像を投稿ごとに指定できるものが一般的です。投稿編集画面やソーシャル設定パネルから各項目を埋めていきます。
投稿ページだけでなく固定ページ・トップページ・アーカイブページなどもプラグインで設定可能な場合がありますので、サイト全体の見栄えを揃えられるよう各ページタイプでの設定を確認してください。
OGPタグが反映されない場合の対処法
CMS 設定を変えても SNS に反映されないことがあります。主要な理由はキャッシュと URL の正規化です。SNS が一度取得した情報を保持しているキャッシュをクリアする必要があります。SNS デバッガーツールなどを使って再取得を促します。
また、og:url がリダイレクト先やパラメータ付き URL ではなく正規の URL を指定しておくこと、それに関連してサーバー設定や canonical タグの設定も併せて見直すことでトラブルを減らせます。
主要 SNS ごとの表示の違いと最適化ポイント
OGP タグを作る方法が分かったら、それをどの SNS でどう見せたいかを考えることが重要です。Facebook、X（旧 Twitter）、LINE などそれぞれ表示仕様や切り取り方、文字数制限が異なりますので最適化すると表示効果が高まります。
ここでは代表的な SNS を取り上げ、それぞれの特徴とタグ作成時の工夫を紹介します。見た目の印象やクリック率に直結する部分ですので、しっかり理解しておきましょう。
Facebook の表示仕様と注意点
Facebook は og:image が正しく指定されていると画像を大きく表示する傾向があります。推奨される画像サイズは横1200px×縦630px、比率は約1.91:1 です。これに満たないと画像のトリミングや表示崩れが起こることがあります。
また Facebook では一度取得された情報をキャッシュとして保持するため、内容を更新したらデバッガーでスクレイピングをやり直し、最新情報を反映させることが重要です。画像切れ・古い表示といった問題の多くはこのキャッシュに起因します。
X（旧 Twitter）の表示仕様と twitter:card の使い方
X では og:タグだけでなく twitter:card や twitter:site などの独自タグを併用することで表示を制御できます。カードの種類には summary_large_image などがあり、大きな画像表示にも対応します。
X で良く使われる twitter:card タグは head 内に記述します。さらにタイトル・説明文・画像で内容を揃えると、Facebook と似た表示になることが多く、SNS クロス投稿時の見た目の統一に役立ちます。
LINE やその他 SNS の仕様と注意点
LINE ではトーク上で表示されるプレビューが省略されやすく、説明文がカットされることがあります。よって画像やタイトルで訴求力を持たせることが重要です。また表示横幅が狭いため、画像の横幅に余白を持たせたデザインが望ましいです。
その他の SNS やアプリでは正方形にトリミングされることがあり、重要な要素（ロゴやテキスト）は画像の中心付近に配置することが安全策です。デバイスによる表示差もあるため、複数のプレビューを確認するのがベストです。
OGPタグ 自分で 作る 方法を実際に設定する手順
ここまでで理論は理解できたと思いますので、実際に自分で作る方法として設定手順を具体的に追っていきます。HTML コード記入から画像準備、表示確認まで一連の流れを整理して手を動かせるようにします。
手順は段階を踏んで進めるとミスが少なくなります。見落としがちなポイントにも触れるので、順番を守りながら各ステップで確認してください。
ステップ1：画像準備とサーバーアップロード
まずはサムネイル画像を用意します。横1200px×縦630px を目安にデザインし、重要な文字やロゴは中心付近に配置します。ファイル形式は JPG または PNG を選び、ファイルサイズは 1MB 以下に抑えると表示速度や読み込みにも有利です。
画像を用意したらサーバーや CMS のメディアライブラリなどにアップロードします。絶対パスでアクセスできる場所に置くことが重要です。HTTPS に対応しているとセキュリティ面でも安心です。
ステップ2：HTML の head 内にタグ記述
画像が準備できたら、HTML の head タグ内に先ほどのテンプレートセットを使って meta タグを記述します。og:title、og:description、og:image、og:url、og:type、og:site_name はすべて入れることをおすすめします。
prefix 属性の指定を忘れずに。特殊文字が含まれる場合はエスケープして記述。文字コードは UTF-8 を指定しておくとトラブルが減ります。head 内に配置する位置はタイトルタグや charset タグの近くが管理しやすいです。
ステップ3：WordPress での投稿ごとのタグ指定
WordPress を使っている場合、投稿編集画面で各投稿ごとにタイトル、説明、画像を設定できるプラグインを活用します。SEO・ソーシャル系プラグインにはこの機能が含まれていることが多いです。
画像は投稿単位で変えることで、各記事ごとの個性が出せます。トップページやアーカイブページでもそれぞれ表示に適した画像・説明を用意すると、SNS シェア時に見た目が整います。
ステップ4：表示確認とキャッシュクリア
タグを記述したら、SNS ごとのデバッガーやプレビュー確認ツールを使って表示をチェックします。Facebook のシェアデバッガー X のバリデーターなどを使い、どんな表示になるか確認し、見切れ・省略などがないか確かめましょう。
また、タグや画像を更新した後は SNS 側でキャッシュが残っているため、強制スクレイピングやキャッシュ更新操作を行うことで最新情報が反映されるようにします。これを怠ると古い画像・説明が表示され続けることがあります。
OGPタグ 自分で 作る 方法を実践する際の注意点とよくある失敗
実際にタグを自分で作るときには陥りやすい失敗や避けたい点もあります。ここでは代表的な注意点と改善方法を挙げておきます。セットアップミスを減らして安定した見映えを得るために役立ちます。
以下のポイントをチェックリストとして扱い、設定後に必ず見返してください。細かい部分が見え方に大きく影響することがあります。
画像切れ・トリミングによる情報欠如
画像が推奨サイズを満たさないと、SNS が自動でトリミングしたり、重要な部分が切れてしまうことがあります。特に正方形表示になる場合を想定して、ロゴや文字は中央付近に配置することが望ましいです。
また、画像に余白を持たせたり、背景を考慮するなどデザイン段階で表示変化を予測しておくとよいでしょう。プレビューで確認して様々な環境でどう見えるかをチェックするのが効果的です。
文字数過多による省略・表示崩れ
タイトルや説明文が長すぎるとスマホ画面などで自動省略されてしまいます。タイトルは全角30～60文字、説明文は全角80～100文字前後を目安とし、重要なキーワードや訴求点は文の先頭に持ってくるように構成します。
特殊文字の扱いにも注意しましょう。HTML エンティティを使わずに記述するとタグの解釈に支障をきたす場合があります。マークアップが崩れたり表示が乱れたりするので慎重に記述してください。
URL の不一致・リダイレクト問題
og:url に書かれる URL と実際にアクセスされる URL が異なると、SNS 表示が正しく行われなかったり canonical の評価が分断されることがあります。リダイレクトやパラメータ付き URL を使っている場合は、正規 URL を指定してください。
また HTTPS を使用しているか、URL がアクセス可能かどうか確認します。画像 URL やページ URL が404 エラーを出していたりアクセス制限があったりするとプレビューが正常に表示されない原因になります。
OGPタグ 自分で 作る 方法のSEO的効果と活用戦略
OGP 自分で作る方法を単に見た目の良さのためだけに行うのではなく、SEO やサイトへの流入、ブランディングにつなげる戦略として活用できることがあります。ここではその効果と施策を紹介します。
SNS でのシェア数やクリック率の向上が結果として間接的にサイト評価を上げることがあります。SNS 経由のアクセスが増えれば滞在時間やユーザー行動も改善する可能性があるため、SEO の観点でも無視できません。
クリック率の向上とサイト流入の倍増
魅力的な画像とタイトル・説明文でシェアされることで、ユーザーの目に止まりやすくなります。結果としてクリック率が上がり、SNS 経由の流入が増加します。訪問者が興味を持って本文まで読んでくれれば、離脱率の改善にもつながります。
さらにページごとに内容と合致した OGP を設定することで、「この記事ならこういう内容だ」という期待値を正確に伝えられ、ユーザーエクスペリエンスの向上にもつながります。
ブランドイメージの統一と信頼性の強化
サイト全体で og:site_name を統一し、ロゴや画像のトーン・タイトルのスタイルを揃えることで視覚的なブランド力が高まります。見た目の統一は信頼感につながりやすく、再訪問者や紹介を受けるときの信頼性を支えます。
また、SNS でシェアされた際の表示がきちんとしていると、「このサイトはしっかり管理されているな」という印象を与えることができ、ユーザーの評価にも良い影響を及ぼします。
検索エンジンとの関係と間接的なメリット
直接的に OGP タグが検索順位を決定する要因とはされていませんが、SNS 流入増加やユーザーエンゲージメントの向上が巡り巡ってサイト全体の評価を上げる可能性があります。コンテンツがシェアされやすくなることで被リンクや話題性も増すことが期待できます。
また、画像・説明文などが整っていることで検索結果のスニペットと統一感を持たせられる場合があり、SERP 上での印象も良くなります。その結果、クリック率が上がることで SEO 的な恩恵を得られることがあります。
まとめ
OGP タグを自分で作る方法は、見た目を整えるだけでなく、SNS からの流入・ブランド構築・ユーザー信頼の向上につながります。まずは基本構成の理解、適切な画像とテキストの準備、HTML や CMS での正確なタグ記述といったステップを順番に追って設定していきましょう。
特に画像サイズや文字数、URL の正規化、キャッシュクリアなどが見落とされやすいポイントです。これらに注意することで、SNS シェア時の表示が意図したものになり、効果を最大化できます。自分で作る方法を習得することで、サイト運用における武器がひとつ増えるはずです。
コメント