SNSで記事がシェアされたとき、「思っていた表示と違う」「期待した画像が出ない」「タイトルが切れる」といった経験はありませんか。そうした悩みを解決できるのがOGPタグ（Open Graph Protocol）です。このリード文では、OGPタグを自分で作る方法に焦点を当て、HTMLでの手動設定からWordPressテーマの編集、推奨サイズや見栄え最適化、よくあるトラブルと対処法まで、SEO対策として知っておきたいポイントを網羅的に解説します。これを読めば、SNSでのシェアがより魅力的で効果的になります。
目次
OGP タグ 自分で 作る 方法：基本と準備
OGP タグ 自分で 作る 方法を始めるには、まずOGPの役割や構造、準備すべき要素を理解することが不可欠です。SNSシェア時の見た目をコントロールするため、これらの基礎を押さえてから実装に移ると失敗が少なくなります。
OGPとは何か：シェア表示を制御する要素
OGPは、SNSでURLを共有したときに表示されるタイトル・説明・画像・URLといった情報を指定できるメタデータ規格で、FacebookやLINEなどがこの情報を参照してカード型の表示を行います。HTMLのタグ内に「og:〜」で始まるメタタグを記述し、意図しないテキストや画像が出るのを防ぎます。準備が整っていないと、自動で選ばれた画像や抜粋が表示されることがあります。
必要なタグの種類とそれぞれの意味
OGP設定には、最低限次のメタタグが必要になります。
・og:title：ページタイトルを指定します。魅力的かつ簡潔にし、SNSでユーザーの目を引きます。
・og:description：内容の要点を説明します。約80〜120文字が読みやすく、クリックにつながりやすい長さです。
・og:image：サムネイルとして表示される画像。表示される際の視覚的インパクトを決めます。
・og:url：ページの正規URL。canonicalと一致させて重複を防ぎます。
また、og:typeやog:site_nameなどのタグも適切に設定すると、SNSによる表示がより正確になります。
実装前の準備項目：画像とサイズ・URL構成など
OGP画像の準備は特に重要です。推奨されるサイズは横1200ピクセル×縦630ピクセルで、アスペクト比およそ1.91:1となります。画像のフォーマットはJPEGまたはPNGが一般的で、ファイルサイズは適度に軽く保ちます。URLはhttpsを使ったフルパスを指定し、ページのcanonical URLと一致させます。準備が整っていると、実装後のトラブルが少なくなります。
WordPressでOGPタグを自分で作る方法：テーマとfunctions.php編集
WordPress環境でOGP タグ 自分で 作る 方法を実践する際は、プラグインを使わずにテーマファイル（特にfunctions.phpやheaderテンプレート）を編集する手法が効果的です。手動で作ることで、細部まで制御可能になり、プラグイン依存から解放されます。
header.phpまたはheadセクションへのmetaタグの直接追加
テーマのheader.phpもしくはタグがあるテンプレートファイルに、og:titleやog:descriptionなど必要なタグを直接追加します。以下のようなHTML記述を使います。
<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”>など。
この方法では、サイト訪問者だけでなくSNSのクローラに正しく読み取ってもらうために、HTMLがサーバーサイドで完全にレンダリングされていることが重要です。
functions.phpを使って自動化する方法
functions.phpにカスタム関数を追加し、投稿ページ・固定ページ・トップページなどの条件判定を行ってタグを自動出力する方式が望ましいです。例えば、投稿・固定ページにはog:typeをarticle、トップページやアーカイブにはwebsiteを返す関数を作成します。画像も投稿アイキャッチを優先し、なければデフォルト画像を使用するようにするのが一般的です。
他のプラグイン出力との重複防止
WordPressではSEOプラグインやテーマフレームワーク、Jetpackなど複数の箇所でOGPタグが出力されることがあります。タグが重複するとSNSシェア時に予期しないタイトルや画像が表示される原因になります。重複を防ぐには、不要なプラグインのOGP出力を無効化するか、functions.phpでremove_actionなどを使って制御します。
HTMLだけでOGPタグを自分で作る方法：静的サイトや手書きページの場合
HTMLベースの静的サイトでOGP タグ 自分で 作る 方法を取り入れるときは、テーマ編集よりも記述が直接的です。手書きHTMLに記述する際の正しい場所や書き方、SEO上の注意点を抑えましょう。静的サイトであれば、変更が即反映されやすい利点があります。
head要素内にタグを入れる正しいタイミングと場所
手書きのHTMLファイルでは、<head>タグの開始直後から<title>タグやcharset設定の後、OGPタグを記述します。後ろになるとCSSやJavaScriptのロードが優先され、SNSクローラに正しく読み込まれないことがあります。charset指定の次、 canonical URL の設定前後が適切なタイミングです。
必須タグと追加するとよいタグのカスタマイズ
基本の4つのタグ（og:title／og:description／og:image／og:url）に加えて、og:type／og:site_name／og:localeなどを追加することで、表示の一貫性が向上します。さらに、場合によってfb:app_idやog:image:width・og:image:heightを入れることでSNSプラットフォームが画像のサイズを先に認識でき、トリミングや読み込みの最適化につながります。
静的HTMLの例：完全なOGPタグの構成サンプル
静的サイト用に以下のような構成の例があります。
<head>
<title>ページタイトル</title>
<meta property=”og:title” content=”ページタイトル”>
<meta property=”og:description” content=”ページ概要文”>
<meta property=”og:image” content=”画像のURL”>
<meta property=”og:image:width” content=”1200″>
<meta property=”og:image:height” content=”630″>
<meta property=”og:url” content=”ページURL”>
<meta property=”og:type” content=”article or website”>
<meta property=”og:site_name” content=”サイト名”>
<meta property=”og:locale” content=”ja_JP”>
</head>
このように揃えておくことで、SNSでのシェア表示が正確になり、見た目も整い、クリック率向上に繋がります。
OGPタグの作成で重要な画像と見た目の最適化
OGP タグ 自分で 作る 方法において、画像の見栄えやタイトル・説明文の表示はシェアの反応に大きく影響します。ここでは最新の仕様や視認性の良いデザイン要件、文字数やトリミングの注意点を解説します。
推奨画像サイズとフォーマット
SNSで美しく表示されるOGP画像として、1200×630pxが一般的な推奨サイズです。このサイズは主要プラットフォームの多数で最適表示されやすくなります。画像フォーマットとしてJPEGやPNGを使い、色空間やファイルサイズを抑えることで読み込み速度にも配慮します。特にPNGは透過がある場合に使いますが、透過が不要ならJPEGの方が軽量になることが多いです。
タイトルと説明文の長さと文字数制限
タイトルはSNSで切れることがないよう、約50〜60文字以内を目安にし、重要なキーワードを前方に配置します。説明文は80〜120文字程度で内容の核心を伝えると良好です。また日本語では全角文字を使うため、全角換算で考え、前半に引き込む表現を入れるとスクロールや省略時でも理解されやすくなります。
画像のトリミングと可視範囲の確認
SNSで画像が表示される際には、トリミングや余白の切り落としが起きることがあります。重要なテキストや人物の顔が端に来ないよう中央に配置するのが基本です。余白を考慮したデザインを作成し、プレビュー確認できるツールで実際の見た目をチェックすることで、意図した印象を維持できます。
設定後の確認方法とよくあるトラブル対処
OGP タグ 自分で 作る 方法を実装した後、シェア時に意図した表示になっているかどうかを確認し、問題があれば対処することが重要です。ここでは検証ツールの使い方、よくある問題とその解決策を紹介します。
SNSプラットフォームのデバッグツールの活用
Facebookにはシェアデバッガーがあり、ページURLを入力することで現在読み取られているOGPタグや表示プレビューを確認できます。更新を反映させたい場合は再スクリプトを実行することでキャッシュが更新されます。他にも、X（旧Twitter）のカードバリデーターなどで、表示崩れやタグの欠落をチェックする習慣をつけると安心です。
キャッシュやタグ重複による表示不一致の原因と対策
設定を変えたのにSNSで古いタイトルや画像が表示される場合、キャッシュの問題が多いです。デバッグツールで再クローリングを実施します。また、OGPタグが複数存在するとSNSがどれを使うか不定になりますので、テーマとプラグインの両方で出力されていないかソースを確認し、不要な出力を抑制します。
画像が表示されない・URLが間違っている場合のチェック項目
OGP画像が表示されない場合は以下を確認します。画像URLがhttpsであるか、アクセス可能で404エラーでないか。ファイルフォーマットが対応しているか。画像サイズが推奨範囲を満たしているか。robots.txtやサーバー設定で画像がクローラーからブロックされていないかなど。このような項目を順に潰していくことで問題は解決します。
プラグインを活用する選択肢：手間を減らしつつカスタマイズも可能
自分で作る方法に自信がない場合やメンテナンスを楽にしたい場合には、WordPressのSEOプラグインを活用するのも良い選択肢です。適切なプラグインを選び、手動設定と組み合わせることで効率と制御を両立することができます。
代表的なSEOプラグインのOGP機能
All in One SEOやYoast SEOなど、多くのSEOプラグインにはOGP設定機能があります。投稿編集画面では、画像・タイトル・説明文を個別に設定できるものも多く、デフォルト設定も備わっているため、初心者でも始めやすい特徴があります。プラグインを選ぶ際は日本語対応やサポート体制のあるものを優先すると安心です。
プラグイン使用時の重複問題と制御方法
プラグインを使うと便利ですが、テーマで同じOGPタグが出力されていると重複が起きます。重複は表示崩れやSNSでのエラーを招くため、テーマ側で出力しているタグを無効にするか、プラグインでのみ出力するように設定します。具体的にはテーマのheader.phpやfunctions.phpで不要な出力をremove_actionするなどの対応があります。
プラグイン利用と手動設定の組み合わせのコツ
基本設定はプラグインに任せつつ、個別の投稿やキャンペーンページでは手動でカスタマイズするというハイブリッドな運用が理想です。たとえばデフォルトOGP画像・タイトルはプラグインで設定し、ブログ記事でアイキャッチ画像・個別タイトル・説明を加えることで一貫性と独自性の両立が可能になります。
最新情報を踏まえたSEO上の注意点と改善のヒント
OGP タグ 自分で 作る 方法においては技術仕様やソーシャルメディアの動向が変わることもあるため、最新情報を取り入れてSEO効果を高める工夫が必要です。検索エンジンの評価やSNSでの見え方にも配慮し、常に改善を図る姿勢が重要です。
画像のアクセス制御と高速読み込み
画像をHTTPSで配信し、キャッシュヘッダーや圧縮などで読み込み速度に配慮することが求められます。大きすぎる画像は読み込みに時間がかかり、低速な環境ではシェア用カード表示まで遅延が発生することがあります。CDNの活用や画像の最適化はSEOパフォーマンスにも影響します。
モバイル時の表示最適化とメタタグの順序
SNSプラットフォームやモバイルデバイスでの表示は、タイトル・説明・画像が重要部分で切れて表示されることがあります。タイトルや説明文は前半に重要な情報を配置し、モバイルでの見え方を意識して文字数を調整します。また、headの中でcharsetやviewport、canonicalなどが先にあることでクローラの処理がスムーズになります。
SEO評価との関係と影響
OGPタグ自体は検索エンジンのランキング要因ではないものの、SNSからの流入やシェア率の向上によって間接的にSEOに好影響を与えることがあります。魅力的なカード表示でクリック率が上がれば滞在時間やリピート率の改善も期待できます。したがって手を抜かずに丁寧に設定することが重要です。
まとめ
OGP タグ 自分で 作る 方法は、SNSシェア時の見た目を思い通りにする力があります。HTMLだけで記述するのも良いですし、WordPressではテーマのファイル編集やfunctions.phpでの自動化も可能です。画像サイズやタイトル・説明文の長さ、トリミングの注意点などを意識しながら、デバッグツールで確認して問題を潰していくことで、より効果的なシェア表示が実現します。
SNSや検索エンジンの仕様は変わることがありますので、実装したら表示を定期的にチェックし、必要なら更新を加えていく姿勢が大切です。手動設定とプラグインの組み合わせなど、適切な方法を選んで、あなたのサイトのSNSからの流入とブランドの印象を最大化していきましょう。
コメント