Claude Codeで作ったサイト公開前に確認すべき設定3つ

2026.05.28 2026.05.28

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Claude Codeを使ってサイトを作り上げたとき、あの達成感はひとしおですよね。
コードを書いたことがない方でも、AIと対話しながらページが形になっていく体験は、本当に感動的です。
「ついに自分のサイトが完成した！」とテンションが上がって、すぐにでも公開ボタンを押したくなる気持ち、よくわかります。

でも、ちょっと待ってください。

その気持ちのまま公開してしまうと、あとから「しまった……」と後悔する可能性があります。
私はWEBデザイナーとして浜松市内の中小企業や個人事業主のサイト制作・改善に携わってきましたが、Claude CodeやNoCodeツールで自作したサイトを「完成した！」と持ってきてくださる方の9割近くが、同じ3つの設定を見落としています。

その3つとは、OGP画像・メタディスクリプション・そしてファビコンです。

「OGP画像って何？」「メタディスクリプションは聞いたことあるけど、設定した記憶がない……」という方もご安心ください。
この記事では、WEBデザイナー歴10年以上の私が、それぞれの設定がなぜ重要なのか・どう設定すればいいのかを、Claude Codeで作ったサイトに合わせて具体的に解説します。

特に3つ目のファビコンは、見落とした状態で運用し続けている方がほぼ全員と言っても過言ではありません。
ブラウザのタブに表示される地球儀アイコン、あれは「このサイトはまだ設定が終わっていません」というサインです。
SNSでシェアされたとき・検索結果に表示されたとき・そしてブラウザで開いたとき、訪問者は無意識のうちにサイトの信頼性を判断しています。この3つが未設定のままでは、せっかく作り込んだコンテンツも最大限に活かせません。

逆に言えば、この3つをきちんと設定するだけで、サイトの印象は大きく変わります。
SNSからの流入が増え、検索結果でのクリック率が上がり、初めて訪れた人に「ちゃんとしたサイトだ」と感じてもらえるようになります。

最後まで読むと、Claude Codeで作ったサイトを公開前に完璧な状態に整え、訪問者に信頼感を与えるサイトとしてスタートできるようになります。
それでは、3つの設定を順番に見ていきましょう。

なぜ公開前の設定が重要なのか？Claude Codeユーザーが陥りやすい落とし穴

Claude Codeは「作ること」に集中しすぎてしまう

Claude Codeの最大の魅力は、対話しながらサイトを組み上げていける点です。「ヘッダーをこうしたい」「このボタンの色を変えたい」と指示を出すたびにページが進化していくのは、本当に楽しい体験です。しかしその反面、デザインや機能の実装に意識が集中するあまり、メタ情報（検索エンジンやSNSが読み取る裏側の情報）の設定がおろそかになりがちです。

Claude CodeはHTMLやCSSの生成は得意ですが、OGP画像・メタディスクリプション・ファビコンといった設定を「自動的に最適化」してくれるわけではありません。
指示しなければ、デフォルト値（あるいは未設定）のまま出力されます。

「とりあえず公開」が後悔の始まり

私が浜松市内のクライアントからよく聞く話があります。
「Claude Codeで作って公開したら、友達がSNSでシェアしてくれたんですが、変な画像が出てしまって恥ずかしかった」というものです。
これはOGP画像が未設定だったために、SNSのクローラーがページ内の意図しない画像を自動取得してしまったケースです。

一度「おかしなシェア」をされてしまうと、そのURLはSNS上のキャッシュに残ります。
後から修正しても、キャッシュが更新されるまでの間は古い（誤った）表示が続きます。最初から正しく設定しておくことが、遠回りのようで実は最短ルートです。

公開前チェックが必要な理由

