HTMLで作った自作ページ、SEOとか何もしてなかった話なかった話

  • URLをコピーしました!

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) の設定

なにこれ? サイトのアクセス数やユーザーの行動を分析できる無料ツールです。誰がいつどこから来たか、どのページを見たかが分かります。

やりかた

  1. Google Analytics にアクセス
  2. アカウントとプロパティを作成
  3. 表示されるトラッキングコードを <head> 内にコピペ

Google Search Consoleの設定

なにこれ? Googleに「このサイトは私のものです」と伝え、検索結果での表示状況を確認できるツールです。

やりかた

  1. Google Search Console にアクセス
  2. サイトを追加(HTMLタグまたはファイルアップロード)
  3. 所有権確認後、「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が推奨サイズ。

やりかた

  1. CanvaやFigmaで1200×630pxの画像を作成
  2. ページのタイトルやロゴを入れる
  3. サーバーにアップロードしてURLを取得
  4. og:image にそのURLを設定

・1200×630pxのOGP画像を用意するとTwitter/XやLINEでバチッと映える

さらに効くSEO&パフォーマンス改善Tips

canonicalタグでURLを正規化して重複評価を防止

なにこれ? 同じページが複数のURLでアクセスできる状態(例:example.com/pageexample.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

なにこれ? ブラウザのタブやブックマークに表示される小さなアイコンです。これがあると「ちゃんとしたサイト」に見えます。

やりかた

  1. 16×16pxのアイコン画像(.ico形式)を用意
  2. <head> 内に以下を追加:
<link rel="icon" href="favicon.ico">

不要なCSS/JSを削除して読み込み速度を最適化

なにこれ? 使っていないCSSやJavaScriptファイルがあると、ページの読み込みが遅くなります。特にスマホでは体感速度に直結するので重要です。

やりかた

  1. 使っていない <link rel="stylesheet"><script> タグを削除
  2. 外部サービス(Google Fontsなど)も本当に必要かチェック
  3. 画像も適切なサイズに圧縮

🚀 すげー簡単: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-converterwebp-converter)のことです。SEO的に重要で、分かりやすいURLにするとクリック率が上がります。

やりかた

  • 短くシンプルに:html-seo-checklist
  • キーワードを含める:webp-converter-tool
  • ハイフンで区切る(アンダースコアは避ける)

スラッグは短くシンプルに。例:html-seo-checklist

まとめ:一回で世界が変わるチェックリスト

チェック項目完了?
基本metaタグ4点を追加
title & h1を最適化
Analytics設定
Search Consoleでインデックス登録
OGPタグと画像を設定
canonical・alt・favicon追加
ファイル配置&スラッグ整理

やったらスッキリ:1回だけ腰を据えて設定すれば、その後の集客効率が段違いにアップします。


よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

調剤薬局で働く現役薬剤師です。
医療現場の非効率さに疑問を持ち、独学でプログラミングを習得しました。
今では、ReactやPythonを使って現場の業務を効率化するツールを自作しています。
このブログでは、医療や薬局業務に役立つIT活用術や、プログラミング初心者の方に向けた実践的な学習ノウハウを発信しています。

目次