シェアされる際の設定

はじめに

WebサイトがSNSでシェアされたり、ブックマークされたとき、またブラウザのタブに表示されるときの見た目は、サイトの第一印象を決める重要な要素です。

適切に設定することで、以下のようなメリットがあります：

• 視認性の向上: ブラウザタブで一目で自分のサイトと分かる
• プロフェッショナルな印象: SNSでシェアされたときに魅力的に表示される
• クリック率の向上: Twitter/X、Facebook等で共有されたときに注目を集める

このページでは、以下の3つの設定方法をClaude Codeへの具体的なプロンプト例と共に解説します。

ファビコンの設定

ファビコンとは

**ファビコン（Favicon）**は、ブラウザのタブ、ブックマーク、スマートフォンのホーム画面などに表示される小さなアイコンです。

必要なファイル

通常、以下のファイルを用意します：

• favicon.ico (16x16, 32x32, 48x48のマルチサイズ)
• apple-touch-icon.png (180x180) - iOS用
• favicon-32x32.png (32x32)
• favicon-16x16.png (16x16)

Claude Codeへのプロンプト例

まず、favicon にする画像を public フォルダの直下に設置してください。

以下のプロンプトをコピーして、必要な部分を修正してClaude Codeに依頼してください。

ファビコンを設定してください。ベースとなる画像ファイルは、[画像の名前]です

OGP画像の設定

OGPとは

OGP（Open Graph Protocol） は、FacebookやLINEなどのSNSでWebページがシェアされたときに、どのように表示されるかを制御するための仕組みです。

推奨画像サイズ

• 推奨サイズ: 1200 x 630px
• 最小サイズ: 600 x 315px
• ファイル形式: JPG, PNG
• ファイルサイズ: 1MB以下を推奨

Claude Codeへのプロンプト例

まず、OGPなどで利用する画像は、 publicフォルダの直下に og-image.jpg や og-image.png という形で保存してください。 あるいは、 public/assets/images でも構いません。

以下のプロンプトを参考にClaude Codeに依頼してください。

OGP画像を設定してください。

- OGP画像は、og-image.jpg です（サイズ: 1200x630px）
- サイトのタイトルは「[サイトタイトル]」です
- サイトの説明文は「このサイトにぴったりのものを考えて」ください。

<meta property="og:title" content="サイトタイトル" />
<meta property="og:description" content="サイトの説明文" />
<meta property="og:image" content="https://example.com/images/og-image.jpg" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="サイト名" />

Twitter Card（X Card）の設定

Twitter Cardとは

Twitter Card　は、Twitter（現：X）でリンクがシェアされたときに、画像付きの魅力的なカードとして表示される機能です。

カードの種類

• summary: 小さな画像付きカード（推奨サイズ: 120x120px以上）
• summary_large_image: 大きな画像付きカード（推奨サイズ: 300x157px以上、最大4096x4096px）

Claude Codeへのプロンプト例

事前に画像ファイルを設置しておいてください（上記のOGPと同じように。あるいは同じファイルを使ってもOK）

以下のプロンプトを使ってClaude Codeに依頼してください。

Twitter Card（X Card）を設定してください。

- カードタイプは summary_large_image を使用
- Twitter Card用の画像は、OGP画像と同じものを使用してください
- サイトのTwitterアカウントは @[アカウント名] です（任意）

- 以下のメタタグを設定してください：
  - twitter:card
  - twitter:title
  - twitter:description
  - twitter:image
  - twitter:site（任意）

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:description" content="ページの説明文" />
<meta name="twitter:image" content="https://example.com/images/og-image.jpg" />
<meta name="twitter:site" content="@example" />

まとめ

ファビコン、OGP画像、Twitter Cardの3つを適切に設定することで、Webサイトのプロフェッショナルな印象が大幅に向上します。