サイトは「作って終わり」ではなく、「見てもらって初めて価値が生まれる」ものです。訪問者がどこからアクセスするか（検索・SNS・直接URLなど）によって、最初に目にする情報は異なります。OGP画像・メタディスクリプション・ファビコンはそれぞれ、SNSからの流入・検索結果からの流入・ブラウザ上での信頼感に直結する設定です。この3つが整っていないサイトは、どのルートから来てもマイナスの第一印象を与えるリスクがあります。

公開後に修正できないわけではありませんが、最初から正しく設定することでSNSキャッシュのトラブルや検索エンジンへの誤情報登録を防げます。

設定1：OGP画像とは？SNSシェア時に表示される画像の重要性

OGP画像とは何か？基本の定義

OGP（Open Graph Protocol）とは、FacebookやX（旧Twitter）・LINEなどのSNSでURLをシェアしたときに、カード形式でリッチな情報を表示するための仕組みです。
OGP画像とは、そのカードに表示される「サムネイル画像」のことを指します。

たとえば友人がX（旧Twitter）にあなたのサイトのURLを投稿したとき、テキストだけではなく画像付きのカードが表示された経験があると思います。
あの画像がOGP画像です。OGP画像が未設定の場合、SNSのアルゴリズムがページ内の画像を勝手に選択するか、画像なしのカードが表示されます。

OGP画像が未設定だとどうなるか

意図しない画像（ロゴや装飾画像など）がサムネイルに使われる
画像なしのカードになり、クリック率が大幅に下がる
SNSでのシェア拡散力が弱くなる
ブランドイメージが統一されない

私の経験では、OGP画像を適切に設定するだけでSNSからの流入が1.5〜2倍になったケースもあります。
浜松市内の飲食店クライアントのサイトでOGP画像を整備した際、Instagramのプロフィールリンクからの流入が翌月比で約180%増加しました。

Claude CodeでOGP画像を設定する方法

HTMLの<head>タグ内に以下のメタタグを追加します。Claude Codeに「OGPのメタタグをheadに追加して」と依頼すると、以下のようなコードを生成してくれます。

<meta property="og:title" content="サイト名またはページタイトル" />
<meta property="og:description" content="ページの説明文（120文字前後）" />
<meta property="og:image" content="https://yourdomain.com/images/ogp.png" />
<meta property="og:url" content="https://yourdomain.com/" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/images/ogp.png" />

OGP画像のサイズと仕様

OGP画像の推奨サイズは1200×630px（横長比率1.91:1）です。ファイル形式はPNGまたはJPGが一般的で、ファイルサイズは1MB以内に抑えることを推奨します。
画像内にはサイト名・キャッチコピー・ロゴなどを入れると、SNSのタイムライン上で視認性が高まります。Canvaなどの無料ツールでも簡単に作成できます。

OGP画像は「SNSでの第一印象」を決める看板です。
公開前に必ず専用画像を用意して設定しておきましょう。

設定2：メタディスクリプションとは？検索結果に表示される説明文の書き方

メタディスクリプションとは何か？定義と役割

メタディスクリプションとは、GoogleなどのSERP（検索結果ページ）でタイトルの下に表示される説明文のことです。
検索ユーザーはタイトルとこの説明文を見て、クリックするかどうかを判断します。
つまりメタディスクリプションはサイトへの入口を開くかどうかの判断材料であり、直接的なランキング要因ではないものの、クリック率（CTR）に大きな影響を与えます。

Claude Codeで生成したHTMLに、明示的にメタディスクリプションを設定していない場合、Googleはページ本文の冒頭や任意の箇所から自動的にスニペットを生成します。
この自動生成は必ずしも意図した内容にならず、検索意図とずれた文章が表示されることがあります。

メタディスクリプションを書く際の5つのポイント

文字数は日本語で120〜130文字前後（PCで表示されやすい上限）
ターゲットキーワードを自然に含める
ページの内容を正確に・具体的に説明する
ユーザーが得られるベネフィットを伝える
「続きを読む」「詳しくはこちら」などの曖昧な表現を避ける

