og タグ
よみ: オージー・タグ
SNSで Web ページがシェアされた際に、タイトルや画像をカード形式で魅力的に表示させる仕組み(OGP)を機能させるために記述する、HTML の meta タグ群です。
代表的な og タグ（HTML の head 内に記述）
og:title：ページのタイトル。og:description：ページの説明文。og:image：サムネイル画像(推奨サイズ 1200×630px / 縦横比 1.91:1)。og:url：ページの URL。og:type：ページの種類(website、article など)。
X(旧 Twitter)向けには twitter:card など独自のタグも併せて設定します。
実務での運用ポイント
- ページごとの個別設定：CMSの自動生成に任せると、全ページが同じ汎用画像になりがちです。重要なページや記事には、内容に合った個別の
og:imageを必ず用意しましょう。 - 公開前の表示確認：Facebook の「シェアデバッガー」などを使い、意図した通りにカードが表示されるかテストします(X の場合は、実際の投稿下書き画面に URL を入力してプレビュー確認するのが確実です)。
よくある落とし穴(注意点)
- og タグを設定し忘れ、シェアされた時に文字だけの味気ないリンクになる。
- 全ページで同じ og タグ(画像やタイトル)を使い回しており、記事ごとの内容が伝わらない。
- 公開前のプレビュー確認を怠った結果、SNS 上で画像が変に見切れたり、古い画像が表示されたりする。
言葉をよく利用する人
- SEO 担当者
- Web 担当者(発注側)
- コーダー / フロントエンドエンジニア
- マーケター
会話上での使用例
新規記事の公開前にSNS表示をライターと確認する場面
-
ライター
記事の準備が終わりました。あとは公開だけです。
-
Web 担当者
ではog タグを確認しますね。シェアされたときの画像はトップの画像に、タイトルはページ名に合わせておきます。これで SNS でもきれいに表示されます。
Twitterでシェアした画像が出ないとマーケターから相談される場面
-
マーケター
Twitter でこの記事をシェアしたら、画像が表示されないんです。
-
Web 担当者
og タグの設定を確認します。og:image と twitter:image を両方入れて、Card Validator で読み直させれば、画像が出るようになるはずです。