HTMLで作った自作ページ、SEOとか何もしてなかった話
こんにちは、非エンジニアのRyoです。最近、自作のHTMLページをWordPressのドメインにアップしたんですが、検索結果にも出ないしアクセスもゼロ。「え、マジで誰にも見られてない?」って焦りました。同じように悩む人のために、自作HTMLページに必要なやることリスト をまとめたので共有します。面倒くさがりな僕でも一発で分かるように書いたので、ぜひ参考にしてください。
何もしないと”無名ページ”になる理由
静的HTMLページの特徴
なにこれ? WordPressと違い、HTMLファイルは何も設定されていない状態でアップロードされます。metaタグもOGPも、何もかも手動で設定する必要があります。
- WordPressと違い、静的HTMLページは初期設定ゼロ。
- metaタグもOGPも無い状態だとGoogleは「何のページか分からん」と判断。
- その結果、検索結果に出ずSNSシェアの見た目も悲惨。
インデックスとは?
なにこれ? 検索エンジンがページを「検索結果に表示して良い」と判断することです。インデックスされないと、検索しても見つかりません。
検索結果での表示
なにこれ? GoogleやYahoo!でキーワードを検索したときに、ページが表示されるかどうかです。metaタグがないと、検索エンジンがページの内容を理解できません。
😱 わからんポイント:検索に出ない=存在しないのと同じ。まずは認識してもらう準備が必須です。
基本のmetaタグ4点セット
metaタグとは?
なにこれ? HTMLの<head>
内に書く、ページの情報をブラウザや検索エンジンに伝えるタグです。SEOやSNS表示に重要な役割を果たします。
タグ | 役割 | メモ |
---|---|---|
<meta charset="UTF-8"> | 文字化け防止 | まずは土台 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | スマホ対応 | モバイルフレンドリー必須 |
<meta name="description" content="..."> | 検索結果の説明文 | 120〜160文字で魅せる |
<meta name="robots" content="index,follow"> | インデックス促進 | 書き忘れがち! |
charset(文字エンコーディング)
なにこれ? ページで使う文字の種類を指定するタグです。これがないと日本語が文字化けする可能性があります。
やりかた:
<meta charset="UTF-8">
viewport(ビューポート)
なにこれ? スマホでページを表示するときの画面サイズを指定するタグです。これがないとスマホで見たときに文字が小さすぎて読めません。
やりかた:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
description(説明文)
なにこれ? 検索結果に表示されるページの説明文です。クリック率に直結するので重要です。
やりかた:
<meta name="description" content="無料で使えるWebP変換ツール。ブラウザだけで画像を圧縮して、ファイルサイズを大幅に削減できます。">
robots(ロボット指示)
なにこれ? 検索エンジンのクローラー(ロボット)に「このページをインデックスして良いか」を指示するタグです。
やりかた:
<meta name="robots" content="index,follow">
🔍 すげー重要:descriptionはクリック率に直結。キーワードだけ並べず、具体的なベネフィットを書くと◎。
どこに書けばいいの?
これらの <meta ...>
タグは HTMLファイルの <head>
~ </head>
内 にそのままコピペすればOKです。具体的には <title>
タグのすぐ下あたりに配置しておくと後で見つけやすくなります。
タイトルと見出しの付け方
titleタグの重要性
なにこれ? ブラウザのタブや検索結果に表示されるページのタイトルです。SEOで最も重要な要素の一つで、クリック率に直結します。
やりかた:
<title>無料WebP変換ツール|ブラウザで完結する画像圧縮アプリ</title>
- 30〜60文字程度に収める
- キーワードを前方に配置
- 具体的で魅力的な表現にする
<title>
:検索結果に太字で表示
- 例:
無料WebP変換ツール|ブラウザで完結する画像圧縮アプリ
見出しタグ(h1, h2, h3)の使い方
なにこれ? ページの構造を表すタグで、Googleがページの内容を理解するのに重要です。h1はページに1つだけ、h2やh3は階層的に使います。
やりかた:
<h1>ページのメインタイトル</h1>
<h2>セクションの見出し</h2>
<h3>サブセクションの見出し</h3>
<h1>
:ページに1回だけ。見出し階層を守って h2→h3
と続ける。
- キーワードは前方に寄せるとSEO的に強い。
💡 マジで効果大:タイトルとh1が食い違うと評価ダウン。コピペして使い回さず、ページごとに最適化を!
AnalyticsとSearch Consoleを設定しよう
Google Analytics (GA4) の設定
なにこれ? サイトのアクセス数やユーザーの行動を分析できる無料ツールです。誰がいつどこから来たか、どのページを見たかが分かります。
やりかた:
- Google Analytics にアクセス
- アカウントとプロパティを作成
- 表示されるトラッキングコードを
<head>
内にコピペ
Google Search Consoleの設定
なにこれ? Googleに「このサイトは私のものです」と伝え、検索結果での表示状況を確認できるツールです。
やりかた:
- Google Search Console にアクセス
- サイトを追加(HTMLタグまたはファイルアップロード)
- 所有権確認後、「URL検査」でインデックス登録をリクエスト
📈 わかりやすい例え:Analyticsは体重計、Search Consoleは健康診断。どちらも無いと”不調”に気付けません。
SNS映えを狙うOGP設定
OGP(Open Graph Protocol)とは?
なにこれ? SNSでURLをシェアしたときに、タイトル・説明・画像を自動で表示してくれる仕組みです。これがないと「リンクだけ」の地味な表示になってしまいます。
やりかた:
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページ説明文">
<meta property="og:image" content="画像URL">
<meta property="og:url" content="ページURL">
🛠 挿入場所の目安:このOGPタグも先ほどのmetaタグと同様に
<head>
内 にまとめて置けばOK。順番は厳密ではありませんが、<meta charset>
→ 基本metaタグ → OGPタグ のようにグルーピングすると管理しやすいです。
OGP画像の作り方
なにこれ? SNSでシェアしたときに表示される画像です。1200×630pxが推奨サイズ。
やりかた:
- CanvaやFigmaで1200×630pxの画像を作成
- ページのタイトルやロゴを入れる
- サーバーにアップロードしてURLを取得
og:image
にそのURLを設定
・1200×630pxのOGP画像を用意するとTwitter/XやLINEでバチッと映える。
さらに効くSEO&パフォーマンス改善Tips
canonicalタグでURLを正規化して重複評価を防止
なにこれ? 同じページが複数のURLでアクセスできる状態(例:example.com/page
と example.com/page/
)だと、Googleが「重複ページ」と判断して評価を分散させてしまいます。canonicalタグは「これが正しいURLです」とGoogleに教えるためのタグです。
やりかた:
<link rel="canonical" href="https://example.com/page">
これを <head>
内に追加。hrefには「これが正解のURL」を指定します。
画像には必ずalt
属性を付与
なにこれ? 画像が表示されない環境(音声ブラウザなど)でも、その画像が何を表しているかを伝えるための説明文です。SEO的にも「この画像は何か」をGoogleに伝える効果があります。
やりかた:
<img src="image.jpg" alt="WebP変換ツールのスクリーンショット">
altには具体的で分かりやすい説明を書きます。
faviconを置いてブランド感UP
なにこれ? ブラウザのタブやブックマークに表示される小さなアイコンです。これがあると「ちゃんとしたサイト」に見えます。
やりかた:
- 16×16pxのアイコン画像(.ico形式)を用意
<head>
内に以下を追加:
<link rel="icon" href="favicon.ico">
不要なCSS/JSを削除して読み込み速度を最適化
なにこれ? 使っていないCSSやJavaScriptファイルがあると、ページの読み込みが遅くなります。特にスマホでは体感速度に直結するので重要です。
やりかた:
- 使っていない
<link rel="stylesheet">
や<script>
タグを削除 - 外部サービス(Google Fontsなど)も本当に必要かチェック
- 画像も適切なサイズに圧縮
🚀 すげー簡単:HTMLとCSSを軽量化するだけでPageSpeed Insightsのスコア爆上がり。
ファイル配置とスラッグ設計
ファイル配置のベストプラクティス
なにこれ? HTMLファイルをどこに置くかで、URLの見た目と管理のしやすさが変わります。
やりかた:
- ❌ ダメな例:
wp-content/uploads/2025/07/filename.html
- ✅ 良い例:
/tools/webp-converter.html
や/landing/special-page.html
uploadsフォルダ直下にfilename.html
を置くと管理しづらい&ダサい。/tools/
など専用ディレクトリに置き、/tools/webp-converter.html
のように整理。
スラッグ設計
なにこれ? URLの最後の部分(例:example.com/tools/webp-converter
の webp-converter
)のことです。SEO的に重要で、分かりやすいURLにするとクリック率が上がります。
やりかた:
- 短くシンプルに:
html-seo-checklist
- キーワードを含める:
webp-converter-tool
- ハイフンで区切る(アンダースコアは避ける)
スラッグは短くシンプルに。例:html-seo-checklist
。
まとめ:一回で世界が変わるチェックリスト
チェック項目 | 完了? |
---|---|
基本metaタグ4点を追加 | ☐ |
title & h1を最適化 | ☐ |
Analytics設定 | ☐ |
Search Consoleでインデックス登録 | ☐ |
OGPタグと画像を設定 | ☐ |
canonical・alt・favicon追加 | ☐ |
ファイル配置&スラッグ整理 | ☐ |
✅ やったらスッキリ:1回だけ腰を据えて設定すれば、その後の集客効率が段違いにアップします。