Claude CodeでメタディスクリプションのHTMLを設定する方法

以下のタグをHTMLの<head>内に追加します。

<meta name="description" content="Claude Codeでサイトを作った方へ。公開前に見落としがちなOGP画像・メタディスクリプション・ファビコンの設定を浜松市のWEBデザイナーが詳しく解説します。" />

Claude Codeへの依頼例としては、「このサイトのheadタグ内にメタディスクリプションを追加して。
内容は『〇〇について解説するサイトです。〜〜が学べます。』という方向で120文字前後にして」と具体的に指示すると精度が高くなります。

メタディスクリプションのよくある失敗例

「このサイトではさまざまな情報をお届けします。」のような内容のない説明文は、Googleに無視されるだけでなく、検索ユーザーにもクリックしてもらえません。
また、同じサイト内の複数ページに同一のメタディスクリプションを使い回すのも避けましょう。各ページの内容に合わせた固有の説明文を設定することが、SEO・AIOの両面で重要です。

メタディスクリプションは検索結果における「広告コピー」です。
クリックしてもらえる言葉を意識して120文字に凝縮しましょう。

設定3（最重要）：ファビコンとは？ブラウザのタブに表示されるアイコンの設定方法

ファビコンとは何か？なぜ「最重要」なのか

ファビコン（favicon）とは、ブラウザのタブ・ブックマーク・スマートフォンのホーム画面などに表示される小さなアイコン画像のことです。
「favorite icon（お気に入りアイコン）」の略で、サイトのアイデンティティを視覚的に示す役割を持ちます。

なぜこれが「最重要」かというと、ファビコンが未設定のサイトはブラウザのタブに地球儀アイコンが表示されるからです。
この地球儀アイコンは「デフォルト状態＝設定されていない」を意味し、WEBに詳しいユーザーはもちろん、詳しくない一般ユーザーでも無意識のうちに「なんとなく怪しい」「素人っぽい」と感じます。

私が浜松市内でセミナーを開催した際、参加者の方に「ブラウザのタブに地球儀が出ているサイト、信頼して買い物しますか？」と聞いたところ、8割以上の方が「少し不安になる」と答えました。
ファビコンは小さなアイコンですが、信頼感への影響は決して小さくありません。

ファビコンが未設定のまま運用されやすい理由

ファビコンが見落とされやすい理由は明確です。Claude Codeでサイトを作る際、機能的な部分（ナビゲーション・フォーム・レイアウトなど）に集中するため、ファビコンの設定を指示しないままになりがちです。
また、ローカル環境（自分のパソコン上）でプレビューしているときは気づきにくく、実際にブラウザでURLを開いて初めて「あ、地球儀だ……」と気づくパターンが非常に多いです。

開発中はタブアイコンに気が向かない
Claude Codeへの指示にファビコンが含まれていないことが多い
ファビコンの存在自体を知らないまま公開してしまう
「小さなアイコンだから関係ない」と後回しにしてしまう

ファビコンの作り方と設定方法

ファビコン画像の作り方

ファビコンの基本サイズは16×16px・32×32px・180×180px（Apple Touch Icon）です。
Canva・Figma・またはfavicon.ioなどの無料ツールを使えば、ロゴや文字から簡単に作成できます。形式は.ico・.png・.svgが使えますが、最も互換性が高いのは.ico形式です。

Claude Codeに「ファビコン用の画像をどう準備すればいいか教えて」と聞くと、使っているフレームワークに合わせた手順を教えてくれます。

HTMLへの設定方法

<!-- 基本のファビコン設定 -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Apple端末向け設定 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- SVGファビコン（モダンブラウザ向け） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

Claude Codeへの依頼例：「headタグにファビコンのlinkタグを追加して。ファイルはfavicon.icoとfavicon-32x32.pngとapple-touch-icon.pngの3種類を使う予定です。」と指示すると、対応するコードを一括で生成してくれます。

