<svg viewBox="0 0 1200 675" xmlns="http://www.w3.org/2000/svg" font-family="'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',sans-serif">
  <defs>
    <linearGradient id="titleUnderlineOgpFavicon" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="1200" height="675" fill="#ffffff"/>

  <!-- タイトル -->
  <text x="600" y="46" text-anchor="middle" font-size="26" font-weight="700" fill="#2d2d2d">OGPとファビコンが表示される場所</text>
  <rect x="410" y="62" width="380" height="4" rx="2" fill="url(#titleUnderlineOgpFavicon)"/>

  <!-- 左カラム: OGP（緑・SNSシェアカード） -->
  <rect x="90" y="100" width="480" height="410" rx="14" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="330" y="140" text-anchor="middle" font-size="19" font-weight="700" fill="#3f6b3c">OGP：SNSで共有したとき</text>
  <text x="330" y="165" text-anchor="middle" font-size="13.5" fill="#4a4a4a">LINEやXでリンクを送ると出るカード</text>

  <!-- トーク画面風カード -->
  <rect x="130" y="185" width="400" height="230" rx="12" fill="#ffffff" stroke="#79bb74" stroke-width="1.5"/>
  <rect x="150" y="205" width="360" height="130" rx="8" fill="#eafaf0"/>
  <rect x="170" y="220" width="90" height="90" rx="6" fill="#79bb74"/>
  <text x="215" y="270" text-anchor="middle" font-size="12" fill="#ffffff">画像</text>
  <text x="280" y="245" font-size="13" font-weight="700" fill="#3f6b3c">お店の名前 | 紹介文</text>
  <text x="280" y="268" font-size="11.5" fill="#4a4a4a">営業時間や場所がひと目で</text>
  <text x="280" y="286" font-size="11.5" fill="#4a4a4a">わかる説明文が並ぶ</text>
  <text x="280" y="308" font-size="11" fill="#6b8f68">example.com</text>
  <text x="330" y="360" text-anchor="middle" font-size="13" font-weight="700" fill="#3f6b3c">画像・タイトル・説明文の3点セット</text>
  <text x="330" y="385" text-anchor="middle" font-size="12" fill="#4a4a4a">未設定だと画像なしの素っ気ないリンクに</text>

  <rect x="130" y="425" width="400" height="65" rx="10" fill="#ffffff" stroke="#79bb74" stroke-width="1.5"/>
  <text x="330" y="452" text-anchor="middle" font-size="13.5" font-weight="700" fill="#3f6b3c">紹介してくれた瞬間の第一印象</text>
  <text x="330" y="473" text-anchor="middle" font-size="12" fill="#4a4a4a">友だちに送られたときの「お店の顔」</text>

  <!-- 右カラム: ファビコン（青・ブラウザタブ） -->
  <rect x="630" y="100" width="480" height="410" rx="14" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <text x="870" y="140" text-anchor="middle" font-size="19" font-weight="700" fill="#2f6a91">ファビコン：ブラウザのタブ</text>
  <text x="870" y="165" text-anchor="middle" font-size="13.5" fill="#4a4a4a">タブやブックマークに出る小さな印</text>

  <!-- ブラウザタブ風カード -->
  <rect x="670" y="185" width="400" height="60" rx="8" fill="#eaf3fb"/>
  <rect x="686" y="197" width="130" height="34" rx="6" fill="#ffffff" stroke="#55aae2" stroke-width="1.5"/>
  <circle cx="702" cy="214" r="8" fill="#55aae2"/>
  <text x="740" y="219" font-size="11.5" fill="#2f6a91">お店の名前</text>
  <rect x="826" y="197" width="130" height="34" rx="6" fill="#dcebf7"/>
  <circle cx="842" cy="214" r="8" fill="#a9a9a9"/>
  <text x="880" y="219" font-size="11.5" fill="#6b6b6b">他のタブ</text>

  <rect x="670" y="265" width="400" height="150" rx="10" fill="#ffffff" stroke="#55aae2" stroke-width="1.5"/>
  <text x="870" y="295" text-anchor="middle" font-size="13.5" font-weight="700" fill="#2f6a91">16〜32ピクセルの小さな画像</text>
  <text x="870" y="320" text-anchor="middle" font-size="12" fill="#4a4a4a">お店のロゴやシンボルを設定するのが定番</text>
  <text x="870" y="345" text-anchor="middle" font-size="12" fill="#4a4a4a">複数タブの中でも見つけてもらいやすい</text>
  <text x="870" y="370" text-anchor="middle" font-size="12" fill="#4a4a4a">スマホのGoogle検索結果にも表示される</text>
  <text x="870" y="395" text-anchor="middle" font-size="11" fill="#4c7f9e">未設定だと空白のアイコンのまま</text>

  <rect x="670" y="425" width="400" height="65" rx="10" fill="#ffffff" stroke="#55aae2" stroke-width="1.5"/>
  <text x="870" y="452" text-anchor="middle" font-size="13.5" font-weight="700" fill="#2f6a91">見返されたときの信頼感</text>
  <text x="870" y="473" text-anchor="middle" font-size="12" fill="#4a4a4a">きちんとしたサイトという印象を残す</text>

  <!-- フッター -->
  <rect x="90" y="535" width="1020" height="80" rx="12" fill="#f5f5f3"/>
  <text x="600" y="568" text-anchor="middle" font-size="16.5" font-weight="700" fill="#2d2d2d">どちらも「共有されたとき・見返されたとき」のお店の顔</text>
  <text x="600" y="597" text-anchor="middle" font-size="14" fill="#4a4a4a">目立たない部品だが、整っているかどうかで印象は確実に変わる</text>
</svg>
