6日でできる 新HTML&CSS入門｜SNS対応の基本
SNSでシェアされた瞬間の見え方まで、Webページの一部。
OGPを設定して、タイトル・説明・画像が伝わるリンクカードを作ろう。
Webサイトへのアクセスは、検索エンジンだけから生まれるものではありません。X、Facebook、LINE、チャットツールなどでページのURLが共有され、そこから多くの人に見てもらえることもあります。そのため、Webページを作るときは、ページを開いた後の見た目だけでなく、SNSでシェアされたときの見え方も意識することが大切です。
SNSでURLを共有すると、リンクだけでなく、ページタイトル、説明文、サムネイル画像などがカードのように表示されることがあります。この表示が分かりやすく魅力的であれば、ユーザーは内容を理解しやすくなり、クリックしてもらえる可能性も高まります。反対に、画像が表示されなかったり、説明文が不自然だったりすると、せっかく共有されても内容が伝わりにくくなります。
このSNSシェア時の見え方を整えるために使うのが、OGPです。OGPはOpen Graph Protocolの略で、ページのタイトル、種類、説明、URL、画像などをmetaタグで指定する仕組みです。Open Graph Protocolでは、og:title、og:type、og:image、og:urlなどの基本プロパティが定義されています。
この記事では、SNS対応の基本として、OGPの役割、主要なmetaタグ、og:imageの指定方法、X向けのTwitterカード用タグ、HTMLでの実装例、確認時の注意点まで、サンプルコードを使いながら分かりやすく解説していきます。
素材のダウンロード
以下のリンクから使用する素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。
| ogp_bread_class.png |
|---|
 |