ファビコンは「サイトの顔」です。地球儀アイコンのまま公開することは、スーツを着ずにビジネス商談に臨むようなもの。必ず設定してから公開しましょう。

Claude Codeへの効果的な指示の出し方：3つの設定をまとめて依頼するコツ

1回のプロンプトで3つの設定を完結させる方法

Claude Codeを使い慣れてくると、複数の設定をまとめて指示できるようになります。
以下は、3つの設定を一括で依頼するプロンプトの例です。

以下の設定をindex.htmlのheadタグ内に追加してください。

1. メタディスクリプション
   内容：「Claude Codeでサイトを作った方へ。OGP・メタ・ファビコンの設定方法を解説」
   文字数：120文字前後

2. OGPメタタグ（og:title / og:description / og:image / og:url / og:type / twitter:card / twitter:image）
   画像パス：/images/ogp.png
   サイトURL：https://example.com

3. ファビコンのlinkタグ
   favicon.ico / favicon-32x32.png / apple-touch-icon.pngの3種類

設定後の確認方法：ツールを使って正しく反映されているかチェックする

設定後は必ず以下のツールで確認しましょう。

OGP確認：「OGPチェッカー」でGoogle検索し、無料ツールにURLを入力してOGP画像・タイトル・説明文が正しく表示されるか確認する
メタディスクリプション確認：Google Search Consoleの「検索パフォーマンス」や、ブラウザのデベロッパーツール（F12）でheadタグ内を直接確認する
ファビコン確認：実際にブラウザでサイトを開き、タブに設定したアイコンが表示されているかを目視確認する。スマートフォンのホーム画面に追加してApple Touch Iconも確認すると完璧

Next.js・Nuxt.jsなどフレームワーク別の注意点

Claude Codeで生成するサイトがNext.js・Nuxt.js・Astroなどのフレームワークを使っている場合、メタタグの設定方法が純粋なHTMLとは異なります。たとえばNext.jsではnext/headコンポーネントやApp RouterのMetadata APIを使います。

フレームワークを使っている場合は、Claude Codeに「このプロジェクトはNext.js（またはNuxt.js）を使っています。OGP・メタディスクリプション・ファビコンをそれぞれどのファイルで設定すればいいか、コード込みで教えてください」と聞くと、プロジェクト構成に合った回答が返ってきます。

フレームワーク特有の設定方法を把握しておくことで、設定ミスや「効いていない」トラブルを防げます。

公開前に使える！最終チェックリスト

3つの設定を確認するための完全チェックリスト

以下のチェックリストを公開前に必ず確認してください。すべてにチェックが入れば、サイトは「見た目だけでなく裏側も整ったプロのサイト」として公開できます。

OGP画像（1200×630px）を用意し、サーバーにアップロードしている
og:image・twitter:imageのURLが絶対パス（https://から始まるURL）になっている
OGPチェッカーでシェアカードのプレビューを確認した
メタディスクリプションを120文字前後で全ページ分設定している
各ページのメタディスクリプションが同一内容になっていない
ファビコン画像（.ico・.png）を作成し、サーバーにアップロードしている
headタグにファビコンのlinkタグが設定されている
ブラウザのタブに地球儀ではなく自分のアイコンが表示されている
スマートフォンのホーム画面追加でApple Touch Iconが正しく表示される

チェックリスト以外に確認しておくと安心な項目

3つの必須設定に加えて、余裕があれば以下も確認しておくと、より完成度の高いサイトに仕上がります。

Google Analytics・Search Consoleのタグが設置されているか
プライバシーポリシーページが存在し、リンクが正しく機能しているか
お問い合わせフォームのテスト送信が完了しているか
モバイル表示（スマートフォン）でレイアウトが崩れていないか
HTTPSで接続できているか（SSL証明書の確認）

浜松市のWEBデザイナーから一言

