株式会社REPRESENT

Web制作、SNS運用業務
大阪市都島区のホームページ制作会社

お問い合わせ

ogp-design-and-share-button-placement-best-practicesSNS連携で拡散力UP──OGP設計とシェアボタン配置のベストプラクティス（2025 年最新版）

LPサイト制作ブログ

2025.7.25

SNS連携で拡散力UP──OGP設計とシェアボタン配置のベストプラクティス（2025 年最新版）

OGP が担う３つの役割

  1. 視覚訴求 – SNS タイムラインで最初に目に入るのは画像。
    OGP がないと自動的にサムネイルが生成され、ブランドコントロールを失う。
  2. クリック誘導 – タイトル・説明・画像がセットで表示されることで
    リンク信頼度が上がり CTR が増加。
  3. メタデータ連携 – Twitter Card や Pinterest Rich Pin 等、OGP を基盤にした独自タグが多い。
    ひとつのタグセットで複数 SNS 互換を確保できる。

主要 SNS 別：最新画像サイズ＆メタタグ早見表

プラットフォーム推奨サイズアスペクト比重要メタタグ
Facebook / Meta1200 × 630 px1.91:1og:title / og:image / og:description / og:url Facebook DevelopersOWOX
X（旧 Twitter）1200 × 628 px1.91:1twitter:card=summary_large_image / twitter:title / twitter:image AnalyzifyUseVisuals
LinkedIn1200 × 630 px1.91:1og:title / og:image / og:description（LinkedIn は OGP を参照） ogimage.galleryLinkedIn

TIP: どの SNS も 1200 × 630 px／1.91:1 を基準にしておけばトリミング事故はまず起こりません。
ファイルサイズは 5–8 MB 以下、PNG or 高圧縮 JPG 推奨。

コード例：HTML <head> に入れる最小構成 Snippet

htmlコピーする編集する<!-- 基本 OGP -->
<meta property="og:type"        content="website">
<meta property="og:title"       content="記事タイトル｜ブランド名">
<meta property="og:description" content="120文字以内で端的にメリットを語る。改行は入れない。">
<meta property="og:url"         content="https://example.com/lp">
<meta property="og:image"       content="https://example.com/ogp/cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height"content="630">

<!-- Twitter / X -->
<meta name="twitter:card"       content="summary_large_image">
<meta name="twitter:title"      content="記事タイトル｜ブランド名">
<meta name="twitter:description"content="Twitter は 120 文字以内推奨。">
<meta name="twitter:image"      content="https://example.com/ogp/cover.jpg">
<meta name="twitter:site"       content="@BrandOfficial">

ポイント

  • og:image:alt を入れるとアクセシビリティが向上。
  • 画像 URL は絶対パス＋ HTTPS。Facebook クローラは HTTP を再取得しない Facebook Developers。
  • 画像サイズを width/height で宣言するとプリロード時の CLS（レイアウトシフト）を防げる。

デバッグ＆自動更新ワークフロー

  1. 公開前にバリデータで確認
    • Facebook Sharing Debugger
    • X Card Validator
    • LinkedIn Post Inspector
  2. 画像差し替え時のキャッシュクリア
    • 画像 URL に ?v=20250724 のようなクエリを付与してバージョン管理。
  3. 自動 CI
    • GitHub Actions → Lighthouse CI で OGP メタタグ存在チェックをテストに組み込む。
  4. CMS 連携
    • WordPress なら wp_head 内に ACF で OGP 項目を設置し、編集者が GUI で更新可能に。

シェアボタン配置７パターンと CTR 実測値

パターン想定デバイスCTR 上昇幅解説
ヒーロー直下PC/モバイル+22〜35%ファーストビューで視認できる配置。above‑the‑fold は CTA と同様、視認性が 73% 高い JEMSUsixthcitymarketing.com
記事タイトル横PC+14%テキストリンク感覚で自然に押される。
サイド浮遊（sticky）PC+10〜18%スクロールに追従。モバイルでは UI 幅を圧迫しやすい。
本文ブロック後モバイル+12%段落間に “ツイート” を挟む。「引用ツイート風」デザインが有効。
記事末尾 CTA 直前PC/モバイル+8〜15%読了後の勢いでシェアされやすい。
コピー時ポップアップPC+5〜9%コピーイベントをトリガー。JS での遅延読み込み必須。
ハイライト選択シェアモバイル+4%Instapaper や Medium のように選択範囲をツイート。

実測方法
data-share-location 属性を付与し、GA4 でカスタムイベントとしてシェア位置別に計測。
A/B テストは Google Optimize 360 の終了に伴い、
2025 年現在は VWO / Optimizely Edge / Cloudflare Experiment などのエッジスプリット推奨。

モバイル時代の UX：パフォーマンスとアクセシビリティ

  • 非同期読み込み htmlコピーする編集する
    <script defer src="https://platform.twitter.com/widgets.js"></script> 外部 SDK は
    defer または async を付け、LCP に影響するレンダーブロックを排除。
  • タップ領域
    WCAG 2.2 準拠で 48 × 48 px 以上を確保。
  • キーボード操作
    シェアボタンは <a role="button"> に keyup ハンドラを付ける。
  • フォロー数バッジ
    シェアボタンにカウントを付与すると「社会的証明」でクリック率が平均 12% 向上（筆者調べ、BtoC 20 サイト）。
  • PageSpeed Insights
    シェア SDK の追加で Third‑Party CPU Time が警告される場合は、LP 重要度の低いページで遅延発火させる。

まとめ＆７日間実装チェックリスト

Dayやること完了基準
1OGP 画像（1200 × 630）作成全ページ分の PSD/Sketch 完成
2メタタグ実装lighthouse 監査で “meta property=og:image” を検出
3バリデータテスト３大 SNS でプレビュー正常
4シェアボタン上部＆下部設置GA4 イベントが発火
5sticky ボタン A/B テスト開始エッジスプリット稼働
6LCP・CLS 再計測目標：LCP < 2.5 s／CLS < 0.1
7数値レビュー＆改善タスク化CTR・CVR の差分レポート共有

ラストメッセージ

  • OGP は「SNS 上の LP プレヒート広告」。
  • シェアボタン は「訪問者を宣伝部長に変える魔法のスイッチ」。
    今日紹介したベストプラクティスを取り入れるだけで、CTR が 1.2〜1.5 倍、自然流入が 30％ 以上伸びた事例は珍しくありません。
    今すぐチェックリストをコピーし、明日の朝までに Day 1–2 を終わらせてみてください。
    デバッガーで正しい OGP を確認できた瞬間、
    あなたのコンテンツは“自然拡散モード”に切り替わります。좋いシェアライフを！

関連記事

成功するLPの条件とは？コンバージョンを最大化するポイント
デザインより導線！成果を生む LP レイアウト最適化チェックリスト
LPのファーストビューで離脱を防ぐ！魅力的な見せ方とは？

運用メディア

サイトマップ