SNS対応とは何か
SNS対応とは、WebページがSNSで共有されたときに、分かりやすく魅力的に表示されるように準備しておくことです。ページそのもののデザインとは別に、シェアされたときのタイトル、説明文、画像、URLの見え方を整えます。
たとえば、パン教室のページがSNSで共有されたときに、ただURLだけが表示されるよりも、「初心者向け手作りパン教室」「焼きたてパンの写真」「講座内容の短い説明」が表示されたほうが、どのようなページなのか伝わりやすくなります。
| SNS対応で整えるもの | 役割 |
|---|---|
| タイトル | シェアされたページの内容を短く伝える |
| 説明文 | ページの魅力や概要を補足する |
| 画像 | 視覚的に内容を伝え、目に留まりやすくする |
| URL | どのページを共有しているかを示す |
| サイト名 | どのWebサイトのページかを伝える |
SNS対応では、ユーザーがリンクを見た瞬間に「何のページか」「読む価値がありそうか」を判断できるようにすることが大切です。
図1：SNSシェア時の見え方を整える
この図から分かること
SNS対応では、ページが共有されたときに表示されるリンクカードの内容を整えます。OGPを設定すると、タイトル、説明文、画像、URLなどを指定でき、SNS上でページの内容が伝わりやすくなります。URLだけを表示するよりも、画像付きのカード表示にすることで印象が強くなります。
OGPとは何か
OGPは、Open Graph Protocolの略です。WebページをSNSなどで共有したときに、そのページをどのような情報として扱うかを伝えるための仕組みです。
OGPでは、HTMLのhead内にmetaタグを書きます。たとえば、og:titleではSNS上で表示したいタイトルを指定し、og:descriptionでは説明文を指定し、og:imageではサムネイル画像を指定します。
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="https://example.com/images/ogp-image.png">OGPを設定しておくと、SNSやチャットツールがページ情報を読み取るときに、どのタイトルや画像を使えばよいか判断しやすくなります。
| OGPの目的 | 内容 |
|---|---|
| ページ内容を伝える | タイトルや説明文を指定する |
| 見た目を整える | シェア画像を指定する |
| URLを明確にする | 正規のページURLを指定する |
| サイト名を伝える | どのサイトのページかを示す |
OGPは、SNSでの見栄えを整えるための基本設定です。ページごとに内容に合ったOGPを設定すると、共有されたときの印象がより良くなります。
OGPで使う主要プロパティ
OGPにはさまざまなプロパティがありますが、まずは基本となるものを押さえておきましょう。
| プロパティ | 内容・用途 |
|---|---|
| og:title | SNSで表示するページタイトル |
| og:type | ページの種類。Webサイトならwebsite、記事ならarticleなど |
| og:description | ページの説明文 |
| og:url | ページの正規URL |
| og:site_name | サイト名 |
| og:image | SNSシェア時に表示する画像 |
Open Graph Protocolの基本メタデータでは、og:title、og:type、og:image、og:urlが主要なプロパティとして示されています。(Open Graph) 実際のWeb制作では、これに加えてog:descriptionやog:site_nameもよく使います。
OGPはページごとに内容を変えることが大切です。トップページ、記事ページ、商品ページ、イベントページでは、それぞれ伝えたい内容が違うため、タイトルや説明文、画像もページ内容に合わせて設定します。
og:titleはSNS上のタイトルを指定する
og:titleは、SNSでページが共有されたときに表示されるタイトルを指定します。titleタグと同じ内容にすることもありますが、SNSで見たときに分かりやすい表現に調整してもかまいません。
<meta property="og:title" content="週末に楽しむ手作りパン教室｜ベーカリースクール大阪">og:titleでは、ページの内容が短く伝わることが大切です。長すぎるタイトルは途中で省略される場合があるため、重要な言葉を前半に入れると分かりやすくなります。
| og:titleで意識すること | ポイント |
|---|---|
| ページ内容と一致させる | 実際の内容と違うタイトルにしない |
| 重要な言葉を前半に置く | SNS上で省略されても伝わりやすくする |
| 不自然なキーワード羅列を避ける | ユーザーに読みやすい文にする |
| ページごとに変える | すべて同じタイトルにしない |
SNSでは流し読みされることが多いため、og:titleは短く分かりやすく書くことが大切です。
og:descriptionはページの魅力を短く伝える
og:descriptionは、SNSカードに表示される説明文を指定します。ページの内容や魅力を短くまとめ、ユーザーがクリックする前に概要を理解できるようにします。
<meta property="og:description" content=
"初心者でも楽しく学べる大阪の手作りパン教室です。基本の生地作りから焼き上げまで、少人数で丁寧に学べます。">
descriptionは、長すぎると途中で切れることがあります。最初の1文でページの内容が伝わるように書くと、SNSでも分かりやすくなります。
| og:descriptionで意識すること | ポイント |
|---|---|
| 内容を具体的に書く | 何のページか分かるようにする |
| 魅力を短く伝える | 読む理由や参加する理由を示す |
| 本文と一致させる | ページにない内容を書かない |
| 自然な文章にする | 単語の羅列にしない |
SNSでの説明文は、ページへの入口になる文章です。ユーザーが知りたい情報を想像しながら、短く丁寧に書きましょう。
og:imageはシェア時のサムネイル画像
og:imageは、SNSでページが共有されたときに表示される画像を指定します。SNS上では画像がとても目立つため、og:imageはクリックされるかどうかに関わる重要な要素です。
<meta property="og:image" content=
"https://bakery-osaka.example.com/images/ogp_bread_lesson.png">og:imageには、ページ内容を分かりやすく表す画像を指定します。イベントページならイベントの雰囲気が分かる画像、商品ページなら商品写真、記事ページなら記事テーマを表す画像が向いています。
| og:imageで意識すること | ポイント |
|---|---|
| ページ内容と関係する画像にする | 共有されたときに内容が伝わる |
| 文字を入れる場合は大きくする | 小さな画面でも読めるようにする |
| 重要な情報を端に置きすぎない | SNS側でトリミングされる場合に備える |
| 絶対URLで指定する | SNSが画像を取得しやすくする |
| ページごとに画像を変える | すべて同じ画像にしない |
よく使われるOGP画像の目安として、横1200px、縦630px程度の画像が使われます。ページ内の表示画像と同じ画像を使うこともできますが、SNSカード用に文字や構図を調整した専用画像を用意すると、より伝わりやすくなります。
図2：OGP画像はSNSカードの印象を大きく左右する
この図から分かること
og:imageは、SNSで共有されたときに表示されるサムネイル画像です。画像があると、ページの内容や雰囲気が視覚的に伝わりやすくなります。SNS上では画像が大きく表示されることもあるため、ページの内容に合った分かりやすい画像を用意することが大切です。
og:urlとog:site_nameの役割
og:urlは、SNSで共有するページの正規URLを指定します。同じ内容のページに複数のURLがある場合でも、どのURLを代表として扱うかを示しやすくなります。
<meta property="og:url" content="https://bakery-osaka.example.com/lesson">og:site_nameは、サイト名を指定するプロパティです。
<meta property="og:site_name" content="ベーカリースクール大阪">| プロパティ | 役割 |
|---|---|
| og:url | ページの正規URLを指定する |
| og:site_name | サイト名を指定する |
| og:type | ページの種類を指定する |
og:typeは、ページの種類を表します。サイト全体や固定ページならwebsite、記事ページならarticleを使うことがあります。ページの性質に合わせて指定するとよいでしょう。
OGP設定のサンプルHTML
ここでは、SNSでパン教室のページがシェアされたときに、タイトル、説明文、画像、URL、サイト名が表示されるようにOGPを設定します。
画像ファイルは、imagesフォルダーの中にogp_bread_class.pngとして保存している想定です。og:imageには、SNSが取得しやすいように絶対URLを指定します。
ファイル名： lesson47_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>週末の手作りパン教室 | ベーカリースクール大阪</title>
<meta property="og:title" content="週末の手作りパン教室 | ベーカリースクール大阪">
<meta property="og:type" content="website">
<meta property="og:description" content="初心者歓迎。大阪で開催する少人数制の手作りパン教室です。基本の生地作りから焼き上げまで、楽しく丁寧に学べます。">
<meta property="og:url" content="https://bakery-osaka.example.com/weekend-bread-class">
<meta property="og:site_name" content="ベーカリースクール大阪">
<meta property="og:image" content="https://bakery-osaka.example.com/images/ogp_bread_class.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@bakery_osaka">
<style>
body {
font-family: sans-serif;
margin: 36px;
line-height: 1.7;
color: #333333;
}
h1 {
color: #b3702c;
font-size: 2em;
}
.lead {
background-color: #fff7ed;
padding: 14px;
border-left: 5px solid #d69a52;
}
img {
width: 320px;
max-width: 100%;
margin-top: 14px;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>大阪で週末の手作りパン教室を開催中</h1>
<p class="lead">焼きたてパンの香りを楽しみながら、初心者でも基本から学べる少人数制レッスンです。</p>
<p>生地作り、発酵、成形、焼き上げまでを講師と一緒に体験できます。親子参加や友人同士での参加にもおすすめです。</p>
<img src="images/ogp_bread_class.png" alt="焼きたてのパンが並ぶパン教室のイメージ">
</body>
</html>ブラウザの表示例
ブラウザで表示すると、ページ本文には「大阪で週末の手作りパン教室を開催中」という見出し、教室の説明文、パン教室のイメージ画像が表示されます。
一方、head内のOGP設定は、ページ本文には直接表示されません。SNSやチャットツールがページURLを読み取ったときに、og:title、og:description、og:image、og:urlなどを参照し、リンクカードとして表示するために使われます。
このサンプルでは、本文に表示している画像とOGP画像を関連付けています。本文内のimgには相対パスを使っていますが、og:imageでは絶対URLを指定しています。SNSによっては相対パスの画像をうまく取得できない場合があるため、og:imageにはhttpsから始まる絶対URLを指定するのが基本です。
サンプルHTMLのOGPポイント
サンプルHTMLで設定しているOGPを整理すると、次のようになります。
| 設定 | 役割 |
|---|---|
| og:title | SNSカードに表示するタイトル |
| og:type | ページの種類 |
| og:description | SNSカードに表示する説明文 |
| og:url | 共有対象となる正規URL |
| og:site_name | サイト名 |
| og:image | SNSカードに表示する画像 |
OGPは、HTMLのhead内に記述します。body内に書いても、SNS側が正しく読み取れない場合があります。titleやdescriptionと同じように、ページ情報を伝えるmeta情報としてhead内にまとめて書きましょう。
Twitterカード用metaタグ
Xでは、Twitterカード用のmetaタグを追加することで、カード表示を調整できます。よく使われるのがtwitter:cardです。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@your_account">summary_large_imageを指定すると、大きな画像付きのカード表示を意識した設定になります。X向けにより細かく整えたい場合は、twitter:title、twitter:description、twitter:imageを追加することもあります。X Developer Communityでも、カード表示に関する話題ではsummary_large_imageが扱われています。
| Twitterカード用meta | 役割 |
|---|---|
| twitter:card | カードの種類を指定する |
| twitter:site | サイトや運営アカウントを指定する |
| twitter:title | X向けのタイトルを指定する |
| twitter:description | X向けの説明文を指定する |
| twitter:image | X向けの画像を指定する |
OGPだけでも表示される場合がありますが、Xでの見え方を意識する場合は、Twitterカード用metaタグも追加しておくと調整しやすくなります。
図3：OGPとTwitterカードでSNS表示を整える
この図から分かること
SNS対応では、OGP用のmetaタグと、必要に応じてTwitterカード用のmetaタグをhead内に記述します。OGPではタイトル、説明文、画像、URLを指定し、X向けにはtwitter:cardなどを追加できます。metaタグを整えることで、SNSで共有されたときのリンクカードを分かりやすくできます。
titleとog:titleの違い
titleとog:titleは、どちらもページタイトルに関係しますが、主に使われる場面が違います。
| タグ | 主な役割 |
|---|---|
| title | ブラウザタブや検索結果のタイトル候補として使われる |
| og:title | SNSで共有されたときのカードタイトルとして使われる |
titleとog:titleは同じ内容にしても問題ありません。ただし、検索向けのtitleとSNS向けのog:titleで、少し表現を変えることもあります。
たとえば、titleでは「週末の手作りパン教室 | ベーカリースクール大阪」として、SNS向けのog:titleでは「初心者歓迎！週末の手作りパン教室」とするような調整が考えられます。どちらの場合も、ページ内容と一致していることが大切です。
descriptionとog:descriptionの違い
meta name="description"とog:descriptionも、どちらも説明文に関係します。
| タグ | 主な役割 |
|---|---|
| meta name="description" | 検索結果などでページ説明として使われることがある |
| og:description | SNSカードの説明文として使われる |
検索向けのdescriptionとSNS向けのog:descriptionは、同じ文章でもよいです。ただし、SNSでは短い時間で読まれることが多いため、より分かりやすく魅力が伝わる表現にしてもよいでしょう。
大切なのは、ページ内容と違う説明を書かないことです。SNSでクリックしてもらうために誇張しすぎると、ページを開いたユーザーの期待と実際の内容がずれてしまいます。
og:imageは絶対URLで指定する
og:imageで指定する画像は、絶対URLにしておくのが基本です。
<meta property="og:image" content=
"https://bakery-osaka.example.com/images/ogp_bread_class.png">本文中のimgでは、次のような相対パスも使えます。
<img src="images/ogp_bread_class.png" alt="焼きたてのパンが並ぶパン教室のイメージ">しかし、SNS側がページを外部から読み取る場合、相対パスでは画像の場所を正しく判断できないことがあります。そのため、OGP画像にはhttpsから始まる絶対URLを指定しておくと安心です。
| 指定方法 | 例 | OGP画像での扱い |
|---|---|---|
| 相対パス | images/ogp_bread_class.png | 本文画像では使いやすい |
| 絶対URL | https://example.com/images/ogp_bread_class.png | OGP画像で推奨される |
OGP画像は、SNSカードの印象を決める大切な要素です。URL、サイズ、画像内容を確認してから公開しましょう。
OGP画像を作るときのポイント
SNSで表示される画像は、環境やSNSによってトリミングされる場合があります。そのため、重要な文字や人物、商品などを画像の端に置きすぎないことが大切です。
| ポイント | 内容 |
|---|---|
| 画像の主役を中央付近に置く | トリミングされても伝わりやすい |
| 文字は大きくする | スマートフォンでも読みやすい |
| ページ内容と一致させる | クリック後の内容とずれないようにする |
| 高解像度の画像を使う | ぼやけにくくする |
| 各ページに合う画像を用意する | どのページも同じ画像にしない |
OGP画像は、Webページ内の装飾画像とは役割が少し違います。SNS上で単独で見られても、ページの内容が伝わる画像にすると効果的です。
SNS対応で使うタグと属性
SNS対応でよく使うタグや属性を整理しておきます。
| タグ・属性 | 解説・使い方 |
|---|---|
| meta property="og:title" | SNSカードのタイトルを指定する |
| meta property="og:type" | ページの種類を指定する |
| meta property="og:description" | SNSカードの説明文を指定する |
| meta property="og:url" | ページの正規URLを指定する |
| meta property="og:site_name" | サイト名を指定する |
| meta property="og:image" | SNSカード用の画像を指定する |
| title | ブラウザタブや検索結果向けのページタイトル |
| meta name="description" | 検索結果などに使われることがある説明文 |
| meta name="twitter:card" | X向けのカード種類を指定する |
| meta name="twitter:site" | X向けのサイトアカウントを指定する |
| img | ページ本文に画像を表示する |
| alt | 画像の代替テキストを指定する |
OGPのmetaタグは、見た目としてページ上に表示されるものではありません。しかし、SNSに共有されたときの表示に関係するため、Webサイトの情報発信では重要な設定です。
ページごとにOGPを変えることが大切
SNS対応では、サイト全体で同じOGPを使い回すより、ページごとに内容を変えることが大切です。
たとえば、トップページ、パン教室ページ、料金ページ、お問い合わせページでは、それぞれ伝えたい内容が違います。すべて同じog:titleやog:imageにしてしまうと、SNSで共有されたときにどのページなのか分かりにくくなります。
| ページ | OGP設定の考え方 |
|---|---|
| トップページ | サイト全体の特徴を伝える |
| サービス紹介ページ | サービス内容やメリットを伝える |
| 記事ページ | 記事タイトルと内容に合う画像を使う |
| イベントページ | 開催内容、日程、雰囲気が伝わる画像を使う |
| 商品ページ | 商品名、特徴、商品画像を使う |
ページごとにタイトル、説明文、画像を変えることで、SNSで共有されたときに内容が伝わりやすくなります。
SNS対応の確認方法
OGPを設定したら、実際にSNSや確認ツールで表示を確認することが大切です。metaタグを書いただけでは、画像が正しく取得されるか、説明文が意図どおり表示されるか分かりません。
| 確認すること | チェック内容 |
|---|---|
| タイトル | SNSカードで分かりやすく表示されるか |
| 説明文 | 長すぎず、内容が伝わるか |
| 画像 | 表示されるか、切れ方が不自然でないか |
| URL | 正しいページURLになっているか |
| サイト名 | 意図したサイト名が表示されるか |
| キャッシュ | 変更後に古い表示が残っていないか |
SNSでは、一度取得したOGP情報がキャッシュされることがあります。そのため、metaタグや画像を変更しても、すぐに反映されない場合があります。確認ツールを使って再取得したり、時間を置いて確認したりすることもあります。
SNS対応でよくある失敗
OGPを設定するときは、いくつかの失敗が起こりやすいです。代表的なものを確認しておきましょう。
| よくある失敗 | 原因 | 対策 |
|---|---|---|
| 画像が表示されない | og:imageのURLが相対パス、または画像にアクセスできない | 絶対URLで指定し、公開URLで画像を確認する |
| タイトルが古い | SNS側にキャッシュが残っている | 確認ツールで再取得する |
| 説明文が表示されない | og:descriptionがない、または短すぎる | ページ内容に合う説明文を書く |
| 画像が変な位置で切れる | 重要な情報が端にある | 中央付近に主役を配置する |
| 全ページ同じカードになる | OGPを共通設定のままにしている | ページごとにtitle、description、imageを変える |
SNS対応では、設定しただけで安心せず、実際の表示を確認することが大切です。特にog:imageは表示の印象に大きく影響するため、画像のURLと見え方を必ず確認しましょう。
SNS対応を考えたHTML作成のポイント
SNS対応は、Webページの内容を外部に伝えるための準備です。ページ本文をしっかり作ることに加えて、head内のmetaタグでシェア時の情報を整えます。
まずは、titleとmeta descriptionでページの基本情報を整えます。次に、og:title、og:description、og:url、og:site_name、og:imageを設定します。Xでの表示も意識する場合は、twitter:cardやtwitter:siteなどを追加します。
特に大切なのは、ページ内容とOGP設定を一致させることです。SNSで表示されるタイトルや画像が魅力的でも、ページの内容とずれていると、ユーザーの信頼を失いやすくなります。
SNS対応は、検索エンジン対策とは別の入口を整える作業です。SNSでページが共有されたときに、どのように見えるかを意識しながら、タイトル、説明文、画像を丁寧に設定していきましょう。