【6日でできるHTML＆CSS入門】SNS対応

　Webサイトの情報拡散や認知度アップには、SNS（ソーシャル・ネットワーキング・サービス）対応が不可欠です。検索エンジンだけでなく、X（旧Twitter）、Facebook、LINEなどのSNSを通じて多くの人に情報を届けるには、ページがSNSで正しく見栄えよく表示されることが重要です。
　ここでは、SNSシェア時に活用されるOGP（Open Graph Protocol）の基本と、HTMLでの実装方法について解説します。

１．OGPの基礎と設定

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。

「images」フォルダを作成して、その中に「ogp_bread_lesson.png」を保存します。

sns-compatibleダウンロード
ogp_bread_lesson.png

1.1. OGPとは何か

　OGP（Open Graph Protocol）は、SNSでページがシェアされたときに表示される「タイトル」「説明」「画像」「URL」などをコントロールするための仕組みです。
OGPを適切に設定することで、SNS上でより多くのユーザーにクリック・拡散されやすくなります。

1.2. OGP設定の具体例

サンプルHTML

ファイル名： lesson47_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>手作りパン教室のご案内 | ベーカリースクール大阪</title>
  <!-- OGP設定 -->
  <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/lesson">
  <meta property="og:site_name" content="ベーカリースクール大阪">
  <meta property="og:image" content="https://bakery-osaka.example.com/images/ogp_bread_lesson.png">
  <style>
    body { font-family: sans-serif; margin: 36px; }
    h1 { color: #b3702c; }
    img { width: 320px; margin-top: 14px; border-radius: 6px; }
  </style>
</head>
<body>
  <h1>大阪で手作りパン教室を開催中！</h1>
  <p>楽しく学べるパン作り体験レッスンを毎月開催しています。</p>
  <img src="images/ogp_bread_lesson.png" alt="パン教室のイメージ">
</body>
</html>
表示結果
  • 「大阪で手作りパン教室を開催中！」の見出しと本文
  • パン教室イメージ画像（og:imageに指定したもの）

２．OGPで使う主要プロパティの解説

2.1. OGPプロパティ一覧

プロパティ内容・用途
og:titleページタイトル（SNSで大きく表示）
og:typeページ種別（トップやサービス紹介はwebsite、記事詳細ならarticle等）
og:descriptionページの説明文。SNS投稿時の本文や概要欄に表示される。
og:urlページの正規URL
og:site_nameサイト名
og:imageシェア時に表示されるサムネイル画像のURL。推奨サイズは横1200px×縦630px程度

2.2. HTMLでの設定方法

  • <meta property="og:～" ...> 形式でheadタグ内に記述します。
  • og:imageは絶対URLで指定しましょう（SNSによっては相対パス画像が表示されないことがあります）。
  • サイト内の全ページに共通するOGP設定もあれば、ページごとに異なる値（タイトル・説明・画像）を指定するのも重要です。

3. SNS対応を強化するその他のポイント

3.1. Twitterカードなどの拡張

Twitterには独自の「Twitterカード」用metaタグもあります。
より最適化した表示を目指す場合、twitter:cardやtwitter:siteなども追加で指定できます。

例

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@your_account">

3.2. CSSやHTML構造の工夫

　OGPの表示自体はHTMLのmetaタグだけでコントロールしますが、SNSでシェアされた時の印象を上げるためにも、サムネイル画像や見出し、本文のデザインも工夫しましょう。

４．サンプルで使用したタグ一覧

タグ・属性解説・使い方例
<meta property="og:～">OGPプロトコル用のメタタグ（SNS連携用）
<title>ページタイトル（SNSやブラウザに表示される）
<meta name="twitter:～">Twitter専用のカード表示用メタタグ（オプション）
<img src="...">OGPの画像と同じURLをalt付きで本文にも掲載するとより効果的
alt（imgの属性）画像が表示されない時の説明文。SEOやアクセシビリティにも有効

まとめ

　SNS対応としてOGPをしっかり設定しておくことで、WebページがSNSでシェアされた際に魅力的な見た目で拡散されやすくなります。
タイトル・説明・画像の指定や、ページごとの最適化を心がけることで、情報の伝達力と拡散力が大きく向上します。
　Twitterカードなど、各SNSごとの追加タグも必要に応じて導入し、サイトのSNS対応をさらに強化しましょう。