商用利用OKで無料のホームページテンプレート-Myホームページクリエイター

HP作成ガイド⑭

SNSシェアで差がつく!OGP(Open Graph)設定

最終更新日: 2025年10月24日

あなたのサイトのURLが、LINE、X(旧Twitter)、Facebookなどでシェア(共有)された時、どのように表示されるか確認したことはありますか?
この時に表示される「大きな画像」や「タイトル」「説明文」を正しく設定する仕組みが「OGP」です。

OGPとは? なぜ設定するの?

OGP(Open Graph Protocol)とは、SNSなどでURLがシェアされた際に、そのページの内容を「リッチなプレビュー(=魅力的なカード形式)」で伝えるためのルールです。

もしOGPが設定されていないと、SNS側がそのページから勝手に画像や文章を引っ張ってこようとします。その結果、

  • 意図しない小さなロゴ画像が表示される
  • 無関係な文章が説明文として表示される
  • 最悪の場合、何も表示されずURLの文字列だけになる

といった事態が起こります。これでは、せっかく誰かが善意でシェアしてくれても、他の人の興味を引くことができず、クリックしてもらえません。OGPを正しく設定することは、SNS経由のアクセス(集客)を増やすために非常に重要です。

どうやって設定する?

OGPは、Titleタグなどと同じく、HTMLファイルの<head>内に専用の<meta>タグを記述して設定します。

<!-- 最低限必要なOGPタグの例 --> <meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="ページの説明文"> <meta property="og:image" content="https://example.com/images/ogp-image.jpg"> <meta property="og:url" content="https://example.com/page.html"> <meta property="og:type" content="website">

これをページごとに、そのページの内容に合ったタイトルや画像を指定して記述する必要があります。

解決策:「My OGPクリエイター」の活用

この面倒なタグ作成を、プレビューを見ながら簡単に行えるのが、姉妹サイトの「My OGPクリエイター」です。

  • ライブプレビューで確認
    必要な情報を入力するだけで、実際にSNSでシェアされた時の見た目をリアルタイムで確認しながら作成できます。
  • コピペするだけ
    入力した内容に基づいて、必要なOGPタグ一式を自動で生成します。あとは<head>内にコピペするだけです。
  • X(Twitter)カードにも対応
    X(旧Twitter)で表示される専用のカード形式(twitter:card)にも対応しています。
My OGPクリエイターを使ってみる

このページのまとめ

  • OGPは、SNSでシェアされた時の「見た目」を設定する仕組みで、集客に直結する。
  • 設定しないと、意図しない表示になり、クリックされるチャンスを逃してしまう。
  • 「My OGPクリエイター」を使えば、プレビューを見ながらOGPタグを簡単に作成できる。
HP作成ガイド一覧へ戻る

Web制作者向け便利ツール