私が制作現場でよく使うのは「友人に送ってもらう」テストです。自分のサイトのURLをLINEやXでシェアしてもらい、スマートフォンの画面でOGPカードがどう見えるかを確認します。
自分のパソコン上での確認だけでは気づけない表示の問題が、この方法で発見できることが多いです。Claude Codeで作ったサイトを公開する前に、ぜひ試してみてください。

チェックリストを「公開ルーティン」として毎回使うことで、見落としゼロのサイト公開が習慣化できます。

よくある質問（Q&A）：Claude Codeとサイト設定に関する疑問を解決

Q：OGP画像はすべてのページに設定する必要がありますか？

A：理想的にはすべてのページに個別のOGP画像を設定するのがベストですが、ページ数が多い場合はまずトップページ・サービスページ・ブログ記事ページの3種類を優先しましょう。特にブログ記事はSNSでシェアされる可能性が高いため、記事ごとに専用OGP画像を設定することを推奨します。Claude Codeに「記事ページのOGP画像を動的に生成する仕組みを作って」と依頼すると、Next.jsのOG Image Generationなどを活用した自動化の提案を受けられます。

Q：メタディスクリプションはSEOに直接影響しますか？

A：Googleの公式見解では、メタディスクリプションは直接的なランキング要因ではありません。
しかしクリック率（CTR）に影響し、高いCTRはGoogleが検索品質のシグナルとして参考にするため、間接的にはSEOに影響します。
また、AIを活用した検索（AIO/SGE）では、メタディスクリプションの内容がAIの要約に使われる可能性があるため、AIO対策の観点からも重要な設定です。

Q：ファビコンを設定しても変わらない場合はどうすればいいですか？

A：ファビコンが反映されない場合、多くはブラウザのキャッシュが原因です。以下の手順を試してください。
まずブラウザのキャッシュをクリア（Ctrl+Shift+Deleteで設定画面を開く）し、ページを強制リロード（Ctrl+F5またはShift+F5）します。
それでも変わらない場合は、ファビコンファイルがサーバーの正しいディレクトリに配置されているか・headタグのパスが正しいかをClaude Codeに確認してもらいましょう。
「ファビコンが表示されない原因として考えられる点を教えて」と聞くと、チェックすべき項目をリストアップしてくれます。

疑問が出たらClaude Codeに直接「なぜ〇〇が起きるのか」と聞く習慣をつけると、トラブル解決が格段に速くなります。

まとめ

Claude Codeでサイトを作り上げた達成感はすばらしいものです。しかしその気持ちのまま「公開ボタン」を押す前に、この3つの設定を必ず確認してください。

OGP画像：SNSでシェアされたときに表示される画像。未設定だと意図しない画像や画像なしのカードが表示され、クリック率が下がります。1200×630pxの専用画像を用意してmetaタグで設定しましょう。
メタディスクリプション：検索結果に表示される説明文。120文字前後でキーワードを含みながら、ユーザーが「クリックしたくなる」内容を書きましょう。各ページ固有の内容にすることが重要です。
ファビコン：ブラウザのタブ・ブックマーク・スマートフォンのホーム画面に表示される小さなアイコン。未設定のまま地球儀アイコンが表示されていると、一瞬で「素人のサイト」と判断されます。必ず自分のサイトのアイコンを設定しましょう。

この3つは、設定そのものに時間がかかるわけではありません。画像の準備も含めて、集中して取り組めば数時間で完了できます。
Claude Codeに適切な指示を出せば、コードの生成は任せられます。

浜松市のWEBデザイナーとして断言できますが、この3つが整ったサイトと整っていないサイトでは、訪問者の第一印象・信頼感・そして問い合わせや購買への転換率に明確な差が出ます。

せっかくClaude Codeで作り上げたサイトです。公開前の仕上げに、この記事が役に立てば嬉しいです。
ぜひ、チェックリストを使って3つ全部確認してから、公開ボタンを押してください。

静岡県浜松市でホームページ制作ならsatokotadesign