はじめに■時間をかけない最低限のSEO、７＋３項目個人サイトでも企業サイトでも、ウェブサイトを作ったなら多くの人々に訪れて欲しいですよね。そのためにはSEO(検索エンジン最適化)を実践すると有利なようだ、ということは多くの方々の知るところでしょう。しかし、SEO本や解説サイトの数は膨大で、紹介テクニックも多数あり、どれを採用すれば良いのか迷うこともありそうです。そもそもSEOが本業ではない以上、SEOだけに時間を掛けてはいられませんよね。多くの方はSEOが本業でないどころか、ウェブ製作すら本業ではないでしょう。あくまでも本業の補助や趣味として製作したウェブサイトのアクセス数を増やしたいということでしょうから。ウェブサイトの中で最も重要なのは中身（コンテンツ）です。SEOは対象サイトの中身があってこそ意味の出る方法ですから、SEOに時間を掛けてしまうよりは中身の充実に時間を使いたいものです。そこで本書は、●これまでSEOを全然意識せずにウェブページを作っていたが●時間を掛けずにSEOしたいという方に向けて、短時間で済むSEOの基礎を解説しています。■これだけを押さえておけば良い！という７つの基本最低限これだけを押さえてページを作ればSEOできる！という基本中の基本に絞り、SEOの初歩を分かりやすく解説しました。ページ製作時に頭に入れておく点はわずか７項目で充分です。基礎とはいえ、それぞれの方法は詳しく説明していますから、SEOが初めてでも簡単に試せるでしょう。■「＋α」の３施策＋参考情報も用意７つの基本だけでも良いのですが、ウェブサイト全体を構築する上で実践しておくと望ましい３つの詳解も加えています。さらに巻末には、余力があれば実践すると良い参考情報も追加しました。ぜひご活用下さい。■章ごと読み飛ばしやすい枠を用意時間の無い方のために、各章の冒頭に要点を短文でまとめた枠『この章のPoint：ここだけ』を用意しました。時間をかけたくない場合はそこで内容を判断し、不明な場合にだけその章を読めば時間を節約できるでしょう。

閲覧者数が多くなれば、それだけウェブ製作も楽しくなり、より更新しやすくなります。ぜひSEOの基礎を実践して、せっかく作ったウェブページを、その情報を求めている人々へ届きやすくしてみて下さい。2019年1月28日にししふぁくとりー／西村文宏(にしし)

目次はじめに●■時間をかけない最低限のSEO、７＋３項目目次1.検索ワードを決めて、確実に使う。●11.検索ワードに採用する単語を決定する基本●12.検索ボリュームを調べて検索ワード選定の参考にする方法●13.検索ワードをページ内でしっかり使う●14.最適化は1ページ1検索ワードに留める●15.ある程度の長さがある本文を書く2.タイトルに検索ワードを含める。●21.指定文字数内で検索ワードを含むタイトルの付け方●22.重要な検索ワードは最初(左側)の方に使っておく●23.タイトルにサイト名も併記する場合は右側に●24.各ページで異なるタイトルを付ける（具体的にする）方法●備考.読みたくなるタイトルを付ける(大げさにはしない)3.見出しと本文の関係をうまく利用する。●31.見出しは検索結果のタイトルに使われることもある●32.見出しレベル6種類を適切に使い分ける方法●33.検索ワードを含めて分かりやすさが増すように書く●34.全部の見出しをh1(第１レベル)にしても意味はない●35.見出しを画像にしたい場合は代替文字を使う●備考.見出しの文字サイズは自由に調整できる4.概要文(要約文)をしっかり書く。●41.概要文は、そのページを読むかどうかの決め手になる●42.概要文の書き方：HTMLソース内の記述位置●43.概要文の文字数は確実に120文字を超えておく●44.検索ワードと関連語を前半にしっかり含んでおく●45.更新日付があれば検索結果に表示されることも●備考.Keywordsは書いても意味がない5.アンカーテキスト(リンク)にも検索ワードを使う●51.リンクの種類とリンクが重要な例●52.サイト内リンクを掲載できる場所の例●53.「こちら」ではなく検索ワードでリンクを作る●54.リンクはa要素で作る（他の方法を使わない）●55.隠れたリンクを作らないように●備考.リンクリストは箇条書きで作る6.ページ内リンク(ページ内目次)も活用する。●61.ページ内リンクとは？最もローカルなナビ●62.検索結果の概要部分にページ内リンクが出ることも●63.見出しをすべてページ内リンクにしても良い

●64.見出し単位でもリンクされやすくする方法●備考.話題が異なるならページそのものを分割する7.画像の掲載方法を最適化する●71.代替文字には適切な検索ワードを含めておく●72.重要な文字を画像化しない（テキストで表示する）●73.キャプションをテキストで掲載する●74.無駄に重たい画像にしない（軽くする）[+α]8.パンくずリストを作る●81.パンくずリストは検索結果にも出る●82.パンくずリストの簡単な作り方●83.パンくずリストの左端(先頭)項目はサイト名に●備考.構造化パンくずリスト[+α]9.サイトマップを作る●91.サイトマップページの作り方●92.サイトマップXMLファイルの作り方●93.サイトマップXMLの自動生成方法●94.サイトマップXMLの存在をrobots.txtで示す[+α]10.検索サイト提供サービスに登録しておく●101.GoogleSearchConsoleでサイトマップを送信●102.BingWebマスターツールでサイトマップを送信●備考.Yahoo!Japanへの対策は？アクセス向上のための参考情報７個（余力があれば実践してみましょう）●《参考Ａ》軽くする（せめて第一画面をすぐに表示させる）●▼A1.読み込むファイル数やサイズを減らす方法●▼A2.CDN経由でライブラリを読み込む方法●▼A3.外部ファイルの読み込みを後回しにする方法●▼A4.プリフェッチ機能を利用して先読みさせる方法●▼A5.もっと軽くする余地がないかPageSpeedInsightsで調べる●《参考Ｂ》OGPやTwitterCardsを加えてSNS連携●《参考Ｃ》SNSボタンを掲載する（公式スクリプトで）●《参考Ｄ》モバイルフレンドリーかどうかを確認／レスポンシブWebデザインでPC・モバイル両対応に●《参考Ｅ》ずっと変わらない自分のドメイン名を持つ●《参考Ｆ》移転するなら望ましい形でリダイレクト（自動転送）を設定する●《参考Ｇ》SSL証明書を使ってhttpsでアクセス可能にするおわりに●■極力時間をかけない、最初のステップとしてのSEO

1.検索ワードを決めて、確実に使う。検索サイトからの訪問を増やしたいのなら、「どんな単語で検索した人に訪れて欲しいのか」というキーワード（＝検索語）を明確に決めましょう。「なんでもいいから来て欲しい」という漠然とした要望ではSEO（検索エンジン最適化）はできません。まずは、アクセス数を増やしたいと望むページの「キーワード」を確定させる必要があります。※本書では、この「どんな単語で検索した人に来て欲しいのか」というキーワードのことを、「検索ワード」と表記しています。検索ワードは必ずしも１単語とは限りません（後述）。▼この章のPoint：ここだけここで重要なのは、①検索ワードを決めて、②その検索ワードをページ内にしっかり含めておく、という２点です。この２点だけを忘れないように書きましょう。なお、検索ワードは「サイト単位」ではなく「ページ単位」で考えます。検索ワードの決め方や、ページ内での検索ワードの含め方については、下記の５項目を参考にして下さい。▼この章の目次：11.検索ワードに採用する単語を決定する基本12.検索ボリュームを調べて検索ワード選定の参考にする方法13.検索ワードをページ内でしっかり使う14.最適化は1ページ1検索ワードに留める15.ある程度の長さがある本文を書く

11.検索ワードに採用する単語を決定する基本検索ワードを考える基本は、「複数の単語で構成する」、「実際の検索に使われる単語を使う」、「検索サジェストの結果を参考にする」という3点だけです。以下に詳しく解説します。■複数の単語で構成するよほどニッチな話題でもない限り、検索ワードは複数単語の組み合わせで考えます。例えば、「スカイダイビング」のような１単語だけで検索結果の上位に表示させるのは困難です。競合するページが多すぎますから。図111.検索ワードの構成単語数が多いほど、競合ページ数は少なくなるもしスカイダイビングの体験場を紹介しているページなら、「スカイダイビング＋体験」という少なくとも２単語を検索ワードにします。もし特定の場所を紹介しているページなら「スカイダイビング＋兵庫県」、費用を案内しているページなら「スカイダイビング＋費用」のように、最適化する検索ワードは複数の単語で構成しましょう。もちろん、「スキューバダイビング＋ライセンス＋費用」のように、３単語以上を組み合わせても構いません。構成単語を増やせば増やすほど競合ページが減るためSEOは楽になりますが、「その単語の組み合わせで検索する人」の数は減ってしまいます。次節12でご紹介するツールなどを使って、「その検索ワードを使ってどれくらい検索されているのか？」も参考に決定すると良いでしょう。■実際の検索に使われる単語を考える検索ワードの決め方で重要な点は、実際の検索に使われる表現を選択することです。いくら飲食店のメニューに「れ～めん」があっても、検索ワードを「れ～めん」にするのは避けましょう。「れ～めん」という特殊な表記で冷麺を検索する人はまず居ないからです。特殊な記号や一般的ではない表現を使って最適化しても、アクセス向上には役立ちません。多くの人が検索に使うような、一般的な単語や表現が何なのかを考えましょう。(※差を気にしなくて良い「表記の揺れ」については、次節12で解説します。)■検索サジェスト機能を参考にするどんな単語を組み合わせて検索ワードにすれば良いかを考える方法の１つに、検索サジェスト機能があります。検索サジェストとは、検索サイトの入力欄に単語を打つと自動的に表示される検索候補のことです。下図は、「そうめん」と入力した際に表示されたサジェストの例です。

この検索サジェストはユーザ（＝検索者）に向けた機能なので、検索数の多い単語が優先的に出るわけではありません。ユーザの現在位置（＝検索に使われているネットワークの所在）によって変わったり、過去に検索された単語が履歴として反映されたりします。GoogleやBingでの検索サジェスト結果を一覧で見せてくれるサービスがいくつかありますので、多数の単語に対する検索サジェスト結果を一括して知りたい場合は、それらを利用すると楽です。下図は、goodkeyword（https://goodkeyword.net/）で「スキューバダイビング」を検索した例です。サジェスト結果が80件ほど見えています。

このように検索サジェスト機能を使うと、指定の単語に加えてどんな単語が検索に使われているのかを知ることができます。検索ワードとして使いたい単語の１つ目が確定している場合には特に便利でしょう。

12.検索ボリュームを調べて検索ワード選定の参考にする方法その単語がどれくらい日常的に検索されているのかを示す値のことを「検索ボリューム」と言います。検索ワードを決める際には、この検索ボリュームも考慮しましょう。ほとんど検索に使われていない単語(※)で最適化しても、アクセス向上は望めないからです。※ニッチな需要を拾い上げることを狙うのなら、あえて検索ボリュームの小さい単語に最適化する手もありますが。以下に、検索ワードを決めるための注意点２つと、指定単語の検索ボリュームがどれくらいなのかを調べられるツール２つをご紹介いたします。■同じ意味を表す単語が複数ある場合がある日本語には特に、同じ意味を表す単語が複数ある場合があります。例えば「コーヒー」と「珈琲」のように読みは同じでも表記方法が異なったり、「おにぎり」と「おむすび」のように異なる名詞があったり、「作り方」と「作成方法」のように同じ意味でも表現が異なったりする場合がよくあります。図121.同じ意味でも異なる複数の表記や表現があるこれらの単語で最適化したい場合は、どれを採用するのが望ましいかを考える必要があります。■気にする必要がある差異と、気にする必要のない差異最近の検索エンジンは、簡単な表記の揺れなら同一単語として扱ってくれます。例えば、英単語「Interface」のカタカナ表記は主に４通りありますが、「インターフェイス」・「インターフェース」・「インタフェイス」・「インタフェース」はすべて同じ単語として解釈されています。したがって、どれでも好きに使えば良いでしょう。また、「プリンター」と「プリンタ」のように、単語の末尾に長音符「ー」が付いたり付かなかったりする場合も同様に同じ単語だと解釈されています。このような場合は、採用単語に迷う必要はありません(※)。※長音符「ー」は付けておく方が良い？あらゆる環境で表記の揺れが吸収されるとは限りません。例えばブラウザの内蔵機能を使った「ページ内検索」でも確実にヒットさせることを考えるなら、長音符「ー」は常に加えておく方が望ましいでしょう。（存在しない文字は検索にヒットしませんが、余分な文字が付いている分には困りませんので。）上記のように「気にする必要のない差異」もありますが、逆に「気にする必要のある差異」もあります。例えば、「自動車学校」と「教習所」とでは検索結果は大きく異なります。他に「ドライビングスクール」という表現もありますし、もしかすると「運転免許＋取得」という２単語で検索されるかもしれません。このように、同じ意味でも検索結果が異なる場合には、どの単語で最適化するのか（＝どれを検索ワードとして採用するのか）を決める必要があります。その際には、下記のような検索ボリュームを比較できるツールを活用するのが便利です。■GoogleTrends複数の検索ワードについて、検索数の差を確認できるツールです。https://trends.google.co.jp/trends/?geo=JP検索結果の様子は下図の通りです。検索数が具体的な数値で分かるわけではありませんが、対象期間内で最も多かった検索数を100とした場合に、そこからどれくらいの差があるのかがグラフで示されます。ユーザ登録などは不要ですぐに使えるため、手軽で便利です。

本書では「検索時に使う単語」のことを「検索語」ではなく「検索ワード」と表記しています。この２単語はどちらも同じ意味ですが、GoogleTrendsで調べると、上図のように「検索ワード」(青色)の方が少し多いことが分かります。（ほんの一時期だけ逆転していますが。）上図では２単語だけを比較していますが、３単語以上を同時に比較することもできます。下図は、「教習所」・「自動車学校」・「ドライビングスクール」の３単語を比較した例です。この結果から判断すると、「自動車学校」という表現を採用するのが最もアクセスを期待できそうです。

このように、同じ意味を表す複数の表現を比較して、どの表現を採用するのかを決定すると良いでしょう。■キーワードプランナー(Google広告)検索結果ページやその他のウェブサイトへ広告を出稿するサービスである「Google広告」（旧名称は「GoogleAdWords」）には、指定単語や関連単語の検索ボリュームを具体的な数値で教えてくれる「キーワードプランナー」というツールがあります。https://ads.google.com/intl/ja_jp/home/tools/keywordplanner/#!#start先程のGoogleTrendsとは異なり、実際に何回の検索があったのかが関連単語も含めて具体的に分かるので高機能です。しかし、このツールを使うためには「Google広告」にアカウントを作る必要があります。アカウントの開設は無料ですが、アカウントを作っただけでは下図のように大まかな数値しか表示されない制限があります（それでも便利ですが）。正確な数値は、ある程度の費用を掛けて広告を出稿しないと表示されません。

本書をお読みになる段階では、そこまで細かな数値を調べて頑張らなくても良いでしょう。まずは先程のGoogleTrendsを参考にして検索ワードを選んでみて下さい。なお、参考までにキーワードプランナーの大まかな操作方法を以下に記しておきます（※Google広告のアカウントがあることが前提で

す）。▼Step.1：キーワードプランナーにブラウザでアクセスし、下図の黄色矢印で示した「検索のボリュームと予測のデータを確認する」をクリックします。

▼Step.2：キーワードの入力欄が現れますので、調べたい検索ワードを「１ワードにつき１行」で必要なだけ入力します。入力できたら右下の「開始する」ボタンをクリックします。

▼Step.3：すると、まずは「予測データ」が表示されます。ここに表示されている「クリック数」や「表示回数」は検索ボリュームではありませんので注意して下さい。これらは「出稿した広告がどれくらい表示されるか」を（予算や季節性を考慮して）予測した値です。検索ボリュームを知るには、下図の黄色矢印部分に示した「過去の指標」タブをクリックします。

▼Step.4：すると、下図のように画面が切り替わります。下図の赤丸部分に表示されている「月間平均検索ボリューム」という項目の値が、実際に検索された回数のデータです。

広告を出稿していないアカウントでは、上図のように概数しか表示されませんので細かな比較はできません。しかし、比較用途には先のGoogleTrendsを使えば問題ありませんから、キーワードプランナーは「検索ボリュームがどれくらい大きいのか」を調べる用途だけに使うことにすれば、特に広告を出稿しない状態でも役に立つでしょう。（特に、基礎的なSEOだけを施せば良いという初期段階では、これだけでも充分に役立ちます。）備考：上記のキーワードプランナーの画面イメージは、2018年12月時点のものです。時々インターフェイスが新しくなりますので、上図とは異なる画面になっているかも知れません。このキーワードプランナーはとても有名なツールですから、他のSEO本やウェブサイトなどにも多数の解説があります。本書の内容をすべて理解できた上で余力があるようなら、改めて使い方を調べてみて下さい。

13.検索ワードをページ内でしっかり使うウェブページ内に書かれていない単語で検索結果にヒットさせようとするのは困難です(不可能ではありませんが)。基本的には、最適化したい単語がページ内に文字として含まれていなければなりません。しかも１回だけでは不十分で、そこそこの回数で含まれている必要があると考えましょう。とはいえ、不自然にたくさん詰め込んではいけません。無理に詰め込むと「SEOスパム」と解釈されてしまう可能性もあり逆効果です。不自然にならない程度に、しかし確実に使っておくようにします。例えば下記のように代名詞を使わずに検索ワードを直接記述したり、検索ワードになり得る単語が省略されている場合には付け足したりできないかを検討してみましょう。■指示語をキーワードに置き換える例：[×]美味しい珈琲。目を覚ますにもこれがお勧めです。[○]美味しい珈琲。目を覚ますにも珈琲がお勧めです。■検索ワードを自然に挿入できる場所では省略せずに書く例：[×]まずは体験がお勧め。一度試せば夢中になります。[○]まずはダイビングの体験がお勧め。一度ダイビングを試せば夢中になります。「これ」や「それ」などの指示語はたいてい検索ワードに置き換えられます。クドくならない程度に置き換えるよう気をつけてみましょう。※見出しに検索ワードを含める点については、第3章で解説します。

14.最適化は1ページ1検索ワードに留める１つのウェブページでは１つの検索ワードに最適化します。単一のページで複数の検索ワードに最適化しようとは考えない方が無難です。これは、複数の単語を使ってはいけないという意味ではありません。例えば「ゴルフ場＋兵庫県」を検索ワードとして最適化するのなら問題はありません。そうではなく、「ゴルフ場＋兵庫県」と「ゴルフ場＋山梨県」を同一ページで最適化しようとしない、という意味です。これだと、そのページは兵庫県についてのページなのか、山梨県についてのページなのかが判別できず、結果的にはどちらの単語にも最適化できない、ということになりがちです。もちろん検索ワードによっては絶対に無理というわけではありません。その検索ワードがウェブ上に情報の少ないニッチな単語なら充分可能でしょう。ただ、競合が多い場合には困難です。最適化の基本として、「１ページでできる最適化は１検索ワードだけ」だと考えておきましょう。※どうしても検索ワード単位にページを用意できない何らかの理由がある場合は、せめて見出しを使って話題を区切っておきましょう。詳しくは第3章で解説します。

15.ある程度の長さがある本文を書くウェブページを特定の検索ワードに最適化するためには、ある程度の文章量が必要だと考えましょう。「写真１枚に文章が３行だけ」というような簡易すぎるページで検索結果の上位にヒットさせるのは容易ではありません。文章量が短ければ、検索ワード自体はもちろん、それに関連する単語もほぼ含められないでしょうから、「何について書かれたページなのか」をほとんど判断できないためです。もちろん、世の中には画像しか存在しないページや、動画が1つあるだけのようなページが上位にヒットしていることもあります。映画の公式サイトなどは特にそうです。しかし、本書をお読みになる段階ではそれらのようなヒット方法を採用するのは難しいでしょうから、まずは「文章量がそこそこあった方が良い」と考えておきましょう。検索結果の上位にヒットするかどうかが文章量だけで決定されるわけではないため、「何文字以上あれば良い」と具体的に言うことはできません。ただ、１ページ内に100文字にも満たない短い文章しか掲載していないなら、まずはもっと増やすことを考えましょう。（参考までに記すと、今お読みの節15全体の文字数は約1,360文字です。）■役立つページにはそれなりに情報量があるはずGoogleやBingなどの検索サイトの目的は、ユーザに「役立つページ」を紹介することです。それが検索サイトの価値向上(さらには広告収入の向上)に繋がるわけですから。ここでの「役に立つページ」とは、たいていは「それなりに情報量のあるページ」のことでしょう。３行だけしか書かれていないようなページが役に立つことは（ないとは言いませんが）あまりなさそうですので。したがって、文章は書けるだけ書いておきましょう。その方が検索ワードを自然な形で何度も出しやすいメリットもあります。最適化する検索ワードだけでなく、それに関連する単語も多数登場すれば、それだけ検索結果に（最適化した検索ワード以外の単語で検索された場合でも）ヒットする可能性が高まります。■直帰を防ぐにもある程度の情報量は必要なはずそもそも短すぎるページでは、たとえ検索サイトから人が訪れてもすぐに帰ってしまう（＝検索結果ページに戻ってしまう）でしょう。情報量の少ないページを見せられて、「このサイトの他のページにはたくさんの情報がありそうだ」などと推測してくれる人は滅多にいません。そのような直帰を防ぐためにも、どのページにもある程度の文章量は必要だと考えておきましょう。※備考：直帰率直帰率を調べるには、アクセス解析ツールを設置して少なくとも数日間はデータを取る必要があります。本書の本題からは外れますので詳細は記しませんが、長期的には何らかのアクセス解析サービスを利用する方が自サイトの状況を把握しやすくて便利です。特に目当ての解析サービスがないなら、「GoogleAnalytics」https://www.google.com/analytics/web/?hl=ja。、、。

2.タイトルに検索ワードを含める。人間の閲覧者だけではなく検索エンジンも、ページの内容を判断する材料の１つに、そのページタイトルを利用します(※)。したがって、タイトルに何を書くかはSEO面でも重要です。適切に検索ワードを含めておくことを忘れてはいけません。※タイトルが「京都府のゴルフ場一覧」なら、ページの内容は京都府にあるゴルフ場の一覧なのだと推測できます（当たり前ですが）。タイトルだけですべてを判断されるわけではありませんが、重要な判断材料の１つには違いありません。たいていの検索結果ページでは、タイトルが最も目立ちます。タイトルは、検索者が「そのページを閲覧するかどうか」を判断する大きな要素です。ブックマークした際の項目名の初期値としてもタイトルが使われます。簡潔で読みやすく、分かりやすいタイトルを考えましょう。▼この章のPoint：ここだけタイトルは、重要な検索ワードができるだけ左側に来るように30文字程度(以内)で書きます。複数のページで重複しないよう、具体的な内容を書きましょう。タイトルにサイト名を加える場合は右側に書きます。大げさな表現や余計な記号は廃して、検索ワードがしっかり目に付くように書きます。タイトルの付け方については、下記の４項目＋備考を参考にして下さい。▼この章の目次：21.指定文字数内で検索ワードを含むタイトルの付け方22.重要な検索ワードは最初(左側)の方に使っておく23.タイトルにサイト名も併記する場合は右側に24.各ページで異なるタイトルを付ける（具体的にする）方法備考.読みたくなるタイトルを付ける（大げさにはしない）

21.指定文字数内で検索ワードを含むタイトルの付け方検索サイトの検索結果ページにはヒットしたページのタイトルが表示されますが、タイトルのすべてが表示されるとは限りません。何文字まで表示されるかは検索者の環境（画面サイズなど）によって異なりますが、PC環境なら30文字程度は表示されると考えて良いでしょう。

スマートフォンなどの小型モバイル端末での検索結果では、上図の右側のように折り返されて、2行で33文字程度まで表示されるケースもありました。上図で検索結果として表示されている3件のうち、上2件は筆者が情報サイトAllAboutで書いた記事で、下1件は筆者のブログ記事です。どれもタイトルが長いので途中で切れており、切れていることを示す三点リーダ記号「…」が末尾に表示されています。途中で切れているとはいえ、重要な検索ワードは確実に見えるように書いてあります。例えば上図で1件目にヒットしているページは、以下のようにtitle要素を書いてあります。切れている部分はコーナー名やサイト名のように、見えなくても大して問題のない部分です。ここではタイトルの付け方として、下記の4点をご紹介しておきます。●30文字程度以内に収まるようにする●英数字は半角文字で記述する●記号で目立たせようとせず、関連するキーワードを使う●単語は列挙せず、自然な文として書く■30文字程度以内に収まるようにする検索ワードを含み30文字以内で収まるような、短すぎず長すぎないちょうど良いページタイトルを考えてみて下さい。それよりも長い場合には、検索者の環境によっては途切れてしまう可能性があることに注意が必要です。詳しくは後述しますが、重要な検索ワードほど（切れないように）最初の方に書いておきましょう。なお、英単語の途中では改行されず、単語全体が次の行に送られる規則があります。英単語を多く含むタイトルの場合は、下図の右側に橙色矢印で示した箇所のように「英単語の手前」で折り返されて、全体的に掲載文字数が減ってしまうこともあります。

■英数字は半角文字で記述する日本語環境では、英数字を記述する際に半角文字と全角文字の２種類が使えます。多くのフォントでは全角よりも半角の方が横幅が狭いため、半角を使う方が１行内に収まる文字数は多くなります。できるだけ見切れないように、英数字は半角で記述しておく方が望ましいでしょう。特に、等幅フォントで表示される環境の場合、全角文字で英単語を記述すると、下図のように１文字の横幅が広くなりすぎて読みにくくなります。その点からも、英数字は常に半角文字で記述しておきましょう。

■記号で目立たせようとせず、関連するキーワードを使うタイトル内に「★★★」や「◆◆◆」などの記号を含めて目立たせようとしても意味はありません。ただの記号はSEOに役立ちませんし、検索結果では「表示順位」こそが最大の目立つ要素であり、タイトルに記号が含まれていても特に目立ちません。むしろ、広告のような感じがして敬遠されることもあるかもしれず、デメリットしかないでしょう。記号よりも「検索ワードに関連する単語」をもっと含めて、少しでも多くの検索者に届くような文を考えて下さい。せっかくのタイトルスペースを無駄な記号で埋めてしまわずに、できるだけそのページの内容が分かるような自然な日本語文で書いておきましょう。ただし、「そのページのタイトル」と「サイト名」とを区切るために、ハイフン記号「」や縦棒記号「|」などを使うことは、読みやすさと分かりやすさの向上に繋がりますので役に立ちます（詳しくは後述）。■単語は列挙せず、自然な文として書く検索ワードが重要だとは言っても、検索ワードだけを何度も何度も列挙するようなタイトルに意味はありません。自然な文章で書きましょう。Googleのヘルプ(下記URL)にも単語の詰め込みを避けるよう注意書きがあり、同じ単語を何度も繰り返しても無駄だと解説されています。また、度を超えると「キーワードの乱用」として不正行為だとみなされる可能性があることも警告されています。https://support.google.com/webmasters/answer/35624?hl=jaそもそも、たとえ検索結果の上位に表示されても検索者がクリック（タップ）して訪れてくれなければ意味はありません。単語を列挙するだけのような機械的で怪しげなタイトルではなく、検索ワードを含めつつも自然な表現になるよう気をつけましょう。

22.重要な検索ワードは最初(左側)の方に使っておく検索ワードがタイトルに含まれていなくても、検索結果の上位に表示されることはあります。しかし、それは「SEOにタイトルが関係ない」という意味ではありません。検索結果として表示される順位の決定にはタイトル以外の要素も多数影響している、というだけのことです。したがって、タイトルには検索ワードをしっかり含めておきましょう。検索結果にタイトルが何文字まで表示されるかは、検索者の環境によって異なります。今後の仕様改定で表示される文字数が減る可能性もないとは言えません。そこで、検索ワードはできるだけ最初(左側)に書いておきましょう。重要な文字が見えなくなるのを防ぐためです。[×]簡単で面白い手順を紹介！長く飛ばせる紙飛行機の折り方[○]紙飛行機折り方上記の[×]で示したタイトルだと、もしタイトルとして15文字までしか表示されない検索結果では、重要な検索ワードである「紙飛行機」と「折り方」のどちらも見えないことになります。■検索ワードを構成する複数単語は近くに書いておく検索ワードが複数単語から成り立っている場合は、それらはできるだけ近くに書くようにします。離れているよりは近い方が、それらの複数単語に関連するコンテンツなのだと解釈されやすいからです。例えば、「紙飛行機＋折り方」の２単語を検索ワードにした場合は、下記のように考えます。[×]紙飛行機折り方[○]紙飛行機折り方：前者よりは後者の方が、紙飛行機の折り方を紹介していることが（人間にとっても検索エンジンにとっても）分かりやすいでしょうし、肝心の「折り方」が見切れてしまう可能性も低いでしょう。

23.タイトルにサイト名も併記する場合は右側にウェブページのタイトルには、区切り文字を使ってサイト名も併記されている場合がよくあります。よく使われる区切り文字は、ハイフン「」や縦棒「|」です。●「ページ名サイト名」●「ページ名|サイト名」タイトルの中にサイト名も含めるメリットは、「どのウェブサイトに属するページなのか」がハッキリする点です。もしサイト名にも大きなジャンルとしての検索ワードが含まれているのなら、ぜひサイト名も併記しておきましょう。■区切り文字の前にページタイトル、後にサイト名タイトルの直後にサイト名も併記する場合は、半角のハイフン記号「」や半角の縦棒記号「|」を区切り文字にして、ページのタイトルを左側(先)に、ウェブサイト名を右側(後)に書きます。ページタイトルを先にするのは、文字数制限で見切れてしまうのを防ぐためです。区切り文字の前後には、区切りを明確にするために半角スペースを１つ入れておくと良いでしょう。[×]太郎マニアックス紙飛行機の簡単な折り方[○]紙飛行機の簡単な折り方太郎マニアックス（サイト名が「太郎マニアックス」の場合）■タイトルにサイト名を加えるかどうかの考え方検索ワードになりそうな単語がサイト名に含まれていないなら、無理にサイト名を含める必要はありません。しかし、サイト名が企業名や店名のように「ウェブサイト全体をその名称で最適化したい」という事情があるなら、全ページにサイト名を加えておきましょう。タイトルにサイト名を含めるかどうかを迷う場合には、とりあえず含めておくのがおすすめです。そのページが「どのウェブサイトに属しているのか」が明示されれば、分かりやすさが増しますから。たとえSEOに資さなくても、最終的には人間に読ませるためのウェブページなのですから「分かりやすさ」を向上させておくことに越したことはありません。[△]紙飛行機が楽しく折れる絵本[○]紙飛行機が楽しく折れる絵本花子出版株式会社[△]エアコンACN5656取扱説明書[○]エアコンACN5656取扱説明書○×空気清浄株式会社それぞれ[△]の方だと、内容は分かりますが、公式説明なのか第三者による説明なのかが分かりません。[○]の方なら公式サイトでの説明らしく感じられるため、より閲覧されやすいかもしれません。（もちろん、株式会社と書いてあればすべて公式というわけではありませんが。「そう見えやすいかどうか」という差も重要でしょう。）

24.各ページで異なるタイトルを付ける（具体的にする）方法大前提として、タイトルは「そのページの内容」を表している必要があります。複数のページで同じタイトルを使わないよう気をつけましょう。例えば「花子ハーブ店」という店舗案内サイトがある場合を考えます。もし全ページでタイトルを「花子ハーブ」にしてしまうと、各ページを区別できませんし、SEO面で何も役に立ちません。同じタイトルになってしまうようなら、タイトル案から具体さが欠けている可能性があります。「そのページでは何を説明しているのか」を再考して具体的な単語を加えましょう。ただ、それでも下記のように、あまりSEO面では役に立たないタイトルを付けてしまうかも知れません。[△]所在地花子ハーブ店[△]店舗概要花子ハーブ店上記では「そのページが何を説明しているのか」は分かりますが、SEO面では取り立てて役には立たないでしょう。もっと検索ワードとして使える具体的な単語を加えて、下記のように書いてみましょう。[○]所在地:東梅田駅から徒歩1分花子ハーブ店[○]店舗概要:100種類のハーブを調合花子ハーブ店これなら、地域名や目的に関する単語で検索された際にもヒットすることが期待できるでしょうし、検索結果に出てくれば（内容が想像しやすいために）クリックされやすいでしょう。■一般名詞だけのタイトルにせず、独特の単語を含める特に、一般名詞だけのタイトルを付けないよう注意して下さい。例えば、個人のプロフィールを説明するページで単に「プロフィール」としか書かなかった場合は、たとえ検索結果に出てきても誰のプロフィールなのかが分かりませんから、クリックはされにくいでしょう。[×]プロフィール[○]折り紙専門家山田太郎プロフィールタイトルには、できるだけ「他にない独特の単語（名詞）」を含めて具体的に書くよう気をつけ、何らかの検索ワードをひねり出して加えておきます。そうすれば、1件でも多くのアクセス者を獲得する役に立つでしょう。

備考.読みたくなるタイトルを付ける(大げさにはしない)タイトルには単に検索ワードが含まれていれば良いというわけではありません。検索ワードを含めればSEOには役立ちますが、検索結果の上位に表示されても、検索者から「このページを読んでみよう」と思われなければアクセスは得られませんから。検索ワードをしっかり含んだ上で、さらにそのページを読みたくなるような工夫もあると望ましいでしょう。その方法については別の領域の話（キャッチコピーの作り方など）です。本書はSEOの解説が目的ですから、詳しい説明は割愛しますが、例えば「数字を含むと良い」とはよく言われます。[△]「◇◇」[○]「◇◇」前者よりは後者の方が書かれている分量が事前に分かり、読みやすそうに感じられるようです。※備考：本書のタイトル『個人でも簡単！時間をかけない最低限のSEO、今すぐできる７つの基本』も、その効果を期待したものです。(笑)■誇大広告のような大げさな表現は避ける大げさな表現は、信用を失うだけなので避けましょう。アクセス数の向上にはリピーター（＝何度もアクセスしてくれる人のこと）の獲得も重要です。大げさな表現によって（一度だけはアクセスしてもらえたとしても）信用を失ってしまえば、その人が二度目に来ることはないでしょう。Googleの公式ヘルプ内にある下記のページでも、望ましいタイトルの付け方が説明されています。短くまとまっていますのでご一読をおすすめ致します。■GoogleSearchConsoleヘルプ：『検索結果に効果的なタイトルとスニペットを作成する』https://support.google.com/webmasters/answer/35624?hl=ja

3.見出しと本文の関係をうまく利用する。ウェブページを作る際には「ページ内のどこに何が書かれているのか」を、人間に対してだけでなく検索エンジンにも分かりやすくしておくことが大切です。見た目だけを考えず、HTMLソースのどこに何が書かれているのかが明確に分かるように書きましょう。そのためには、「見出し」を表す要素（HTMLタグ）を活用します。▼この章のPoint：ここだけHTMLで書いた「見出し」は、検索エンジン側の判断でタイトルとして採用されることもあるくらい重要です。HTMLに用意されている6種類のレベル別「見出し」要素を階層構造順に使いましょう。各見出しには、検索ワードとその関連単語をしっかり含めておくようにします。もしこれまでに見出しを使っていなかった場合は、見出しを追加できるように考えましょう。文章量がそこそこあるなら、たいてい何らかの見出しは加えられるものです。見出しと本文の役割や書き方については、下記の５項目＋備考を参考にして下さい。▼この章の目次：31.見出しは検索結果のタイトルに使われることもある32.見出しレベル6種類を適切に使い分ける方法33.全部の見出しをh1(第１レベル)にしても意味はない34.検索ワードを含めて分かりやすさが増すように書く35.見出しを画像にしたい場合は代替文字を使う備考.見出しの文字サイズは自由に調整できる

31.見出しは検索結果のタイトルに使われることもある検索サイトの検索結果ページには、多くの場合でページタイトルがそのまま表示されます。しかし、検索サイト側の判断によっては、見出しに使われている文字列が検索結果のタイトルとして表示されることもあります。

上図の場合、実際のページタイトルは「12月25日の講義資料」ですが、検索結果には見出しの１つに使われている「著作者人格権とは」がタイトルとして表示されています。（※この図は実際の検索結果ではなく、筆者が作成したものです。）

したがって、見出しは適当に付けたりせず、そのままタイトルとして検索結果に表示されても良いように、しっかりと「その段落で語られている内容」を表す検索ワードを含む形で、適切な短文を考えて書いておきましょう。備考：実際に見出しの1つがタイトル化された例情報サイトAllAboutで筆者が書いた記事に「表の空っぽのセルにだけ装飾(斜線など)を加える方法」というタイトルの記事がありました。この記事の中には「CSSで斜線を引く方法」という見出しがあったのですが、まさにその「CSSで斜線を引く方法」という見出しがタイトルとして検索結果に表示されていたことがあります。（今では需要に合わせたSEO効果を狙って記事タイトル自体をそう変更していますので、図示はできないのですが。）https://allabout.co.jp/gm/gc/457196/

32.見出しレベル6種類を適切に使い分ける方法単に文字を大きくしたり太くしたりする方法では、検索エンジンには「見出し」だとは解釈されません。検索エンジンにも「そこが見出しだ」と解釈させるためには、HTMLで用意されている「見出し」のための要素（h1～h6要素）を使ってHTMLソースを書く必要があります。ウェブ作成ソフトにも、下図のように見出しのレベルを指定する機能はありますから、単に文字を大きくするのではなく「見出しを作る機能」を適切に使うようにしましょう。

■見出しを表す６種類の要素(タグ)HTMLには「見出し」を表すための６種類の要素（HTMLタグ）が用意されています。６種類の一覧と用途例は下記の通りです。●h1要素第１レベルの見出し例：表題（タイトル）●h2要素第２レベルの見出し例：大見出し●h3要素第３レベルの見出し例：中見出し●h4要素第４レベルの見出し例：小見出し●h5要素第５レベルの見出し例：補足見出し●h6要素第６レベルの見出し例：備考見出し上記の用途例はあくまでも例であって、この用途でなくても構いません。ただし、階層構造（＝使う順序）は上記の通り「数字の小さい順」になるよう気をつける必要があります。(詳しくは後述)■見出しを表すHTMLソースの書き方h1から順番に階層ごとに使います。書き方はどれも同じで、下記のように開始タグと終了タグとで文字を挟むだけです。

HTMLソース：

関西の人気お土産品

兵庫県の人気お土産

神戸のお土産品人気ランク

いま、神戸で人気のあるおみやげは……：：：

姫路のお土産品人気ランク

いま、姫路で人気のあるおみやげは……：：：

宝塚のお土産品人気ランク

いま、宝塚で人気のあるおみやげは……：：：

京都府の人気お土産

京都市のお土産品人気ランク

：：：上記ではh1（第1レベルの見出し）～h3（第3レベルの見出し）を使っています。階層構造に沿っていれば、同じレベルを同一ページ内に複数個使って構いません。本書はHTMLソースの書き方を解説するわけではないので詳しくは割愛しますが、例えば「

宝塚のお土産品人気ランク

」であれば、開始タグと終了タグに挟まれた「宝塚のお土産品人気ランク」という文字が、第３レベルの見出しになります。それに続く本文（上記の場合はp要素）が、第３レベルの見出しに対応する本文だと解釈されます。■h1→h2→h3……と階層構造になっているかも確認見出しの装飾を作った後でページを更新する際、装飾の都合で「h3を飛ばしてh2の後にh4が来ている」というような構造を作ってしまうことがあります。場合によっては、h3→h2→h4のように一部のレベルが逆転している構造を作ってしまうこともあるかもしれません。そのように書いてしまうと、せっかく見出し要素を使っているのに、階層構造が正しく把握できなくなってしまいます。見出しが階層構造順になっていないという理由だけでSEO面で不利になるわけではありませんが、構造が把握しにくければそれだけ内容も把握しにくくなってしまいます。見出しの各レベルは、階層構造順になるように気をつけて書きましょう。

33.検索ワードを含めて分かりやすさが増すように書く見出しに書かれている文字は、「続く本文に対するタイトル」だと解釈できます。そのため、「そこにどんな話題が書かれているのか？」を判断するには、本文だけでなく見出しに書かれている内容も重要です。31で述べたように、見出しの文字がそのまま検索結果でタイトルとして使われることもありますから、見出しに検索ワードを含めておくことはSEO面でも重要です。

■後の階層になるほど検索ワードが抜けがちなので注意階層構造に沿って見出しを書くと、下記の「HTMLソースA」のように検索ワードを一切含まない状態で短い見出しを書いてしまいがちです。しかし、これではせっかく重視される見出し部分に検索ワードが含まれていません。「HTMLソースB」のように、検索ワードをしっかり含む見出しを書きましょう。HTMLソースA：

ノートPCの選び方

大きさ

重さ

記憶容量

：：：HTMLソースB：

ノートPCの選び方

ノートPCを大きさで選ぶ方法

ノートPCを重さで選ぶ方法

ノートPCを記憶容量で選ぶ方法

：：：先の「HTMLソースA」では第１レベルにしか検索ワードが含まれていません。「HTMLソースB」ではすべてのレベルに検索ワードが含まれています。そのため、ページ内に含まれる検索ワードの個数を自然に増やせますし、見出しが検索結果のタイトルとして使われた際にも検索ワードをしっかり見せられます。なお、上記のように見出しだけを一覧で見るとクドく感じられるかも知れませんが、実際には見出しの後には本文が続いているはずですから、本文の文章量が十分多ければ、特にクドくは感じられないでしょう。■続く本文の内容を分かりやすく表現した見出しを付ける見出しには、単語だけを書くよりも、その後に続く本文の内容を簡潔に表した短文のような文章を書いておくのがおすすめです（もちろん検索ワードはしっかり含めるようにします）。その方が、斜め読みがしやすくなるため人間の読者に対しても分かりやすくなると期待できますし、検索エンジンに対しても続く本文の内容を伝えやすくなるでしょう。例えば、「ノートPC」・「選択」の２つを検索ワードにしたいページで、「重量」という単語を次点の検索ワード（関連単語）としたい場合の見出しを考えます。[×]ノートPCと重量[△]ノートPCを重量で選択する方法[○]ノートPCを重量で選択する3つの簡単な方法[○]ノートPCを重量で選択するならバッテリーの重さも見る[×]は、短すぎて内容が想像しにくい上、検索ワードが不足しています。[△]は、検索ワードはしっかり含んでいますが最小限の内容しか想像できません。[○]は、検索ワードをしっかり含んでおり、続く内容も想像しやすくなっているでしょう。

34.全部の見出しをh1(第１レベル)にしても意味はない検索エンジンは、h2よりもh1の方が「上位の見出し」だと解釈しますし、h3よりもh2の方が「上位の見出し」だと解釈します。先に挙げた６種類の中では、第１レベルの見出しを表すh1要素が最も重要な見出しだと解釈されます。だからといって、全ての見出しをh1要素にすることに意味はありません。これは、●全ての文章を太字にすれば、全文を強調したことになるか？●全ての文章を赤色で表示すれば、全文を強調したことになるか？……という話と同じです。太字や赤色文字というのは、一部分だけに使うからこそ「強調」の役割を果たしますが、全文を太字にしたり赤色にしたりしてしまえば、もはや「どれも強調していない」のと同じことです。■そのページ内での相対的なレベルを表している見出しの各レベルは、あくまでも「そのページ内での相対的なレベル」を表しているに過ぎません。あるページに書いたh1要素が、他のページのh2要素よりも重視されるわけではありません。全部の見出しをh1要素にしてしまえば、見出しの階層構造（＝文章の構造）が分からなくなってしまうデメリットしかないでしょう。例えば、大見出しはh1、中見出しはh2、小見出しはh3……のように、階層構造に合致する要素を使いましょう。もし、ウェブサイト名の表記にh1を使ったなら、大見出しはh2、中見出しはh3、小見出しはh4……のようになります。図341.見出し要素は相対的なレベルを表しているだけ●もし上図(A)のように、ウェブサイト名は特に見出し扱いにせず掲載している（もしくはウェブサイト名をページ上に表記していない）なら、各ページのメインタイトル部分をh1でマークアップし、ページ内の見出しはh2以降でマークアップすれば良いでしょう。●もし上図(B)のように、ウェブサイト名自体をh1でマークアップしているなら、各ページのメインタイトル部分はh2でマークアップし、ページ内の見出しはh3以降でマークアップすれば良いでしょう。どちらの方法が有利か不利かというような差はありません。あくまでもそのページ内での（階層構造の）相対的な差があるだけです。後々の記述ミスを防ぐためにも、サイト内の全ページで同じ法則を使っておく方が望ましいでしょう。なお、筆者は(B)の構造をよく使っています。

35.見出しを画像にしたい場合は代替文字を使う見出しを文字ではなく画像で掲載したい場合もあるでしょう。特に、h1をサイト名にする場合は、ロゴ画像をh1でマークアップすることもよくあります。その際は、画像に対して指定するalt属性値(代替文字)に検索ワードをしっかり含めておきましょう。画像についての注意点は第7章で詳しく解説していますので、そちらをご参照下さい。備考.見出しの文字サイズは自由に調整できるHTMLのh1～h6要素を代表的なブラウザで表示すると、何も装飾を加えていない標準状態では、文字の大きさが下図のようになります。図361.装飾なし状態での見出しh1～h6の表示サイズ比較これらを見て、「h1は大きすぎるから使いたくない」や「h4以降は小さすぎるから使いたくない」と感じるかもしれません。しかし、これらの文字サイズはあくまでも「装飾を何も指定しない標準状態」でしかなく、実際に表示される文字サイズはCSS（スタイルシート）を使うことで自由に調整できます。方法は簡単で、下記のようにCSSソースを記述するだけです。本書の本題はHTMLやCSSの書き方ではありませんから詳細は割愛しますが、例えば以下のように書いておけば良いでしょう。CSSソース：見出しの文字サイズを調整する

h1{fontsize:1.4em;}h4,h5,h6{fontsize:1em;}上記の1行目は「h1要素の文字サイズを、本文の文字サイズの1.4倍にする」指定です。これなら、大きくなりすぎるのを防げます。上記の2行目は「h4・h5・h6要素の文字サイズを、本文の文字サイズと同じにする」指定です。これなら、小さくなりすぎるのを防げます。上記のCSSソースを適用した状態で、h1～h6要素をブラウザで表示すると、下図のように見えます。図362.文字サイズをCSSで調整した見出しh1～h6の表示サイズ例これなら極端に大きくなりすぎたり小さくなりすぎたりするのを回避しつつ、適切な見出しレベルを使えるでしょう。※非表示にしたり極端に小さくしたりしないようにCSSを使えば、特定の見出しを非表示にしたり、特定の見出しの文字サイズを極端に小さくしたりもできます。その方法を使って、検索ワードを詰め込んだだけの見出しを作るのは、明らかなSEOスパムです。そういった行為は避けましょう。最近の検索エンジンは特に賢いので、CSSを使って非表示にした箇所は「最初から存在しないもの」としてページ評価の対象外にされることもあります。

4.概要文(要約文)をしっかり書く。検索サイトの検索結果ページには、ヒットしたページのタイトルだけではなく概要文(要約文)も表示されます。この概要文も、検索者が「そのページを読みに行くかどうか」を判断する重要な材料になりますから、おろそかにはできません。

この概要文の表示空間で内容をうまく説明できれば、その情報を必要としている検索者からのアクセスを逃さずに得られやすくなるでしょう。もちろん、重要な検索ワードはしっかり含めておく必要があります。▼この章のPoint：ここだけ概要文(Description)は、全角換算で少なくとも120文字は超える分量を書いておき、できるだけ前半に重要な検索ワードが含まれるようにします。検索ワードに関連する単語もできるだけ同時に使っておくことで、関連語を含んだ検索時にも的確な概要文が表示されるよう工夫しましょう。概要文(要約文)の書き方については、下記の５項目＋備考を参考にして下さい。

▼この章の目次：41.概要文は、そのページを読むかどうかの決め手になる42.概要文の書き方：HTMLソース内の記述位置43.概要文の文字数は確実に120文字を超えておく44.検索ワードと関連語を前半にしっかり含んでおく45.更新日付があれば検索結果に表示されることも備考.Keywordsは書いても意味がない

41.概要文は、そのページを読むかどうかの決め手になる検索結果の1ページ内には、たいてい10件程度が表示されます。そのうち、スクロール不要で見える1画面目にもだいたい3～4件程度は表示されるでしょう。（下図では5件目のタイトルまでが見えています。）その場合、ユーザは必ずしも先頭（＝１位にヒットしているページ）にアクセスするとは限りません。1位にヒットしていても、概要文が少なすぎたり意味不明だったりすれば、そこは飛ばして２位の方を優先することもあるでしょう。

もちろん、概要文の存在を気にせずに１位から順に読んでいく場合もあります。よりたくさんの情報を求めている場合は特にそうかもしれません。しかし、その場合でも後ろの方（7位～10位あたり）にヒットしているページなら、すべてを読みに行こうとはせず、概要文の分かりやすさによって読みに

行くかどうかを選ぶのではないでしょうか。ましてや、検索結果の2ページ目以降にヒットしているページならなおさらです。したがって、概要文として何が表示されるのかは、アクセス向上に重要だと言えます。■検索結果に表示される概要文は、自分で書いておける検索結果ページに表示される概要文は、検索エンジン側が当該ページ内の本文から自動で抜粋することもありますが、自力で指定しておくこともできます。自動での抜粋に任せてしまうと、読みやすい概要文にはなりません。ウェブページを作ったら、必ず概要文も自力で書いておきましょう。自力で書いた概要文が必ず採用されるわけではありませんが、概要文に含まれている単語で検索された場合の検索結果になら、たいていは自分で書いた概要文がそのまま表示されます。

42.概要文の書き方：HTMLソース内の記述位置ウェブページの概要文は、meta要素（metaタグ）を使って下記の書式で記述します。HTMLのhead要素内ならどこに書いても構いません。ページタイトルを記述するtitle要素の直後にでも書いておけば良いでしょう。HTMLソース<metaname=”description”content=”概要文をここに記述”>※記述場所の「HTMLのhead要素内」とは下図のような位置です。

検索エンジンは、HTMLソースの中からこの記述を読み取って、そのページの概要文だと認識します。このmetadescriptionの記述は、自力でHTMLソースを編集できるなら上図のように書けば問題ありません。もし、HTMLソースを自力で編集はせずにウェブ作成ソフトを活用しているのであれば、そのソフトにSEO関連の設定画面があればそこから設定できることもあります。例えば、ホームページビルダー（クラシック）なら、「SEO設定」という画面で下図のように概要文を書けます。図422.ホームページビルダーで概要文が設定できる画面※どんなソフトウェアを使っていても、最終的にウェブページはHTMLファイルに出力されるはずですから、お使いのソフトウェアでどうしても概要文を追加できないようなら、「メモ帳」などのテキストエディタで読み込んで、先の1行をコピー＆ペーストし、概要文部分を書き換えて保存する方法もあります。

※備考：OGPを使う概要文の書き方もあるこの章で解説しているmetadescriptionの他に、「OGP（OpenGraphProtocol）」という書き方で概要文を書く方法もあります。このOGPを使って概要文を書くと、FacebookなどでURLが投稿された際にその概要文が投稿内に埋め込まれます。OGPについては話が長くなるため、本書では参考情報だけを紹介しています。本書の末尾にある「参考情報B：OGPやTwitterCardsを加えてSNS連携」ページをご参照下さい。

43.概要文の文字数は確実に120文字を超えておく概要文として記述した文章は、その全てが表示されるとは限りません。しかし、せっかく掲載スペースがあるのに、概要文の文章量が足りないために空白になってしまうのは機会損失です。概要文には多めの文章を書いて、検索者にアピールできる空間は有効に活用しておきましょう。図431.上図2件目のように概要文が短すぎると、せっかく3行程度ある紹介スペースを無駄にしてしまう■最低でも120文字は超えるように書いておくPC環境の検索結果では、全角換算で110文字～130文字程度が概要文として表示されます。120文字は確実に超えるように書いておくと、掲載領域を無駄にせずに済んで望ましいでしょう。■概要文は全部が表示されなくても構わないように書く概要文が何文字まで表示されるのかは端末等によって異なります。スマートフォンのような小型端末での検索結果では、50文字程度しか表示されない場合もあります。そこで、合計130文字程度の概要文を書いておく場合でも、「45文字の文章」＋「85文字の文章」のような感じで、少なくとも一度は途中で文を切ると良いでしょう。すると、どんな環境でも少なくとも最初の一文は最後まで表示される（＝中途半端に途切れずに済む）ため、紹介文が中途半端に終わっ

てしまう感じを防ぎやすくなります。もちろん、もっと短く区切って平均35文字程度の文を4つ書いておくような方法でも構いません。そもそも、1文は短い方が読みやすいでしょうから、短く区切れるならそうしておく方が望ましいでしょう。■とりあえず多めに書いておけば良い検索結果ページに表示される概要文の文字数には上限があるとはいえ、必ずしも先頭から指定文字数までだけが表示されるわけではありません。概要文が多めに書かれている場合に「どの範囲の文章が表示されるのか」は、検索者が入力した検索語などによって変わり、2文目以降が表示されたり、途中の文章が省略されたり様々に調整されます。例えば下図は、筆者が書いた記事が検索結果に出てきた様子です。概要文のうち、途中が省略されていることが分かります（黄色矢印部分）。これは、常にこのように表示されるわけではなく、検索に使われた単語によっては（その単語が含まれている部分が優先的に採用されて）このような抜粋の表示になります。図432.長めの概要文の途中が省略されて表示された例概要文を多めに書いておけば、表示される概要文も検索者の状況に合わせて調整されます。130文字程度で要約しきれない場合には、無理にまとめてしまうよりも多めに書いておく方が良いでしょう。

44.検索ワードと関連語を前半にしっかり含んでおく概要文は、単に充分な文字数を書けば良いわけではありません。検索ワードそのものや、検索ワードと併せて検索されそうな関連単語をしっかりと含ませて書きましょう。概要文の中に検索語が含まれていれば、たいていは下図のようにハイライト表示されます。同時に検索されそうな関連語も含められるだけ含んでおけば、それらも併せてハイライトされるため、「自分の探している情報がここに書かれていそうだ」と思われやすくなります。図441.検索ワードがハイライト表示されている例※上図は「ウインドウ幅」＋「画像サイズ」＋「変化」で検索した結果です。概要文中に含まれるそれらの単語が太字で表示されています。■見切れることを前提に、重要語は前半に機会損失を防ぐために長めの概要文を書いておく方針なら、後の方の文章は検索結果ページに表示されない可能性が高くなります。そのため、前半だけしか読まれなくても十分なページ紹介になるよう文章を書いておく方が望ましいでしょう。したがって、検索ワードはできるだけ概要文の前方に登場するように書くようにします。検索ワードや関連用語が複数ある場合には、より重要な単語ほど前方に書く方針がおすすめです。もちろん、無理に前方に詰め込んで文章として読みにくく（理解しにくく）なっては本末転倒ですから、あくまでも

「できるだけ」に留めておきましょう。

45.更新日付があれば検索結果に表示されることもそのウェブページの更新日付が検索エンジンに認識されれば、概要文の先頭に更新日が表示されることがあります。下図のように更新日が表示されていて、それが最近の日付ならば、アクセス向上に役立ちます。図451.検索結果にそのページの更新日時が表示されている例何らかの情報を探している読者は、どうせ読むなら古い情報よりは新しい情報の方が望ましいと考えます。そのため、最終更新日からまだ日数が経っていなければいないほど、閲覧されやすくなります。頻繁に更新できるなら、ウェブページの本文内にブログのような形で更新日付を書いておきましょう。しかし、公開後に一切更新しないつもりのページだと日付の存在は逆効果になる可能性もあります。競合ページの多い話題の場合は、（たとえ検索結果の上位に表示されていても）何年も前の記事をあえて読もうとはあまり思われないでしょうから。■更新日時の書き方ウェブページの更新日時を示す決まった書き方はありません。WordPressやMovableTypeなどのCMSツール向け有名テンプレートを使っていれば、更新日時は認識されやすいでしょう。自力でHTMLを書く場合やウェブ作成ソフトを使う場合では、本文の先頭付近や、本文の末尾付近などに日付を書いておくと、それが更新日時だと認識されることがあります。

※備考：読者のためには、更新日付は先頭にSEOとは関係ありませんが、読者のためを考えるなら公開日時（更新日付）は記事の先頭付近に記しておく方が望ましいでしょう。本文を読み始めるよりも前に「その記事の書かれた日付」が分かれば、「その記事の内容をどれくらい割り引いて読めばよいか」の見当を事前に付けやすいからです。「この記事の情報はどれくらい新しい(古い)のだろうか？」という疑問を持ったまま読み進めるしかない場合、解説内容をどれくらい信用すべきなのかの判断ができず、参考にしにくくなってしまいます。しかし、例えば「この記事は1年前に書かれているから、もしかしたら状況は変わっているかも知れないけど、参考までに読んでおこう」と納得してから読み進められれば、参考にしやすくなるでしょう。

備考.Keywordsは書いても意味がないこの章でご紹介したDescriptionの記述も含めて、HTMLのmeta要素の書き方については、筆者がAllAboutで公開している下記の記事もぜひ参考にして下さい。また、descriptionの記述と併せて紹介されることの多いkeywordsについては、もはや書いても意味がありません。その理由も下記の記事内で紹介しています。◆『メタタグとは？SEOにも重要なmetaタグの意味と書き方』https://allabout.co.jp/gm/gc/476351/（※筆者が執筆した記事です）メタタグ(meta要素)とは何か、HTMLのどこに書くのか、という基本から、最低限書いておきたい3つのmetaタグ、charset、description、viewportの書き方を解説。keywordsを書く意味がない点や、OGP＋TwitterCardsの書き方、メタタグの簡単な確認方法も紹介。SEOやアクセス向上に役立つメタタグをしっかり押さえておきましょう。

5.アンカーテキスト(リンク)にも検索ワードを使うリンクの存在とリンク文字の内容はSEO面でも重要です。リンクは、「リンク先ページへの人気投票」のような意味合いになり、リンクされている件数（＝被リンク数）が多ければ多いほど、人気のある有用なページである可能性があると検索エンジンによって判断されます。検索結果の順位が被リンク数の多さだけで決定されるわけではありませんが、1つの重要な指標であることには違いありません。図5A.リンクは支持投票のような意味合いを持つこのリンクは、何も外部サイトからのリンクにしか意味がないわけではありません。内部リンク（＝自サイト内のページから、自サイト内の別ページへ移動するためのリンク）も重要です。

また、リンクする際に使われている文字は、「リンク先ページの内容を簡潔に表していることが多い」と考えられるため、検索エンジンは「そのリンク先ページにどんな話題が書かれているのか？」を判断する材料としても使います。この点もSEO面で重要です。※リンクする際に使われている文字のことは、「アンカーテキスト」や「リンクラベル」・「リンク文字」などと呼ばれます。本書のこれ以降では、主に「アンカーテキスト」と表記しています。▼この章のPoint：ここだけリンクをうまく作ることはSEOの大切な基本です。重要なページには、自サイト内部からも多くのリンクが集まるように作りましょう。各ページのフッタにテキストリンクを設けるのも良いですし、本文中から参照できるページがあれば本文中からリンクしておきます。リンクは必ずHTMLのa要素で作り、アンカーテキスト（リンク文字）にはできるだけ対象ページの検索ワードを含めるようにしましょう。アンカーテキストの作り方については、下記の５項目＋備考を参考にして下さい。▼この章の目次：51.リンクの種類とリンクが重要な例52.サイト内リンクを掲載できる場所の例53.「こちら」ではなく検索ワードでリンクを作る54.リンクはa要素で作る（他の方法を使わない）55.隠れたリンクを作らないように備考.リンクリストは箇条書きで作る

51.リンクの種類とリンクが重要な例あるページへのリンクに使われているアンカーテキストは、検索結果ページでタイトルの代わりに表示されることもあります。Googleのヘルプにも『アンカーテキストなどを基にタイトルを自動的に改善して表示することがあります』のような意味の説明が書かれています。https://support.google.com/webmasters/answer/35624?hl=jaもしそのページのタイトルに問題があったり、検索語とタイトルとの間に関連が低いために「別のタイトルを見せた方が役に立つ」と判断された場合には、アンカーテキスト（リンク文字）として使われている内容が検索結果ページにタイトルとして表示されることがあります。■リンクに使われている文字はリンク先の内容を示しているハズ、という考え方アンカーテキストは、リンク先ページの内容を簡潔に表していると期待できます。例えば「あんパンのレシピ」という文字でリンクされているページには、「あんパンのレシピが書かれているのだろう」と推測できます（当たり前ですが）。したがって検索エンジンは、対象ページの内容を判断する材料の１つとしてアンカーテキストを使います。日本語環境で「出口」という単語を検索すると、下図のように「Yahoo!Japan」がヒットするのもそのためです(※)。

※主に個人サイトの製作者が「出口」というアンカーテキストを使ってYahoo!Japanへリンクすることが多かったために、このような現象になっています。タイトルにも概要文にも「出口」という単語は一切含まれていない点に注目して下さい。それだけアンカーテキストも重視されているということです。■サイト外からのリンク（外部リンク）だけでなく、自サイト内のリンク（内部リンク）も重要リンクはサイト外からしかできないわけではありません。自サイトの内部でもリンクは作れます。サイト内リンクでも、リンクそのものは人気投票のような意味合いがあり、重要なページであればあるほど多数のページからリンクされているだろう、と考えられます。アンカーテキストがリンク先の内容を簡潔に表しているだろう、と期待できる点も同じです。サイト外から得られるリンクも多い方が望ましいことは確かですが、自力ではコントロールできません。「時間をかけない最低限のSEO」を考えるなら、サイト外のことは（とりあえず）考えの外に置いておいて、まずはサイト内リンクをしっかり作るようにしましょう。その方法を、この章のこれ以降

で解説致します。

52.サイト内リンクを掲載できる場所の例サイト内リンクを掲載できる場所は多数あります。代表的な場所を以下に挙げておきますので、これらを参考にして、もし抜けている箇所があればサイト内リンクを加える候補にしてみて下さい。●グローバルメニュー：ページ上部などに掲載する、全ページ共通のメインメニューのことです。代表的なコーナーや、重要なページに直接リンクしておきましょう。●サブメニュー：現在のコーナー内に限定した詳細ページへのリンクを集めたメニューなどのことです。ページ数の多いサイトでは、このような「範囲を限定した目次」のようなメニューもあると分かりやすくて便利でしょう。●関連記事リスト：本文を読み終えた後の位置で「こんなページもいかがですか？」と紹介するリンクリストのことです。サイト内の回遊を促しやすく、読み終えた後にすぐ離脱（＝他サイトへ移動）されてしまうのを防ぎやすくなるメリットもあります。●本文内リンク：本文の文章中に含まれている単語でも、自サイト内の別ページで最適化している検索ワードが出てくるなら、それをリンク化しておきましょう。●フッタリンク集：ページの最下部には、主要コーナーへのリンクリストを掲載しておくと便利です。SEO面で被リンク数を増やす役割も果たしますし、人間の閲覧者にとっても「簡易サイトマップ」のように活用できるため役に立ちます。●サイトマップ(後述)：サイト内の全ページへのリンクを一覧で掲載したページのことです。サイトマップに関しては第9章で詳しく紹介しています。普段からウェブページを作る際には、コンテンツ（本文）の最後尾に５本程度の「関連記事リスト」を掲載するようにすると良いでしょう。サイト内リンクを増やせるだけでなく、そのページを読んだ人が続けて関連ページを読んでくれやすくなることで、サイト内の回遊を促し、閲覧ページ数の向上（直帰率の低下）に役立つはずです。■特に重要なページはHOMEからもリンクしておく自サイト内でも特に重要なページは、HOMEページ（＝自サイトの表紙に相当する最初のページ。トップページとも呼ばれます）からも検索ワードを使ってリンクしておきましょう。たいていのウェブサイトではHOMEページの評価値が最も高いので、HOMEページからリンクしておくとリンク先ページの評価値も上げやすくなります。また、そもそも奥まった位置のページには到達しにくいですから、HOMEページからリンクされていれば1回で移動できるため（人間の閲覧者にとっても）便利です。

53.「こちら」ではなく検索ワードでリンクを作るありがちなアンカーテキストに「こちら」があります。「詳しくはこちらで解説しています」の「こちら」という３文字だけがリンクになっている場合などです。このようなアンカーテキストは、リンク先の内容を全く表せていません。SEO面でももったいない上に、ユーザに対しても分かりにくいリンクになってしまいます。アンカーテキストには必ず（リンク先ページが想定している）検索ワードを含めておくよう常に注意しましょう。例えば、リンク先でパラグライダーの体験方法を紹介しているなら、当然アンカーテキストは「パラグライダーの体験方法」のようにします。[×]パラグライダーの体験方法についてはこちら[○]パラグライダーの体験方法検索ワードを含むためには多少リンクが長くなっても構わないと考えましょう。特に最近は指でタップするモバイル端末も多数あるため、リンク範囲（タップ可能な面積）は大きい方が操作しやすくなるメリットもあります。

54.リンクはa要素で作る（他の方法を使わない）HTMLのリンクは下記のようにa要素（aタグ)を使って作ります。一般的に「リンク」と言えばこの方法で書きますから、深く考える必要はありません。余計な方法は避け、a要素を使う標準的な方法で書きましょう。▼HTMLソース：<ahref=”リンク先URL”>アンカーテキスト</a>例えば、https://www.example.com/へ「サンプル」というアンカーテキストを使ってリンクするなら、以下のようなHTMLソースになります。▼HTMLソース：<ahref=”https://www.example.com/”>サンプル</a>上記の書き方以外にもリンクのように機能させる方法はありますが、a要素以外で作られたリンクは検索ロボットがリンクだと認識するかどうかが分からないため、避けておくのが無難です。■リンクをボタンのように見せたいならCSSで装飾するもし、「リンクをボタン型に見せたいから」という理由でa要素ではなくinput要素やbutton要素などで作ろうと考えているのなら、その必要はありません。ボタンのように見せたい場合は、先程のようにa要素で作ったテキストリンクを、CSSを使ってボタンに見えるよう装飾すれば済みます。例えば下図は、a要素で作ったテキストリンクをCSSでボタン型に装飾した表示例です。

上記のようなリンクの装飾方法は、筆者のブログ記事（下記）で紹介しています。ご興味があればご覧下さい。■テキストリンクを表面がグラデーションのボタン形状に装飾する方法https://www.nishishi.com/css/textlinktogradationbutton.html（※筆者のブログ記事です）テキストリンクをボタンに見えるように装飾したいことがよくあります。ボタンとして機能することが一目で分かるよう、表面がグラデーションのボタン形状にCSSで装飾する方法を解説。リンクを作るa要素に若干の工夫を加えて、backgroundimageプロパティにlineargradientを使えば、簡単にグラデーションボタンがCSSだけで作れます。

55.隠れたリンクを作らないようにリンクはすべて、リンクだとハッキリ分かる文字サイズ・配色で作ります。文字色と背景色を同色にしたり、文字サイズを極端に小さくするような方法を使って「人間には見えないが検索ロボットには見える」リンクを作るなどして小手先のSEOを試そうとは考えないようにしましょう。最近の検索ロボットは大変賢いので、そのような小手先のテクニックは無視されるかマイナスに評価されてしまうと考えておきましょう。そういったロボットを騙す行為は、百害あって一利なしです。※GoogleSearchConsoleのヘルプにも「隠しリンク」に対する警告が掲載されています。(https://support.google.com/webmasters/answer/66353)■マウスを載せて初めて表示される場所にあるリンクはマウスオーバーによって表示される場所（＝標準状態では非表示だが、あるオブジェクトの上にマウスポインタを載せた場合にだけ表示されるようなボックス）や、ユーザがどこかをクリックして初めて表示されるボックス内に存在するリンクの場合は、初期状態では「見えないリンク」になっています。そのような場所としては、例えば、●「タブ」の切り替えによって表示内容が変わるUI●アコーディオンUI●ヘルプボタン「？」をクリックすると説明ボックスが現れるUI……などがあります。どれもよく使われるUI（ユーザ・インターフェイス）でしょう。下図はタブを使ったUIの表示例です。３つのタブが見えていますが、最初に見えている中身は１つだけであり、それ以外の２つのタブに属するリンクは非表示状態になっています。これらは「最初は見えない状態になっているリンク」だと言えるでしょう。

これらのような場所にある「初期状態では見えないリンク」が直ちにスパムだと判定されることはないでしょうが、「リンクが存在する」と解釈される保証もありません。もしかすると、「非表示なので評価しない」という判断がなされる可能性もあります。すると、そのリンクにSEO効果は得られません。マウスオーバーでしか表示されない領域に重要なリンクを掲載するなら、マウスオーバーしなくても表示されているような場所（フッタなど）にも同様のリンクを設けておく方が、SEO面でもユーザビリティ面(※)でも望ましいでしょう。※マウスオーバーでしか表示されない領域の存在には、人間のユーザでも気付かない場合があるからです。

備考.リンクリストは箇条書きで作るフッタなどでリンクリストを作る際は、HTMLの箇条書き要素(ul要素とli要素）を併用しましょう。リンクとリンクの距離が近すぎると、モバイルフレンドリーではないと判断されてしまいます（モバイル端末では主に指で操作するため）。箇条書きの形を使って、CSSで項目間の距離を離すよう装飾しておくと、見やすくて使いやすいリンクリストになります。■リンクリストを作るHTML＋CSSソースの例まず、HTMLソースを以下のように書きます。HTMLソース：

• リンク
• リンク
• リンク

箇条書きを作るためのul要素と、箇条書き項目を作るためのli要素を使っているため、「これらはリストですよ」という意味を表してリンクを列挙できます。この方法なら「リンクリストだ」と明確に伝えられるでしょう。標準では各項目の先頭に「●」のような記号も加わるので、人間にとっても見やすくなります。さらに以下のようなCSSソースを追加することで、リスト項目の行間を広めにできます。CSSソースli{marginbottom:0.5em;}上記のようなCSSを適用すると、リスト項目の下部に0.5文字分の余白が設けられます。これによって、リンクとリンクとの間が接近しすぎなくなるため、指で操作する場合でも誤タップの可能性を減らせるでしょう。なお、ウェブ製作ソフトにも下図のように箇条書き（リスト）を作る機能はあるはずです。作成ソフトを使っている場合には、それらの機能を使って下さい。

6.ページ内リンク(ページ内目次)も活用する。１ページの中身がたくさんあって縦方向に長い場合は、ページ内の目次もあると便利です。単に閲覧者にとって便利だというだけではありません。ページ内リンクはそのまま検索結果ページの概要文部分に表示されることがあり、特定の情報を探している人々にピンポイントに情報を提供できるため、アクセス数の向上に役立ちます。▼この章のPoint：ここだけ文章量が多くて長いページなら、冒頭にページ内リンク（目次）を設けておきましょう。アンカーテキストには検索ワード自身と、検索ワードに関連するキーワードなどを使っておきます。検索結果ページの概要文の末尾にページ内リンクの抜粋が掲載されれば、より多くのアクセスが期待できるでしょう。ページ内リンクの作り方については、下記の４項目＋備考を参考にして下さい。▼この章の目次：61.ページ内リンクとは？最もローカルなナビ62.検索結果の概要部分にページ内リンクが出ることも63.見出しをすべてページ内リンクにしても良い64.見出し単位でもリンクされやすくする方法備考.話題が異なるならページそのものを分割する

61.ページ内リンクとは？最もローカルなナビページ内リンクとは、その名の通り「同一のウェブページ内にあるアンカーポイントへのリンク」のことです。下図のように、ページ内の目次としてよく使われます。

文章量の多いページでは特に、そのページ専用の目次リンクがあると役に立ちます。単純に（移動するための）リンクとしての役割だけでなく、書かれている内容の概要を把握するためにも役立つでしょう。ページの内容が長い場合や、複数の小見出しで構成されているなら特に、ページ内リンクも用意してみて下さい。

62.検索結果の概要部分にページ内リンクが出ることも検索サイトでの検索結果ページには、概要文章の表示部分にページ内リンクが併記されることもあります。そのリンクを使うと、検索結果からその項目へピンポイントに移動できますから、目的の情報へ素早く移動できます。より具体的な情報を探している人々や、急いでいる人々に情報を届けやすくなるでしょう。図621.検索結果の概要部分に表示されるページ内リンクの例Wikipediaの記事が検索結果にヒットした場合は、よく上図のようにページ内リンクが検索結果に表示されています。上図は「コーヒー豆」を検索した結果です。検索者の欲しい情報が掲載されている見出し部分へ直接移動できるため、便利で望ましい表示形態だと言えるでしょう。このような直接リンクは、検索サイト側が勝手に生成できるわけではありません。そのページ内に「ページ内リンク」が用意されている必要があります。したがって、このような便利な直接リンクを検索結果ページに表示させたければ、「ページ内リンク」を作っておきましょう。■ページ内リンクの文字数はページ内リンクに使われているアンカーテキスト（リンク文字）が長すぎる場合には、下図の黄色矢印部分のように省略されて掲載されることもあります。図622.検索結果の概要に出るページ内リンクが短く省略された例ページ内リンクの文字数は12文字程度に留めておくか、少なくとも重要な検索ワードが前半12文字以内に現れるようなアンカーテキストにしておく方が望ましいでしょう。■直帰を防ぐ目的にも検索サイトから訪れるユーザは、たいてい何らかの情報を探しています。検索結果からアクセスしたページの分量が多い場合（ページが長い場合）は、求めている情報がどこにあるのかをさらに探さなければならないこともあります。その場合、見つけられなければさっさと他の候補ページへ移動してし

まうでしょう。そのような直帰を避けるためにも、冒頭にページ内リンクがあると便利です。

63.見出しをすべてページ内リンクにしても良い誰がどんな検索ワードで情報を探しているかは分かりませんから、ニッチなニーズにも対応できるよう、ページの本文内に存在する見出しはすべてページ内リンクにするくらいの感じで考えていても良いでしょう。■ページ内リンクを作るHTMLの書き方見出しなどをページ内リンクにする方法は、HTMLに以下の２点を記述するだけです。●1.移動先になる見出しに、id属性を使ってアンカーポイントを作る●2.そのid名へのリンクを作る具体的には以下のように書きます。1.移動先になる見出しに、id属性を使ってアンカーポイントを設ける移動先になる見出しに、それぞれ一意のid属性値を付加すればアンカーポイントになります。例えば、見出しをh3要素で書いているなら、下記のようにid属性を付加します。▼HTMLソース：<h3id=”apple”>リンゴ</h3>上記のように見出しを書いておけば、その見出しが「apple」という名称のアンカーポイントになります。2.そのid名へのリンクを作るアンカーポイント「apple」へリンクするには、a要素のhref属性値に「#」記号を加えて下記のように記述します。▼HTMLソース：<ahref=”#apple”>リンゴ</a>上記のように、移動先（リンク先）を「#apple」にすれば、そのページ内にあるアンカーポイント「apple」へのリンクになります。この「#」記号は必ず半角文字で記述しなければなりませんから注意して下さい。※備考：id名の重複に注意同一ページ内に同じ値のid属性を複数個書いてしまわないように注意して下さい。（ページ内リンクを用意しているかどうかに関係なく、id名が重複することはHTMLの文法上では誤りです。）※アンカーポイントはどこに作っても良いアンカーポイントは見出しにしか設定できないわけではありません。どの要素に対してもid属性を付加して一意のid名を割り振れば、そこをアンカーポイントにできます。分かりやすいページ内リンクになるようにアンカーポイントを作ってみて下さい。

64.見出し単位でもリンクされやすくする方法ある特定のページにリンクしようと思う際、ページそのものではなく、「そのページ内の特定の場所」に直接リンクしたいと思うことがあります。もし、見出し単位でページ内リンクできるように書かれていれば、特定の見出し部分へ直接リンクを作れます。そのような書き方がされていなければ、特定の見出し部分へ直接リンクさせる方法はありません。特定の位置に直接リンクできる仕組みがあると、リンクしようと思いやすくなる効果もあります。長いページの特定の部分について言及したいとき、ページ内リンクがあればピンポイントにリンクを張れるので、便利にリンクできます。しかし、そういう仕組みがなければ「どこに対してリンクしたかったのかがどうせ伝わらないだろうから、リンクするのはやめておこうかな」と思われるかもしれません。外部リンクを獲得できれば、それだけSEO面でもプラスの効果（評価値の流入）を期待できますから、「できるだけリンクされやすく作っておく」ことにも意味があります。他サイトからのリンクは貴重ですから、できるだけリンクされやすく作っておいて、長期的なSEOに役立てましょう。■異なるページへのリンクでもアンカーポイントは使える例えば、ウェブページのURLがhttps://example.com/orange.htmlで、見出しにid=”green”が指定されている場合を考えます。この見出しは、例えば以下のようなHTMLで作られているとします。▼HTMLソース：<h3id=”green”>オレンジの緑</h3>もし、このページhttps://example.com/orange.html内のアンカーポイント「green」の位置へ直接リンクしたい場合は、以下のようにリンクHTMLを記述します。▼HTMLソース：<ahref=”https://example.com/orange.html#green”>オレンジの緑</a>このリンクをクリックすると、リンク先ページ内のid=”green”の位置に直接移動できます。このようにアンカーポイントは、ページ内リンクだけではなく、外部ページからリンクする際にも使えます。■見出しそのものを、自分自身へのリンクにしておく方法h1～h6要素を使って見出しを作る際、以下のようにHTMLを記述して、見出しそのものを「自分自身へのページ内リンク」にしておくテクニックがあります。▼HTMLソース：<h4id=”applejam”><ahref=”#applejam”>リンゴジャム</a></h4>このようにすると、見出し文字列そのものがリンクになります。しかし、リンク先は自分自身なので、クリックしても移動はしません。しかし、クリックすると「自分自身へのページ内リンク」になるURLが、ブラウザのアドレス欄に入ります。（下図の青丸部分のように）

これによって、「この見出しの位置へ直接リンクしたい」場合に、どんなURLへリンクすれば良いのかが把握できます。つまり、「直接リンクしたい」と思ったユーザ向けの機能になるわけです。目次を用意する代わりに、このような機能を用意しておく方法でもリンクされやすくなるでしょう（もちろんページ内目次と併用しても構いません）。備考.話題が異なるならページそのものを分割するこの章では、情報量の多いページに小見出しを設けて目次（ページ内リンク）を用意する方法をご紹介しました。情報量が多くても、それが同一種類の話題なら、複数ページに分割されるよりは１ページで読める方が便利です。しかし、異なる複数の話題を同一ページに含めるのは望ましくありません。「そのページが何について書かれているページなのか」という機械的な判断が難しくなって検索にヒットしにくくなり、SEO面で不利になると考えられるからです。文章量の多いページで、そこに異なる種類の話題が複数含まれているようなら、話題ごとにページを分割できないか検討してみて下さい。

7.画像の掲載方法を最適化するウェブページには画像を掲載することも多いでしょう。画像はSEO面でプラスにもマイナスにも影響します。注意点をよく把握して、画像を掲載する際には気をつけてみて下さい。画像の掲載に関する注意はたくさんありますが、あまりに多くを挙げても頭に入れておくのが大変ですから、ここでは最低限のSEOとして４項目だけを紹介しておきます。▼この章のPoint：ここだけ画像を掲載する際には、(1)代替文字として検索ワードを含めてもおかしくないようなら必ず含めておく、(2)文字を画像化するのはできるだけ避ける、(3)キャプションを加えられる画像ならキャプションを書いておく、(4)できるだけ軽い画像ファイルにする、という4点を常に意識しておきましょう。画像を掲載しようとする際には、以下の４項目を参考にして下さい。▼この章の目次：71.代替文字には適切な検索ワードを含めておく72.重要な文字を画像化しない（テキストで掲載する）73.画像のキャプションをテキストで掲載する74.無駄に重たい画像にしない（できるだけ軽くする）

71.代替文字には適切な検索ワードを含めておくHTMLで画像を掲載する際には「代替文字」の指定ができます。代替文字とは、何らかの事情で画像が表示されなかった場合に、画像の代わりに表示される文字列のことです。下図は、ブラウザのChromeとEdgeで画像が表示されずに代替文字が見えている例です。図711.画像が表示される例とされずに代替文字が見える例この代替文字は、「画像が読み込まれなかった場合の代わりの文字」ですが、それはつまり「画像の内容や役割をテキストで示している」とも解釈できます。したがって画像の代替文字はSEO面でも有用です。検索ワードに関連する代替文字を指定できるような画像なら、しっかりと検索ワードを含めて記述しておきましょう。■例１：例えばリンゴの生産に関して掲載しているページで、生産工場の写真を掲載している場合は、代替文字を単なる「生産工場」としておくのではなく、「リンゴの生産工場」のように、あえて「リンゴの」と加えれば、検索ワード（リンゴ）を自然に含めておくことができます。■例２：

例えばスカイダイビングの体験コースに関して掲載しているページで、飛んでいる最中の写真を掲載しているなら、代替文字は単なる「空中写真」などにするのではなく、「兵庫県での体験タンデムスカイダイビング」などのように、検索ワードも含めておきましょう。このように代替文字に検索ワードを含めておけば、画像そのものが（検索サイトの）画像検索でヒットしやすくなる効果も期待できます。画像検索は画像だけを検索する機能ですが、検索者が望めば「その画像が掲載されているページ」へ移動することもできます。したがって、画像検索でもヒットすれば、それだけ自サイトへのアクセス者を獲得できる可能性が高まるでしょう。※面積の小さな画像に代替文字を詰め込まない面積の小さな画像に大量のテキストを詰め込むのはスパムとしてマイナス評価されてしまう可能性がありますから気をつけて下さい。代替文字には、あくまでもその画像を説明する短文だけを指定しましょう。

72.重要な文字を画像化しない（テキストで表示する）デザイン目的で文字を画像化して掲載するケースも多々あるでしょうが、特に検索ワードを含む重要な見出しを画像化してしまわないように注意しましょう。検索ワードを含む文字を画像化してしまうと、当たり前ですがウェブページ内から検索ワードの掲載数が減ります。検索ワードの数が減ることは、SEO面では望ましくありません。図721.文字を画像化して掲載したいケースもあるが……前述の通り、画像には代替文字を指定できますから、画像がSEOに役立たないわけではありません。しかし、「ページに直接記述されているテキスト」と「画像の代替文字」とを比較すれば（前者の方がより重視されるでしょうから）不利には違いありません。画像の代替文字は（画像が表示される状況では）閲覧者には見えないからです。そうは言っても、最終的には人間に見せるためにウェブページを作るわけですから、デザインも大切です。どうしても見栄え良く画像で作りたいと思うこともあるでしょう。しかし、画像化するまでもなくCSSで実現可能なデザインも多数あります。画像化を決断する前に、まずはCSSを使って対処する方法がないかを確認してみて下さい。例えば、以下のようなケースなら文字を画像化する必要なく、CSSで実現できます。（具体的な方法は、筆者が書いた関連記事を紹介していますので、本書と併せてご参照下さい。）●フォントの種類を指定したい→CSSで可能●フォントに凝りたい→CSS＋Webフォントの利用を検討●文字を縁取りしたり影を付けたりしたい→CSSで可能●文字を半透明にして画像に重ねたい→CSSで可能■フォントの種類を指定したい→CSSで可能CSSを使えば、ウェブページ上で文字を表示するために使うフォント名を指定できます。しかし、閲覧者の環境にそのフォントがインストールされていなければ指定フォントでは表示されません。だからこそ、「文字を画像化して掲載したい」と思うわけですよね。しかし、CSSでのフォント指定方法には、以下の2つの対処方法があります。(1)表示に使いたいフォント名の候補を優先順に並べる。(2)表示に使いたいフォントの種類を指定する。例えば、h1要素で指定した文字を明朝系の日本語フォントで表示させたい場合には、以下のようなCSSの書き方ができます。CSSソース：h1{fontfamily:”ヒラギノ明朝ProNW3″,”游明朝”,”HGS明朝E”,”ＭＳＰ明朝”,serif;

}fontfamilyプロパティを使って上記のように書けば、閲覧者の環境にフォント「ヒラギノ明朝ProNW3」があればそれが表示に使われ、なくても「游明朝」があればそれが表示に使われ、それもなくても「HGS明朝E」があればそれが表示に使われ、それもなくても「ＭＳＰ明朝」があればそれが表示に使われます。このように、望ましい順序で複数のフォント名を列挙しておくことで、できるだけ望みに近いフォントで表示させることはできます。また、最後に指定した「serif」は種類を表すキーワードで、明朝体のように（文字を構成する線に）小さなヒゲや払いなどがあるフォントを表します。他には以下のキーワードが使えます。●「sansserif」：ゴシック体のように（文字を構成する線の）終端が平たい角になっているフォントを表します。●「monospace」：等幅フォントを表します。●「cursive」：筆記体フォントを表します。●「fantasy」：その他の装飾的なフォントを表します。上記のキーワードを、フォント名候補の最後に書いておけば、望みのフォントが１つもない環境でも、望みの種類に合致するフォントが使われます。「指定のフォントでなくても、指定の種類で表示されれば良い」という場合には、画像化するよりもこの方法の方が望ましい(※)でしょう。※SEO面では「検索ロボットが読めるテキストで書いておける」点がメリットですし、ユーザビリティ面でも「画像によって重たくならない」・「ページ内検索ができる」といったメリットがあります。なお、CSSのfontfamilyプロパティを使ったフォント名の指定方法については、下記の筆者のブログ記事も併せてご参照下さい。■ウェブページ上での表示フォントの指定方法https://www.nishishi.com/css/textfontfamily.html（※筆者のブログ記事です）スタイルシートでは、文字列の表示に使うフォント名を指定できます。日本語用のフォントだとアルファベットの表示があまり美しくないことがあるため、英文を表示する箇所だけ欧文フォントを指定したいと思うこともよくあります。そんな場合には、スタイルシートで表示フォントを指定すると良いでしょう。■フォントに凝りたい→CSSのWebフォントを検討見出しの文字など目立つ文字の表示には「フォントに凝りたい」と思うこともあるでしょう。特定のフォントで表示したいなら、CSSの「Webフォント」機能が使えないか検討して下さい。Webフォントとは、ウェブサーバ上からフォントファイルをダウンロードすることで、常に望みのフォントで表示できるようにする機能です。この機能を使えば、文字をわざわざ画像化する必要はなくなります。

「GoogleFonts」(https://fonts.google.com/)欧文フォントなら莫大な数が用意され日本語フォントでも。モリサワが提供していTypeSquare「」(https://typesquare.com/ja/)。Webフォントサービスの使い方に関しては、情報サイトAllAboutで筆者が書いた記事がありますので、そちらも併せてご参照下さい。■『Webフォントの使い方:GoogleFontsで日本語フォントも』https://allabout.co.jp/gm/gc/394994/（※筆者が執筆した記事です）CSSのWebフォント機能の簡単な使い方を解説。無料で900種類以上のWebフォントが使える「GoogleFonts」の使い方と、日本語Webフォントが700種類以上あるモリサワ「TypeSquare」の使い方を紹介し、自サイトにアップロードしたフォントファイルをWebフォントとして使うCSSの書き方も解説。欧文(英数字)、日本語、アイコン(絵文字)など、望みのWebフォントを探してみて下さい。文字を画像化せずにテキストで掲載できれば、SEO面で不利にならないだけでなく、修正したくなった際にも作業が簡単だというメリットがあります。もちろん、（ブラウザの内蔵機能などによる）ページ内検索も使えます。できるだけテキストで掲載するよう考えてみて下さい。

■文字を縁取りしたり影を付けたりしたい→CSSで可能文字を縁取りして白抜きのように見せたり、文字に影を付けて大きく見せたい場合などもよくあります。そのような装飾は、CSSのtextshadowプロパティを活用すれば充分実現できます。例えば、h1要素の文字について、右方向へ3px・下方向へ5pxの位置に、ぼかし具合6pxで淡い青色(#8080ff)の影を付けたい場合は、以下のようにCSSを書くだけで済みます。CSSソース：h1{textshadow:3px5px6px#8080ff;}先程のWebフォント適用例に、上記のCSSを加えて影を付加すると、下図のように見えます。図723.CSSを使って文字に影を加えた表示例影は複数指定できますので、この書き方を応用すれば縁取りなどの表示効果も出せます。詳しくは以下の記事で解説していますので、併せてご参照下さい。■『文字に影を付け、画像に重ねた文字を見やすくするCSS3』https://allabout.co.jp/gm/gc/384274/（※筆者が執筆した記事です）CSS3では文字の縁取り装飾も簡単に実現できます。CSS3のtextshadowプロパティを使えば、文字に影を付けられます。この影を文字の四方に加えることで「縁取り効果」を作成する方法を解説。写真など複雑な背景の上にそのまま文字を重ねると読みにくくなってしまいますが、文字に影を付けたり縁取りしたりすれば読みやすくできます。■文字を半透明にして画像に重ねたい→CSSで可能背景に画像を掲載している状況で、その画像の上に文字を重ねる際、下図のように文字を半透明にして見せたい場合もあります。

このような場合でも、文字を画像化する必要はありません。不透明度を指定するopacityプロパティを使うか、文字色を指定する際にアルファチャンネル（＝透明度）を加えられるRGBAカラーモデルを使えばCSSだけで実現できます。例えばh1要素全体を半透明にしたい場合は、以下のようにopacityプロパティを書きます。CSSソース：h1{opacity:0.5;}文字だけを半透明（50%透過する青色)にしたい場合には、以下のような「RGBAカラーモデル」という書き方で色を指定します。ここでは、R(赤色)がゼロ、G(緑色)もゼロ、B(青色)が255、A(不透明度)が50%という意味になり、「50%透過する青色」になります。CSSソース：h1{color:rgba(0,0,255,0.5);}上記2種類の違いや、より詳細な書き方については、筆者のブログ記事（下記）で解説していますので併せてご参照下さい。■テキストの背景色を半透明にしつつ、文字色は不透明にするCSShttps://www.nishishi.com/css/textopacityrgba.html（※筆者のブログ記事です）スタイルシートを使って対象の要素を半透明にしたい場合はopacityプロパティを使えば良いだけです。テキストでも画像でも半透明になります。「背景色は半透明にして背後を少しだけ透過させたいが、文字色は不透明にしてハッキリ見えるようにしたい」という場合はRGBAカラーモデルでの色指定を使うと望みの配色が作れます。

73.キャプションをテキストで掲載する画像に代替文字を書いておくことも大切ですが、画像の直下などにキャプションを掲載できるなら、それを活用するのが望ましいでしょう。画像の代替文字よりも「ページに直接書かれている文字」の方がSEO面では重視されるのですから、画像のキャプションとして画像の直下や直上などに（代替文字と同じように検索ワードを含んで）書いておけば、よりSEOの役に立ちます。※キャプションを掲載する場合でも、画像のalt属性(＝代替文字の指定)を省略しないように注意して下さい。（同じ内容を記述しておけば良いでしょう。）画像にキャプションを加える場合、書き方は例えば下記の２通りがあります。記述の意味を正確に表せる点では後者の方が良いですが、面倒なら前者でも充分です。■img要素にキャプションを続けるだけの書き方：HTMLで画像を掲載するためのimg要素には、特にキャプションを指定できる属性はありません。代替文字をalt属性値に記述できるだけです。したがって、画像に対するキャプションは、単にimg要素に続けて文字を書いておくだけで良いでしょう。例えば、下記のような書き方ができます。▼HTMLソース：<pclass=”imagebox”><imgsrc=”画像ファイル”alt=”代替文字”><br/><span>キャプション</span></p>上記では、キャプションを単独で装飾するためにspan要素を使っています。▼CSSソース：.imagebox{display:inlineblock;/*インラインブロック化*/textalign:center;/*中央寄せ*/}.imageboxspan{fontsize:smaller;/*キャプションは小さめに表示*/}上記のようなCSSソースを使えば、画像の直下に小さくキャプションがセンタリング（中央寄せ）されて表示されるデザインになります。■画像とキャプションを明確に表せるfigure要素を使う書き方HTML5では、画像とキャプションのセットを表現できる以下のような書き方も仕様に加わりました。これを使っても良いでしょう。▼HTMLソース：<figure><imgsrc=”画像ファイル”alt=”代替文字”><figcaption>ここにキャプションを記述</figcaption></figure>上記の書き方だと、<figcaption>～</figcaption>の中身がキャプションであるという意味を明示できます。

※HTML5をサポートしていない古いブラウザ（IE8以下など）ではこのHTMLソースに対する装飾が正しく適用されない可能性があります。しかし、もはや今ではそのような古いブラウザの利用者はかなり減っていますから、あまり気にする必要はないでしょう。

74.無駄に重たい画像にしない（軽くする）読み込みに時間のかかる重たいページは、よほどの必要性がない限り読まないでしょう。検索エンジンも「読み込みの速さ」を評価指標の１つとして採用していますから、表示完了までの時間が長いページはそれだけSEO面でも不利になると考えられます。ページが重たくなる大きな要因の１つが、掲載している画像のファイルサイズです。画像の掲載面積を小さくしても、その画像のファイルサイズは小さくならない点に注意して下さい。画像のファイルサイズを下げるには、画像そのものを加工する必要があります。また、画像は見た目が同じでも画像ファイルのサイズは全然異なることがあります。画像形式によってもサイズは変わりますし、同じ画像形式でも色数や圧縮率の設定によってサイズは変わります。これまで、それらの設定を考えたことがないのであれば、適切に変換するだけでファイルサイズをかなり削減できるでしょう。解像度の高い綺麗な画像をどうしても見せたい場合でも、できるだけ軽くする方法はいろいろあります。以下に簡単にご紹介しておきますので、ぜひ試してみて下さい。■現状の画像ファイルサイズを確認するデジカメやスマートフォンなどで撮影した写真をそのまま掲載しているなら、明らかに大きすぎます。画像加工ソフトなどを使って、必要最小限の面積まで縮小してから掲載しましょう。ブラウザ上では狭い面積でしか表示されていなくても、実際の画像データ自体は大きいままなこともあります。ブラウザ上でどう見えるかではなく、実際の画像ファイルがどうなっているのかを確認しなければなりません。実際のファイルサイズは、画像加工ソフトに読み込んだり、Windowsで画像ファイルのプロパティを確認するなどすると分かります（下図）。

■縦横サイズを減らす例えば、横幅800pxしかない空間に横幅2000pxを超えるような画像を掲載したところで意味はありません（※高精細ディスプレイに対応させるために解像度を高くしておく場合には意味があります。その点は後述します）。原寸面積サイズが1600×1200pxの写真を、縦横半分の800×600pxに縮小するだけで、画像ファイルのデータサイズはかなり小さくなります。下図の風景写真だと、（1600×1200では）918KBだったファイルサイズが（800×600では）208KBまで小さくなり、約77％もの容量を削減できました。どれくらい小さくなるかはその画像次第ですが、無駄は少しでもなくしておく方が望ましいでしょう。図742.縦横の面積を半分にするだけで、画像のファイルサイズは大幅に小さくなる■閲覧環境に応じて画像サイズを切り替える画面の広いPCなどでは大きな画像を読み込ませるものの、画面の小さいモバイル端末などでは小さな画像を読み込ませることで、環境に応じて無駄な通信量をなくす方法もあります。また、高精細ディスプレイのように高い解像度の画像を綺麗に表示できる画面の場合にだけは高解像度の画像を読み込ませて、そうではない普通のディスプレイの場合には低解像度の画像を読み込ませる方法もあります。このような画像の切り替えでも、特にスクリプトを使う必要はありません。HTMLで画像を掲載する際に使うimg要素に対して、画像の掲載候補を列挙するsrcset属性を付加するだけで、閲覧環境に応じた画像が自動選択されるようになります。この書き方を解説すると話がとても長くなってしまいますので、本書では割愛します。詳しくは下記の記事で解説していますので、ご参照下さい。◆『解像度の高い画面にだけ高解像度の画像を表示する方法』https://allabout.co.jp/gm/gc/448083/（※筆者が執筆した記事です）Retinaディスプレイなどの高精細な画面で閲覧された場合にだけ高解像度の画像を表示させたり、複数の掲載候補からディスプレイの面積に適したサイズの画像を自動選択して表示させる方法を解説。HTML5で追加されたsrcset属性を使うと、解像度の異なる複数の画像を表示候補として指定でき、表示環境に応じてブラウザ自身が適切な画像を選んで表示に使ってくれます。

■画像形式を見直す画像のデータ形式を見直す方法も有効です。画像にはPNG形式・JPEG形式・GIF形式など様々な形式がありますが、これらは画像データの圧縮方式が異なります。ウェブ上では主にPNG形式かJPEG形式のどちらかが使われますが、これらには明確に「向いている画像」と「向いていない画像」があります。●写真のように色数が多くて連続した色の変化が多い画像は、JPEG形式の方が小さくて済みます。（PNG形式だとファイルサイズがかなり大きくなってしまったり、GIF形式だと色数が足りなくてグラデーションが綺麗に見えなくなってしまいます。）●イラストのように色数が少なくて色の差がハッキリしている画像は、PNG形式やGIF形式の方が小さくて済みます。（JPEG形式だとファイルサイズが大きくなる上に、色が滲んだりぼやけたりして見えてしまいます。）図743.画像の種類によってファイルサイズが小さくなる形式は異なる上図では、左側の写真ならJPEG形式が最も小さくて済みますが、右側のイラストならGIF形式が最も小さくて済んでいます。画像を作ったり加工したりする際には、ぜひ「向いている形式」を選択して保存してみて下さい。判断ができない場合は、複数の形式で保存してみて、最もファイルサイズの小さかったファイルを掲載に使うと良いでしょう。※JPEG形式は、保存時に圧縮率の調整が可能で、圧縮すればするほど（画質の低下と引き換えに）ファイルサイズを削減できます。妥協可能な画質を見極めて減らしてみて下さい。※イラストなどに向いているPNG形式やGIF形式は、色数を落とすことでもファイルサイズの削減ができます。256色から32色くらいまで落とせば、それだけファイルサイズも小さくできるでしょう。（元々使っている色数が極端に少ない画像の場合には、最初からファイルサイズが最小になっているため効果は出ません。）■画像の枚数を減らす（画像を統合してCSSで分割する）画像１つ１つのファイルサイズは小さくても、読み込む個数が多ければ、それだけ読み込み完了までに時間がかかります。複数の画像を１枚の大きな画像に統合した上で、CSSスプライトという方法を使って分割すると、読み込む画像ファイルの個数を削減できるために読み込み待ち時間を減らせます。（画像を統合することで圧縮効率も高まり、全体のデータサイズも減らせる可能性もあります。）

また、ほんの小さな面積の画像を１個だけ表示するような場合は、むしろHTMLソースやCSSソースに画像を埋め込んでしまう方が読み込み速度を速くできることもあります。画像ファイルのようなバイナリデータでも、Base64という方法でエンコードすれば、テキストデータであるHTMLやCSSソースの中に直接埋め込むことができます。これらの書き方もまた話がとても長くなってしまいますので、本書では割愛します。詳しくは下記の２記事で解説していますので、ご参照下さい。■『「CSSSprite」で画像の表示速度を高速化する』https://allabout.co.jp/gm/gc/379158/（※筆者が執筆した記事です）読み込む画像ファイルがたくさんあると、ホームページの読み込み速度が低下してしまいます。画像がたくさんあるなら、それらを「1つの大きな画像」に結合させてみましょう。すると、全体のファイルサイズも減り、通信回数も減るため、ページの読込速度が速くなります。複数の画像を1つにまとめ、スタイルシートを使って表示対象を選択するテクニック「CSSSprite」の使い方をご紹介！■『小さな画像をCSSソースに直接(Base64で)埋め込む方法』https://allabout.co.jp/gm/gc/457432/（※筆者が執筆した記事です）Base64というエンコード方法を使って、画像そのものをCSSソース中に埋め込む方法を解説。ウェブ上に小さな画像を多数掲載する際、画像ファイル1つ1つを読み込むよう記述していると、サーバへのリクエスト回数も多くなるため余計な時間がかかります。小さな画像ファイルをCSSソース中に埋め込むことで余計な通信を減らし、読み込み待ち時間を軽減する方法をご紹介。■最初はサムネイルを表示するに留めるどうしても画像サイズを小さくできない場合は、サムネイルを表示しておいて、ユーザがクリック（またはタップ）した場合にだけ拡大画像を表示するような仕組みを用意してみましょう。「Lightbox」と呼ばれるスクリプトが代表的ですが、様々な機能を追加した同種のスクリプトが多数公開されており、無料で使えます。

JavaScriptを併用する必要がありますが、既製のスクリプトを読み込むだけで簡単に実現できます。詳しくは下記の記事などをご参照下さい。◆『別窓を開かずにその場で拡大画像を表示する4つの方法』https://allabout.co.jp/gm/gc/23975/（※筆者が執筆した記事です）サムネイル画像(縮小画像)がクリックまたはタップされた際に、ページ移動せずその場で拡大画像を表示できるLightbox系スクリプトのおすすめ4本を紹介。jQueryを使う本家Lightbox2、スマホでの全画面表示に便利なIntenseImages、画像以外にも使えるColorbox、jQueryなしのJavaScriptで動作するLightboxPlusなど、選び方の参考として特長と使い方をご紹介。これまでにご紹介したように、重たい画像を軽くする方法は多々あります。ウェブ上に画像を掲載する際には、もっと軽く（ファイルサイズを小さく）できないか？という点を常に考えてみて下さい。

基本７施策▲ここまで▲これまでに７つの施策をご紹介しました。これらの７項目は、普段にウェブページを作成する上で頭に置き続けておきたいSEO項目です。SEOでは様々なテクニックが語られますが、とりあえずこれらの７項目さえ頭に入れておけば、まずは十分でしょう。☑1.検索ワードを決めて、ページ内で確実に使う。☑2.タイトルに検索ワードをしっかり含めておく。☑3.見出しと本文の関係を使って内容を伝えやすく書く。☑4.概要文(要約文)は検索ワードを含めて120文字以上書く。☑5.アンカーテキスト(リンク文字)にも検索ワードを使う。☑6.長いページなら、ページ内目次も活用する。☑7.画像の掲載方法に気を遣う。（代替文字やキャプションなど）▼ここから先▼『＋α』施策なお、ウェブページ単体ではなく、ウェブサイト全体を作る上で考えておきたい項目を３点ほど、「＋α」の施策として次のページからご紹介しておきます。これらも重要ですので、ぜひ併せて実践してみて下さい。

+α]8.パンくずリストを作るウェブサイト内のナビゲーションとして、人間の閲覧者にもSEOにも共に有効なのが「パンくずリスト」です。パンくずリストとは、ウェブサイトの最初のページ（HOMEページ）を起点として、現在位置までの階層構造（ルート）を示した下図のようなリンクナビゲーションです。ページの区切り文字には「>」記号がよく使われます。図8A.パンくずリストの例（上図では左端の「HOME」が起点で、右端の「世界工学会議」が現在位置）ウェブサイトの階層構造が一目で分かるので、人間の閲覧者にとっては上位階層に戻りたいと思う際にすぐ活用できるメリットがあります。また、SEO面でもアンカーリンクを増やせるメリットや、階層構造を検索結果に出せるメリットなどがあります。できるだけ全ページに用意しておくのが望ましいでしょう。▼この章のPoint：ここだけウェブサイト内の各ページには、ナビゲーションリンクとして「パンくずリスト」を掲載しましょう。その際のリンク文字には、検索ワードをできるだけ使って短く書きます（リンク先ページのタイトルをそのまま使うのが自然でしょう）。サイト内の回遊を促す効果も得られますし、SEO面ではサイト内リンクを増やせる意味でも役に立ちます。パンくずリストを作るには、以下の３項目＋備考を参考にして下さい。▼この章の目次：81.パンくずリストは検索結果にも出る82.パンくずリストの簡単な作り方83.パンくずリストの左端(先頭)項目の名称に注意備考.構造化パンくずリスト

81.パンくずリストは検索結果にも出る検索エンジンにサイト構造が把握されると、検索結果ページにも下図の黄色矢印部分のように「パンくずリストによる階層構造」が表示されることもあります。図821.パンくずリストが検索結果に表示された例（上側）と、表示されずにURLが出るだけの例（下側）上図の黄色矢印部分のように階層構造が表示されると、「この検索結果で閲覧できるページは、カテゴリ『ホームページ作成』に属していて、さらにその中の『サイト内検索』サブカテゴリに属している情報なのだ」という詳細が伝わります。うまく階層構造を作ってあれば、検索結果から「タイトル」と「概要文」以外に「カテゴリ名」も伝えられます。すると、内容の予想がしやすいため、クリック率（アクセス数）の向上に役立つでしょう。

82.パンくずリストの簡単な作り方パンくずリストを最も簡単に作る方法は、以下のように全項目を「>」記号で区切って列挙する書き方です。そこがナビゲーションであることが検索エンジン側に伝わりやすいように、nav要素（<nav>～</nav>）で囲んでおくと望ましいでしょう。▼HTMLソース：<nav><ahref=”/”>HOME</a>&gt;<ahref=”/company/”>会社情報</a>&gt;<ahref=”/company/map/”>所在地(地図)</a>&gt;ショールーム</nav>上記のソースだと、例えば下図のようにリンクが表示されます。図821.パンくずリストの表示例区切り文字には、パンくずリストでよく使われる「>」記号を使っています。HTMLソースに「>」記号をそのまま書くと、HTMLタグの終わりに使われる記号だと誤解されて正しく表示されない可能性があります。そのため、ウェブ上に「>」記号を表示させたい場合は、HTMLソースには「&gt;」という半角４文字を使った特殊な書き方（文字実体参照）を使う必要があります。※文字実体参照についてHTMLソースの中に半角で「&」＋「g」＋「t」＋「;」の4文字を書けば、ブラウザ上ではそれが「>」記号として表示されます。最後のセミコロン記号「;」を忘れないよう注意して下さい。

83.パンくずリストの左端(先頭)項目はサイト名にパンくずリストで使うリンク項目名は、多くの場合はそのページのタイトルをそのまま書けば問題ありません。ページタイトルが長すぎる場合には、できるだけキーワードを残した状態で短縮しましょう。なお、パンくずリストの左端(先頭）は、必ずウェブサイト内の最初のページ（＝HOMEページ）になります。このとき、先程までにご紹介した画像にあったように「HOME」や「TOP」などのアンカーテキストを使うこともありますが、それらよりはサイト名そのものを書いておく方が、HOMEページ自体のSEOに役立つでしょう。[△]HOME>製品案内>新製品[○]株式会社ABC製造>製品案内>新製品もっとも、サイト名の文字数が多い場合は、パンくずリストが横に長くなりすぎることを防ぐために、「HOME」などの短い単語を使いたいこともあります。HOMEページへはパンくずリスト以外でもリンクしているでしょうから、そこでアンカーテキストにサイト名が使われているなら問題はないと考えても良いでしょう。

備考.構造化パンくずリストパンくずリストには、より検索エンジン側に階層構造を伝えやすくした「構造化パンくずリスト」という書き方もあります。使えるならこの書き方を採用しておく方が望ましいですが、書き方がやや複雑なので、自力で作成するよりは自動化ツールを使った方が良いでしょう。

もしWordPressなどのCMSツールを使っているのなら、構造化パンくずリストを自動生成できるプラグインを使うと楽です。上図は、WordPressで簡単に構造化パンくずリストを挿入できるプラグイン「BreadcrumbNavXT」の画面です。このようなプラグインを導入すれば、特に手動では何もせずに構造化パンくずリストを挿入できます。■あくまでも「望ましい」という程度階層構造を検索エンジン等に正しく伝える用途には、構造化マークアップを使った構造化パンくずリストの掲載が望ましいですが、あくまでも「望ましい」という程度です。階層構造の認識に必須だというわけではありませんから、「できるなら使う」という認識で十分です。何にせよ、最も単純な「>」記号で連結するだけでも構いませんから、何らかのパンくずリストは用意しておきましょう。

[+α]9.サイトマップを作るウェブサイト内の全ページへリンクした一覧のことを「サイトマップ」と呼びます。サイトマップには、人間向けのサイトマップページと、検索ロボット向けのサイトマップXMLデータの２種類があります。できれば両方を用意しておきましょう。図9A.サイトマップXMLの例（左）と、サイトマップページの例（右）ウェブサイト内に存在するすべてのページを検索ロボットにクロールしてもらうためには、サイトマップを用意しておくのが最も望ましい方法です。サイトマップがあれば、いちいちリンクをたどらなくても容易に全ページの存在を把握できますから。SEO面では、サイトマップXMLなどの検索エンジン向けデータがあれば充分です(※)。しかし、人間の閲覧者にとってはサイトマップページのような「全ページを一覧して移動できるリンクリスト」がある方が迷いなく目的の情報を探せて便利です。したがって、できるだけ両方を用意しておくことをお

すすめ致します。もしサイトマップを用意していないのなら、今作っておきましょう。※人間向けのサイトマップページは「リンクリスト」でもありますから、検索ワードを使ったリンクを作れます。そのため、人間向けページだとはいえSEO面でも役に立ちます。▼この章のPoint：ここだけウェブサイトには「サイトマップ」を用意しておきましょう。人間向けの「サイトマップページ」（リンクリスト）と、検索エンジン向けに用意する「サイトマップXML」の両方を用意しておくのがベストです。どちらも自動生成ツールを活用すれば、作成の手間を抑えられます。サイトマップには最低限の内容を書いておけば充分であり、更新するのは新規ページを追加したタイミングだけで構いません。サイトマップの作り方については、下記の４項目を参考にして下さい。▼この章の目次：91.サイトマップページの作り方92.サイトマップXMLファイルの作り方93.サイトマップの自動生成方法94.サイトマップXMLの存在をrobots.txtで示しておく書き方

91.サイトマップページの作り方人間向けのサイトマップページは、一般的なウェブページと同じ方法で作れば問題ありません。箇条書きリストを使って、全ページへのリンクを一覧で掲載するのが最も単純です。分かりやすいように、URLにはsitemap.htmlなどのように「sitemap」という文字列を含めておくと良いでしょう。その際は、SEO効果を考えてアンカーテキストに「リンク先ページで最適化したい検索ワード」を含めておくようにします。とはいえ、リンク先ページのタイトルが既に最適化されているのであれば、リンク先ページのタイトルをそのままアンカーテキストにするのが自然で望ましいでしょう。図911.人間向けのサイトマップページは、ただのリンクリストで充分■リンク項目には短い説明文もあると良いサイトマップページでは、単純にページタイトルをリンクの形にして列挙するだけでも良いですが、上図のようにリンク先ページに関する短い紹介文を並べておくのがおすすめです。検索エンジンは、アンカーテキスト（リンク文字）だけではなくリンクの周辺にある文字列も含めてリンク先の内容判断に利用しているようですから、何か関連語を含んだ文章を併記しておくと、メインキーワード以外でのSEOにも役立つかもしれません(※)。

※たとえSEO面ではプラスにならなかったとしても、人間向けには確実に分かりやすくなるメリットがあります。なので、短い紹介文を併記する余裕があるなら、ぜひ書いておくことをおすすめ致します。

92.サイトマップXMLファイルの作り方「サイトマップXML」とは、XML形式で記述されたサイトマップデータのことです。サイトマップデータは、人間が読むことは想定しておらず、検索エンジンだけが読むことを前提にしたデータ形式です。図921.サイトマップXMLデータの例全ページを漏れなくクロールしてもらうために用意するデータに過ぎないので、サイト内の全URLが網羅されていればよく、記述順序を気にする必要はありませんし、特に整頓されている必要もありません。上図の例ではURLの他に更新日時・更新頻度・重要度の情報も含まれていますが、これらは特に必須ではなく、最低限URLさえあれば充分です。XMLファイルを自力で記述するのは大変なので、何らかのツールを使って自動生成するのが現実的でしょう（※自動生成方法は次の節で解説します）。※XML形式でなくても良い検索エンジン向けのサイトマップデータとしては「サイトマップXML」が代表的ではありますが、実は単なるURLを列挙しただけのテキストファイルでもサイトマップとして機能します。もし自動生成ツールを使わずに自力で作成するなら、単なるテキストファイルの方が簡単でおすすめです。■URLリストのテキストファイルの作り方

単純にURLを列挙しただけの下記のようなテキストファイルでも、サイトマップとして機能します。書き方はとても簡単で、１行に１つのURLを記述しておくだけです。ファイル名はsitemap.txtなどにしておけば良いでしょう。図922.URLを列挙しただけのテキストファイルでも検索エンジン向けサイトマップデータとして機能する更新日時や更新頻度などの情報を含めないなら、わざわざXML形式にする必要性はありませんから、上図のようにURLリストのテキストファイルで充分だとも言えます。※RSSフィードがあればサイトマップの代わりにもなるウェブサイトの更新情報を案内するRSSフィード（RSS1.0、RSS2.0、Atomなど）もそのままサイトマップとして機能します。たいていのRSSフィードには新しいページの情報しか含まれていないのでサイトマップとしては不十分ですが、既に多くのページが検索サイトに登録済みなのであれば、RSSフィードだけで事足りるかもしれません。

93.サイトマップXMLの自動生成方法さて、前述のサイトマップXMLデータを自力で記述するのは現実的ではありませんので、何らかの自動生成方法を使いましょう。■CMSツールを使っている場合のサイトマップの作り方もし、WordPressなどのCMSツールを使っているなら、サイトマップを自動生成するプラグインを活用することで、何も考えずにサイトマップXMLを用意できます。下図は筆者がよく使っているプラグイン「GoogleXMLSitemaps」です。生成条件を細かく設定もできますが、何も設定しなくても問題なくサイトマップXMLデータを生成してくれます。https://ja.wordpress.org/plugins/googlesitemapgenerator/

CMSツール上のプラグインなら、一度セットアップしさえすれば、後は放置するだけで最新データを元にしたサイトマップXMLファイルが常に生成されますから、とても楽です。

この手のプラグインは多数ありますので、どれでも使いやすいものを選ぶと良いでしょう。迷う場合は、(1)日本語化されている、(2)ユーザ数が多い、(3)WordPressの最近のバージョンに対応している、といった条件で絞り込むのがおすすめです。上図のようにWordPressのプラグインページを見れば、日本語の説明があればそれが表示されますし、ユーザ数（有効インストール数）や評価値も表示されますし、どのバージョンに対応しているのかも表示されます。それらを参考にして選んでみて下さい。■サイトマップXMLファイル生成サービスを使う方法CMSツールなどを使わずに自力でHTMLを書いてウェブサイトを作っている場合は、サイトマップXMLファイルの生成サービスを利用すると良いでしょう。ブラウザだけで使えるサービスが多々あります。どのサービスでも、たいていは自サイトのURLを入力するだけでリンクをたどって、サイトマップXMLファイルを自動生成してくれます。これらのサービスは、検索エンジンのクローラのようにページ内のリンクをたどって情報を収集するため、リンクされていないページを含めることはできない点に注意して下さい。■sitemap.xmlEditor例えば下図の「sitemap.xmlEditor」(http://www.sitemapxml.jp/)なら、自サイトのURLを入力して「サイトマップ作成」ボタンを押すだけで、ウェブサイト内のリンクをたどってサイトマップXMLファイルを自動作成してくれます。案内も日本語なので分かりやすいです。

作成できたサイトマップXMLファイルは一旦ダウンロードしてから、自サイト上にアップロードします。サイト内に新しいページを追加した場合や、ページを削除・移動した際には、改めてサイトマップXMLファイルを作り直す必要があります。■サイトマップXMLファイルのファイル名はサイトマップデータをXML形式で作るなら、sitemap.xmlのファイル名で作るのが標準的です。しかし、ファイル名は何でも構いません。もし複数のファイルに分割されるようなら、sitemapproducts.xmlなどのようにカテゴリ名などを付加しておくと管理しやすいでしょう。自サイトがhttps://example.jp/なら、https://example.jp/sitemap.xmlなどのURLでアクセスできるような位置にサイトマップXMLファイルを置いておくのが分かりやすくておすすめです。■更新日時情報は含めない方が楽新しいページを追加する度に、サイトマップの更新を忘れないようにしましょう。更新日時まで反映させるのは大変なので、更新日時情報は含めないことをおすすめ致します。サイトマップXMLファイルの目的は「漏れなくクロールさせること」なので、更新日時までサイトマップ側で把握させる必要はあまりありません。■サイトマップXMLファイルを生成できるソフトウェア拙作のWindows用フリーソフト「FumyRSS&AtomMaker」にも、サイトマップXMLファイルの出力機能があります。ローカルPC内にあるHTMLファイルの中身を読み取ってXMLデータを作成しますので、リンクされていないページがあってもそれを含むXMLを作成できます。※本来の用途は「RSSフィードの生成」ですが、下図の黄色矢印部分をクリックすることで、サイトマップXMLファイルも出力できます。

■備考：筆者が情報サイトAllAboutで公開した下記の記事では、サイトマップページ（HTML）の自動生成方法も含めて紹介しています。ぜひ併せてご参照下さい。◆『サイトマップの簡単な作り方！SEOに役立つ自動生成例』https://allabout.co.jp/gm/gc/23927/（※筆者が執筆した記事です）

サイトマップXMLとサイトマップページ(HTML)を自動生成ツールで簡単に作成する方法を解説。SEOに役立つ検索エンジン向けサイトマップXMLファイルも、人間向けに役立つサイトマップHTMLも、どちらも簡単に作れます。両方を用意すれば、便利でアクセスされやすいウェブサイトになるでしょう。

94.サイトマップXMLの存在をrobots.txtで示すサイトマップXMLファイルを作成して自サイト上にアップロードしても、そのファイルの存在を検索エンジンに知らせなければ意味がありません。サイトマップの存在は、robots.txt(※)に書いて場所を示しておけば検索ロボット（クローラー）に見つけてもらえます。下記の書式で書いておきましょう。※備考：robots.txtファイルとはrobots.txtとは、検索エンジンのクローラーに対して指示を出すためのテキストファイルです。検索データベースに登録されたくない場所を書いておく目的でよく使われますが、サイトマップの存在を示す役割にも使えます。ネット上にも書き方の解説は多数ありますので、検索してみて下さい。もし、サイトマップの所在だけを示すのなら、robots.txtというファイル名でテキストファイルを作成し、中身に以下の１行を書いておくだけです。▼robots.txtファイル：Sitemap:https://www.nishishi.com/sitemap.xml既にrobots.txtファイルが存在する場合は、末尾に上記の１行を追記します。robots.txtファイルが作成できたら、ウェブサイトの最上階層にアップロードしましょう。例えば自サイトのURLがhttps://example.com/なら、robots.txtファイルはhttps://example.com/robots.txtでアクセスできる位置にアップロードしておきます。この位置以外に置くと認識されないので気をつけて下さい。図941.サイトマップだけを書いたrobots.txtファイル■ウェブサイトの最上階層にrobots.txtを置けない場合何らかの事情でウェブサイトの最上階層にファイルを置けない場合は、robots.txt経由でサイトマップXMLファイルの存在を伝えることはできません。その場合は、次の章でご紹介するサービスを利用することで、検索サイトに対して直接サイトマップXMLの存在を登録できます。

+α]10.検索サイト提供サービスに登録しておく検索サイトのGoogleやBingには、自分のウェブサイトのサイトマップを登録することで能動的にクロールを要請できる仕組みがあります。Googleは「GoogleSearchConsole（サーチコンソール）」、Bingは「Bingwebマスターツール」という名称でサービスを提供しています。サイトマップの存在は前章で解説したようにrobots.txtに書いておくだけでも良いのですが、もっと明示的に検索サイトへ伝えておけば確実です。また、これらのサービスではサイトマップを登録できるだけでなく、正しくクロールできているかどうかなどのエラー発生状況を確認できるサービスも含まれており便利です。ぜひ登録しておきましょう。▼この章のPoint：ここだけ検索サイトへサイトマップを登録したり、クロール状況を確認したり、何らかのエラーがある場合に知らせてもらえるように、少なくともGoogle提供のサービスには登録しておきましょう。併せてBingのサービスにも登録しておけば、国内の検索エンジンシェアの99％をカバーできます。▼この章の目次：101.GoogleSearchConsoleでサイトマップを送信102.Bingwebマスターツールでサイトマップを送信備考.Yahoo!Japanへの対策は？

101.GoogleSearchConsoleでサイトマップを送信GoogleSearchConsole（サーチコンソール）は、Googleが提供しているウェブ管理者向けのサービスです。昔は「Googleウェブマスターツール」と呼ばれていたため、古い解説書ではその名称が使われていることもあります。ここには様々な機能が提供されていますが、サイトマップを登録する機能もありますので、利用しておきましょう。図1011.GoogleSearchConsolehttps://search.google.com/searchconsole/about?hl=jaGoogleSearchConsoleにログインしてウェブサイトを登録すると、下図の黄色矢印で示した「サイトマップ」項目から、サイトマップファイルの存在を登録できます。緑色矢印で示した箇所にサイトマップファイル（XMLでなくても可）の所在を入力し、「送信」ボタンを押すだけです。

サイトマップファイルが認識されると、それを元に何ページの登録が完了したのかなどの情報が（上図の水色矢印の先のように）確認できるようになります。なお、この情報が確認できるようになるまでには日数がかかりますので、後日に改めてアクセスして確認して下さい。サイトマップファイル内の記述に何らかの問題がある場合は、ここからエラー状況も確認できます。したがって、前章でご紹介したrobots.txtを設置できている場合であっても、GoogleSearchConsoleに登録しておく意味はあります。

102.BingWebマスターツールでサイトマップを送信Microsoftが提供している検索サイトBingにも、「BingWebマスターツール」というサイト管理者向けのサービスがあります。ここでもサイトマップを登録しておけますので、登録しておくと安心でしょう。Bingのシェアはそれほど高くありませんが、以前はiPhoneなどのiOSで標準の検索エンジンとして利用されていました（2017年からはGoogleに変更されました）。シェアは高くないとはいえ、Windowsを作っているMicrosoftが運営している検索サイトですし、登録して損はありません。

BingWebマスターツールにログインしてウェブサイトを登録すると、下図の黄色矢印で示した「サイトマップ」項目から、サイトマップファイルの存在を登録できます。緑色矢印で示した箇所にサイトマップファイル（XMLでなくても可）のURLを入力し、「送信」ボタンを押すだけです。

サイトマップファイルが認識されると、それを元に何ページの登録が完了したのかなどの情報が（上図の水色矢印の先のように）確認できるようになります。なお、この情報が確認できるようになるまでには日数がかかりますので、後日に改めてアクセスして確認して下さい。

備考.Yahoo!Japanへの対策は？検索サイトとして日本では一定のシェアを獲得しているYahoo!Japanは、昔々は独自の検索エンジンを使っていましたが、現在ではGoogleのエンジンを利用しています。したがって、Yahoo!Japan向けに何かをする必要はありません。Googleへの対策がそのままYahoo!Japanへの対策になります。

本稿執筆時点から過去１年間での日本国内の検索エンジンシェアは、上図の通りGoogleが約75％で、Yahoo!Japanが約22％、Bingが約2.4％でした。Yahoo!Japanは独立した検索サイトではあるものの検索エンジンにはGoogleを採用していますから、検索エンジンとしてのGoogleのシェアは96％（＝Google自体75％＋Yahoo!Japanの分22％）だと言えます。したがって、GoogleへのSEO対策だけで、日本国内の96％をカバーできることになります。さらにBingへのSEO対策も含めれば、日本国内の99％以上をカバーできます。これが、GoogleとBingの２大エンジンさえ考慮しておけば充分だという理由です。

SEO計10施策▲ここまで▲以上が、SEO基本７項目と「＋α」の３項目です。これらの10項目を意識しながらウェブサイトを作っていれば、初歩のSEO施策としては十分でしょう。ぜひ、常にこの10項目を頭に入れてウェブサイトを作ってみて下さい。なお、世の中にSEO解説書が山ほど出ていることからも分かるとおり、SEOのテクニックは様々です。上記の10項目を常に頭に入れて製作できるくらいの余裕ができたら、そのほかの専門的な解説書を読んでみると良いでしょう。▼ここから先▼アクセス向上参考情報なお、さらに余力がある場合のために、SEOやアクセス向上に役立つ参考情報を挙げておきます。それぞれを本格的に解説すれば長くなりますので（本書では詳細は割愛しますが）概要と参考記事をご紹介しておきます。もしまだ余力があるようなら、ぜひ試してみて下さい。

アクセス向上のための参考情報７個（余力があれば実践してみましょう）余力があるようなら、以下のA～Gに示す７項目も実践してみて下さい。本書で解説するとずいぶんな分量になってしまいますので、それぞれの詳細情報として主に、筆者が情報サイトAllAbout上で執筆した解説記事や、筆者の個人ブログ記事などを紹介しています。詳しくはそちらをご参照下さい。▼参考情報の目次：《参考Ａ》軽くする（せめて第一画面をすぐに表示させる）○A1.外部ファイルの読み込みを後回しにする方法○A2.CDN経由でライブラリを読み込む方法○A3.プリフェッチ機能を利用して先読みさせる方法○A4.読み込むファイル数を減らす方法○A5.もっと軽くする余地がないかPageSpeedInsightsで調べる《参考Ｂ》OGPやTwitterCardsを加えてSNS連携《参考Ｃ》SNSボタンを掲載する（公式スクリプトで）《参考Ｄ》モバイルフレンドリーかどうかを確認／レスポンシブWebデザインでPC・モバイル両対応に《参考Ｅ》ずっと変わらない自分のドメイン名を持つ《参考Ｆ》移転するなら望ましい形でリダイレクト（自動転送）を設定する《参考Ｇ》SSL証明書を使ってhttpsでアクセス可能にする

《参考Ａ》軽くする（せめて第一画面をすぐに表示させる）なかなか表示されないような「重たいページ」は、ユーザが帰ってしまう要因になります。ウェブページは軽ければ軽いほど望ましいと言えるでしょう。よほどニッチな話題でない限り、同種の情報を掲載しているページは他にも存在しますから、ユーザには表示に時間のかかる重たいページをわざわざ読む理由がありません。たとえ検索結果ページで上位に表示されていても、「重たいページだな」と感じられるだけで他の競合サイトへ移ってしまう可能性があります。どうしてもウェブページ全体のデータサイズを削減できない場合は、せめて「最初の１画面目だけはすぐに表示される」ような工夫をすると良いでしょう。ブラウザをスクロールせずに見える１画面目さえスムーズに表示されれば、全体の読み込みが遅くても閲覧者は「すぐに表示された」と感じられます。■ページの読み込み速度は評価指標の１つページの表示速度は、検索結果の順位を決定する指標の１つとして使われています(※)から、単なるアクセシビリティの問題ではなく、SEO面でも重要です。重たいというだけで検索結果から除外されるわけではありませんが、多少なりともマイナス評価は受けると考えておきましょう。※例えば、Googleの公式ブログ「Googleウェブマスター向け公式ブログ」内のエントリ『ページの読み込み速度をモバイル検索のランキング要素に使用します』(下記URL)でも言及されています。https://webmasterja.googleblog.com/2018/01/usingpagespeedinmobilesearch.html特にGoogleでは、ウェブページの最初の１画面目（スクロールせずに見える範囲）を1秒未満で表示するよう推奨しています。https://developers.google.com/speed/docs/insights/mobile画像を軽くする方法については、本書の第７章で紹介しました。画像以外にも、例えば以下のような方法でページを軽くできます。詳細は本書では解説しきれませんので、下記で5項目に関してそれぞれ参考記事を挙げておきます。それらを参考にして実践してみて下さい。※第２版での追記（専用解説書籍のご案内）ウェブページの表示速度を向上させる方法については、その点を単独で解説した電子書籍を書きました。

「重いサイトを軽くするWebページ表示速度の高速化10の基本」と題して、KindleUnlimited対応で販売しております。読み込みを高速化する方法と、遅延を防ぐ方法を合わせて10項目ほど詳しく解説しています。ぜひ本書と合わせて参考にして下さい。→https://www.amazon.co.jp/dp/B07T17QSQ5▼A1.読み込むファイル数やサイズを減らす方法ウェブページを軽くしたい際に最も基本となる考え方は、以下の２点でしょう。●読み込むファイル数を減らす。●読み込むデータサイズを減らす。どちらも当たり前の方法ではありますが、意外と「まだ減らせる」という事実に気付いていないことがあります。画像ファイル以外でも、個数を減らしたりサイズを減らしたりできます。■読み込むファイル数を減らす方法ウェブサーバからファイルをダウンロードする際には、ブラウザとサーバとの間で「○○のファイルを下さい」→「○○のファイルを送ります」という会話（やりとり）が発生します。そのため、ファイル数が多ければ多いほど余計な会話が増えて遅くなります。合計のデータサイズが同じでも、ウェブサーバに３ファイルをリクエストするよりは、１ファイルだけをリクエストする方が通信時間は短くて済みます。したがって、ファイル数を減らせばそれだけ読み込み待ち時間も減らせます。画像のファイル数を減らす方法は、第７章(74)でご紹介しました。それ以外にも以下のような方法があります。●ファイルの中身を結合して１ファイルにする例えば、CSSファイルを３つ読み込んでいるなら、それらの中身を１ファイルに統合できないか検討してみて下さい。CSSファイルを複数に分離しておく必要性はあまりありません。自力で記述したCSSだけでなく、外部のライブラリなどで使われているCSSも、中身のソースをコピー＆ペーストして１

ファイルに結合してしまうと良いでしょう。JavaScriptファイルも、実行される順番に気をつけて結合すれば複数ファイルを１つに統合できます。フリーで配布されているJavaScriptでも、中身を全部コピーして貼り付ければ１ファイルに結合して問題ないことも多々あります。A→B→Cの順序で読み込むように指示されているスクリプトなら、Aのソース→Bのソース→Cのソースの順番で１ファイルに結合してみて下さい。■読み込むデータサイズを減らす方法画像のデータサイズを削減する方法は、第７章でご紹介しました。しかし、画像でなくてもデータサイズを減らす方法はあります。●空白やコメントを削除してくれる最小化（圧縮）ツールを使うCSSやJavaScriptには、たいていソースを見やすくするための空白文字が含まれています。また、メンテナンス性を向上させるために各部分の意味などをコメントの形で含んでいることもよくあります。それらは実行時には不要ですから削除すればデータサイズを削減できます。空白文字やコメントなど「実行時に不要な記述」を全削除してくれるサービスは多々あります。「CSS圧縮(Compress)」や「CSS最小化(Minify)」などで検索すると多数見つかります。例えば以下のサービスは日本語で利用できるため分かりやすいでしょう。※CSSMinifier（Syncer）https://syncer.jp/cssminifier※CSSCompressorhttps://csscompressor.net/ja/●サーバ側で動的にgzipで圧縮するお使いのウェブサーバがApacheの場合は、「mod_deflate」というモジュールが利用可能なら、ウェブサーバ側でデータを圧縮してから配信できます。HTML、CSS、JavaScript、XMLなどテキストデータなら高い圧縮率でデータサイズを小さくできますから、高速にダウンロードさせられます。この方法を使うには、お使いのサーバ上に.htaccessという特殊なファイルを用意して指定のデータを圧縮できるよう記述するか、お使いのサーバのコントロールパネルなどから設定する必要があります。詳しくは「mod_deflate」や「.htaccess圧縮」などで検索してみて下さい。なお、.htaccessファイルについては筆者が書いた以下の記事もご参照下さい。（※注：この記事はあくまでも.htaccessファイルについて解説した記事であって、gzipで圧縮できるmod_deflateについては語っていません。）◆『.htaccessファイルの書き方と設定・設置方法』https://allabout.co.jp/gm/gc/23962/（※筆者が執筆した記事です）ウェブサイト上に「.htaccess」という特殊な設定ファイルを設置すると、アクセス制限・ユーザー認証・リダイレクト(自動転送)・エラーページのカスタマイズ・デフォルトファイル名の変更など、特殊な設定が実現できます。「.htaccess」の書き方(作り方)と設置方法をご紹介。テキストエディタで簡単に作成できます。設置した結果としてInternalServerErrorが出てしまう場合の対処方法なども解説。▼A2.CDN経由でライブラリを読み込む方法フリーで公開されている様々なJavaScriptファイルを読み込みたい場合、そのファイルをわざわざ自サイト上にアップロードしてから読み込んでいる場合もあるでしょう。しかし、CDNで配信されているスクリプトなら、自サイト上に置かなくてもCDNサーバから直接読み込めます。その方が、自サイトに置いておくよりも高速に読み込めますから、読み込み待ち時間を減らせます。（さらに、メンテナンスの手間を削減できるメリットもあります。）CDN（ContentsDeliveryNetwork）とは、よく使われるライブラリなどのファイルを共用サーバで配信する仕組みのことです。jQueryのような多数のウェブサイトで共通して読み込まれるライブラリファイルでよく利用されています。CDNサーバから読み込むようにすると、以下のメリットがあります。●他のサイトで同じライブラリが既に読み込まれていれば、ブラウザのキャッシュが利用されるため重複してダウンロードせずに済む。すると、ダウンロード自体を省略できるため、読み込み待ち時間をなくせる。●CDNサーバからのデータ転送速度は、たいてい自サイトで使っているレンタルサーバよりも速いので、読み込み待ち時間を少なくできる。

有名なライブラリを使う場合はもちろん、そうでない場合も「自分が読み込みたいファイルはCDNサーバで配信されていないか？」を確認すると良いでしょう。「利用したいスクリプト名＋CDN」のキーワードで検索してみて下さい。CDN経由で読み込めるファイルはすべてCDN経由で読み込ませれば、待ち時間を大きく減らせます。CDNからファイルを読み込む場合でも、特殊な書き方は不要です。単に読み込み先のURLとして、CDNサーバのURLを指定するだけです。例えばjQueryをCDN経由で読み込む方法については、以下の記事をご参照下さい。◆『JavaScriptを便利にするライブラリjQueryを使う準備』https://allabout.co.jp/gm/gc/455938/（※筆者が執筆した記事です）JavaScriptを便利に・容易にする「jQuery」(ジェイ・クエリー)は、様々なウェブサイトで活用されている有名ライブラリです。jQueryの設置(読み込み)方法、バージョンの選択方法、記述位置など、jQueryを活用する準備についてを簡単に解説。jQueryを使ったテクニック記事も紹介しています。▼A3.外部ファイルの読み込みを後回しにする方法全体のデータサイズが変わらなくても、「ページの描画を遅くしてしまう要因になるファイル」の読み込みを後回しにすることで、ページの体感速度を向上させることはできます。ウェブページではたいていHTMLの他にCSS（スタイルシート）が使われますし、JavaScriptが併用されることもあります。CSSもJavaScriptも、HTMLファイルとは別の「独立したファイル」として用意しているケースが多いでしょう。HTMLソース内から外部のCSSファイルやJavaScriptファイルを読み込ませる場合、（何も考慮しなければ）そのファイルの読み込みが完了するまでの間、ページの描画処理は止まってしまいます。この「ページの描画処理が止まってしまう」ケースを極力なくすことが、「１画面目を素早く見せる」ことに繋がります。■JavaScriptファイルの読み込みはできるだけ遅らせたいもし、HTMLのhead要素内でJavaScriptファイルを読み込んでいる場合は、そのJavaScriptファイルの読み込みが完了するまで、ブラウザの画面には何も描画されません。これが「真っ白な状態で延々と待たされる」という状況を作ります。JavaScriptは必ずしもHTMLの先頭（head要素内）で読み込まなければならないわけではありません。読み込み位置をHTMLソースの末尾付近に移動させれば、ページの描画を先に済ませてからJavaScriptを読み込ませられます。これはとても簡単な対処方法なのでおすすめです。また、非同期で読み込むように指定しておけば、ページの描画処理を止めることなく並行して読み込みができます。もし非同期で読み込ませても問題ないスクリプトなのであれば、ぜひ非同期で読み込む指定を加えておきましょう。JavaScriptファイルを非同期で読み込ませる方法は簡単で、下記のようにscript要素に対して「async」という属性を加えておくだけです。HTMLソース：<scriptsrc=”myscript.js”async></script>■CSSファイルの読み込みタイミングも後回しにできるCSSファイルは、文法的にはHTMLのhead要素内から読み込む必要があるので、単純に後回しにはできません。実際にはbody要素内で読み込んでもブラウザはたいていちゃんと適用してくれますが。あらゆる環境で読めるようにするには、文法には従っておく方が良いので、CSSはhead要素内から読ませる必要があるでしょう。しかし、JavaScriptを使うことで、CSSの読み込みを後回しにするテクニックはあります。詳しくは以下の記事などを参考にして下さい。◆重要ではないCSSファイルを後から遅れて読み込ませる方法https://www.nishishi.com/css/cssfiledelayload.html

（※筆者が個人ブログで書いた記事です）CSSファイルによっては後から遅れて読み込ませたい場合もあります。後から読み込まれるJavaScriptだけで使われるCSSとか、ユーザが何らかのアクションを起こさない限り参照されないCSSとか。そのような「先に読んでも仕方がない」(＝事前に読み込んでもウェブページの表示待ち時間を増やしてしまうだけ)なCSSファイルを、できるだけ後回しにして読み込ませる方法を紹介。◆『外部CSSと外部JavaScriptで表示速度の低下を防ぐには』https://allabout.co.jp/gm/gc/380498/（※筆者が執筆した記事です）HTML内でCSSファイルやJavaScriptファイルを読み込ませる場合、記述の仕方によっては読込速度や表示速度が遅くなることがあります。ウェブページができるだけ速く表示されるよう、外部ファイルを読み込む記述にも注意してみましょう。CSSファイルやJavaScriptファイルを読み込む際に、読込速度や表示速度の低下を防ぐ記述方法をご紹介致します。▼A4.プリフェッチ機能を利用して先読みさせる方法最近のブラウザには、次のページで使いそうなデータを先読みしておくプリフェッチ機能が搭載されています。HTMLソース内に指定の書き方を加えておけば、特定のファイルを先読みさせることができます。うまく使えば、（次に表示するページの）読み込み待ち時間の削減に使えるでしょう。◆『次ページや共通ファイルを先読みさせて体感速度を向上』https://allabout.co.jp/gm/gc/453844/（※筆者が執筆した記事です）ウェブページの読み込み待ち時間を短くする方法として、「次に読み込まれる可能性の高いファイルを先読みさせる」という手段があります。次のページの描画を事前に済ませておく「プリレンダリング」機能、共通のファイルを事前に読んでおく「プリフェッチ」機能の書き方・使い方をご紹介。HTMLのlink要素を1行記述するだけという簡単な方法で、先読みの指示ができます。▼A5.もっと軽くする余地がないかPageSpeedInsightsで調べるGoogleが提供しているウェブページの表示速度診断ツール「PageSpeedInsights」を使うと、そのページがどれくらい軽いか（重たいか）を数値で教えてくれます。さらに、より軽くするためにどんな方策があるのかも示してくれますので、参考になります。ぜひ調べてみて下さい。◆PageSpeedInsightshttps://developers.google.com/speed/pagespeed/insights/?hl=ja

《参考Ｂ》OGPやTwitterCardsを加えてSNS連携TwitterやFacebookなどのSNS上で自サイトのURLが書かれた際は、単なるリンクとして表示されるだけの場合もあれば、下図のようにページタイトルや概要文・サムネイル画像などが表示される場合もあります。図B1.ツイートの中にURLが書かれた際にTwitterCardsの情報が表示された例上図のように概要を出せると、よりクリックされやすくなり、アクセス者の増加が期待できるでしょう。このような概要を出すためには、HTMLソース内にOGPと呼ばれる記述やTwitterCardsと呼ばれる記述を加えておく必要があります。数行のソースを書き加えるだけで済みますので、ぜひ書いておきましょう。書き方について詳しくは、下記の記事で紹介しています。◆『SNSでの言及時に望みの情報や画像を出すOGPの記述方法』https://allabout.co.jp/gm/gc/420029/（※筆者が執筆した記事です）FacebookなどのSNSで

《参考Ｃ》SNSボタンを掲載する（公式スクリプトで）ページの末尾や本文の最後などに、SNSの「いいね」ボタンなどを配置しておくと、（閲覧者が押してくれれば）他の人々にページの存在が伝わり、アクセス者を増やす役に立つでしょう。直接SEOになるわけではありませんが、特に前述の《参考B》でOGPなどの記述を加えたのなら、ぜひボタンも掲載してみて下さい。図C1.各種SNS公式ボタンを掲載した例各種SNSボタンの掲載方法は、それぞれのヘルプページに書かれています。基本的にはソースをコピーして貼り付けるだけです。◆Twitter：『自分のウェブサイトにTwitterボタンを追加する方法』https://help.twitter.com/ja/usingtwitter/twitterbuttons

◆Facebook：『いいね！ボタン(ウェブ用)』https://developers.facebook.com/docs/plugins/likebutton?locale=ja_JP

《参考Ｄ》モバイルフレンドリーかどうかを確認／レスポンシブWebデザインでPC・モバイル両対応にGoogleが米国や日本を含む10カ国で、「PCからの検索数」よりも「モバイル端末からの検索数」の方が多くなったと公表したのは2015年のことでした。現在のネット上では既に、PCよりもスマートフォンなどのモバイル端末の方が利用数が多くなっています。GoogleやBingなどの検索サイトでは、モバイル端末を使って検索された際には「モバイル端末に対応しているウェブページ」が優先的に表示される仕様になっています。したがって、自分の作成したウェブサイトが、モバイル端末でも問題なく閲覧できるかどうかを確認しておくことは、SEO面でも重要です。Googleは、指定したページがモバイル端末に最適化できているかどうかを自動で判定してくれる「モバイルフレンドリーテスト」というサービスを公開しています（下記URL）。これを使って確認しておきましょう。https://search.google.com/test/mobilefriendly図D1.モバイルフレンドリーならこのように表示されるPCとモバイル端末とでは画面サイズも操作方法もずいぶん異なります。しかし、PC版ページとモバイル版ページの２つを用意する方法だと、作成にも運営にも手間が掛かってしまって非効率的です。「レスポンシブWebデザイン」という作成方法を使えば、HTMLは共通のままで、PC・モバイル両対応のウェブページが作れます。これからウェブサイトを作るなら、ぜひレスポンシブWebデザインを採用して作りましょう。例えば、下図左側のように広いウインドウで閲覧されても、下図右側のように狭い画面で閲覧されても、それぞれの環境に適した表示になるよう作ることができます。

このようなレスポンシブWebデザインの作り方や、そのほかモバイル端末への対応方法については、下記の記事などをご参照下さい。◆『レスポンシブWebデザインの簡単な作り方』https://allabout.co.jp/gm/gc/396787/（※筆者が執筆した記事です）レスポンシブWebデザインとは、アクセス者が使用している画面サイズやブラウザに応じて適用CSSを分けることで、閲覧環境に合ったデザイン・レイアウトでウェブページを表示する方法のことです。レスポンシブWebデザインのメリット・デメリットなどの基本から、初心者にもわかりやすい簡単な作り方まで解説。大型・小型画面PC、タブレット、スマホ等のあらゆる端末に対して単一ページだけで一括対応させられる、楽で便利な方法です。◆スマホ対応サイトの作り方と6つの注意点https://allabout.co.jp/gm/gc/381464/（※筆者が執筆した記事です）画面の小さなスマートフォンでは、スマートフォンで操作しやすいように作られたウェブサイトの方が閲覧しやすいでしょう。スマホ用サイトを作る前の準備として、製作前に知っておきたいポイントや、スマートフォン上のブラウザの仕様などについてを簡単にご紹介いたします。特殊な作り方は必要なく、ポイントさえ押さえておけばPC用サイトと同じ方法で簡単に作れます。ぜひ、スマートフォン対応サイトを作ってみて下さい。

《参考Ｅ》ずっと変わらない自分のドメイン名を持つSEOを考慮してウェブサイトを運営するなら、自分専用のドメイン名（＝独自ドメイン）を取得することを強くおすすめ致します。独自ドメインであるというだけでSEOで有利になるわけではありませんが、独自ドメインではない場合（＝ドメイン名の権利が自分にはない場合）には権利者の都合によってSEO面でのデメリットを受ける場合があります。■検索サイトからの評価値はURL単位検索サイトから得られる評価値は、URLに対して与えられます。（何も対処をせずに）URLを変更すると、それまでに培ったSEO効果は失われてしまいます。もちろん、本書でご紹介しているように「内部対策」を基本としたSEOなら、（何の対処もなく）別のURLに移転しても、時間が経てばSEO効果は回復するでしょう。しかし、一時的にはSEO効果がリセットされてしまうことは間違いありませんし、（過去の長い運営期間中に得られていた）外部リンクが切れたままになるなら、その分のSEO効果は減じたままになってしまいます。したがって、ウェブサイトを運営するURLは極力変更しないことが望ましいと言えます。もし変更せざるを得ない場合でも、適切なリダイレクト（自動転送）設定が必要です。■独自ドメインならURLの変更を余儀なくされることがない独自ドメインを利用する最大のメリットは、●自分で権利を維持し続ける限りずっと同じURLで運営できるという点です。ウェブサイトには必ずURLがあります。プロバイダ提供スペースや無料サービスを使っている場合には、https://www.example.com/~username/のような少々長いURLになるか、https://username.example.com/のようにサブドメインを使って多少短いURLになるかどちらかが多いでしょう。どちらの場合でも、example.comというドメインの権利はサービス提供側が所有していて、自分にはありません。その場合、サービス提供側の都合でドメインが変更になったり、サービス自体が終了してしまうことによってドメインが使えなくなったりすることがあります。▼運営会社の都合でURLが変更にるケースプロバイダ提供スペースなどを使っていると、たとえそれが大手企業であっても、会社側の都合でウェブサイトの引っ越しを余儀なくされることがあります。ここ数年では、下記の大規模な閉鎖が話題になりました。●ニフティ@homepage：1999年開設の老舗プロバイダによるサービス。数十万件のウェブサイトが運営されていたものの、2016年に閉鎖。●ジオシティーズ：1997年開設の老舗無料サービス。2019年3月に閉鎖。上記はどちらも莫大な利用者が居たサービスでした。前者のサービスでは、移行先として新しいサービスは用意されましたが、従来のURLをそのまま引き継いだり自動で移転したりはできなかったため、運営者はSEO面で大きな不利益を被ったと考えられます。■独自ドメイン＋レンタルサーバでも費用は安い独自ドメインを取得して維持する場合には、ドメイン名の維持費を毎年支払う必要があります。しかしながら、例えば「.com」の場合なら年間の維持費はおよそ1,500円程度です。（取得する会社によって異なります。）独自ドメインを使ってウェブサイトを運営する場合には、ウェブサイトの実体ファイル群を置くためのレンタルサーバも契約する必要があります。レンタルサーバにもピンからキリまで様々ですが、安いレンタルサーバなら年額1,200円程度で利用できます。（後述の参考記事で紹介しています。）したがって、独自ドメインとレンタルサーバの費用を合わせても、年額2,700円程度で済むわけで、月額に換算すると225円程度です。この負担で、（他社の都合によって）SEO効果に悪影響を及ぼす可能性を減らせるなら、費用対効果は充分高いのではないでしょうか。■独自ドメインがあれば、サーバを変更してもURLは不変その他の無料サービスと同様に、レンタルサーバ会社もそのサービスを永久に継続してくれるとは限りません。しかし、使用しているドメイン名が独自ドメインなら、ドメイン名の権利は自分が所有しているのですから、他のレンタルサーバへ引っ越してもURLは変わらずに済みます。ぜひ、（自分が権利を維持し続ける限りは）変わらないURLを利用するために、独自ドメインを取得してみて下さい。

独自ドメインとレンタルサーバに関しては、以下の２記事もご参照下さい。費用を安く抑えられておすすめな会社も紹介しています。◆独自ドメイン＋レンタルサーバでも大した費用は掛からないhttps://www.nishishi.com/blog/2016/10/domain_webserve.html（※筆者のブログ記事です）大手プロバイダの独自ドメイン取得サービスを使うくらいなら、自力で独自ドメインを取得してレンタルサーバを契約した方がよほど安くて済むよ、という話です。独自ドメイン維持＋格安レンタルサーバ契約での費用の相場なども。※筆者は、個人サイトの運営には「さくらインターネット」のレンタルサーバを利用しており、ドメインの取得には主に「ムームードメイン」を利用しています。（他社も多少は利用していますが。主には上記の２社です。）上記の記事にも書いています。下記の参考記事には、無料サーバを利用する場合の例も記しています。無料サーバはあまりおすすめはしませんが、独自ドメインが利用可能で、そのドメインの権利が（運営会社ではなく）自分自身にある契約形態が使えるなら、無料サーバでも問題ないと言えるかもしれません。◆ホームページの公開方法：ドメインとサーバの用意手順https://allabout.co.jp/gm/gc/23922/（※筆者が執筆した記事です）作ったホームページを公開するには、掲載スペースを用意しましょう。ウェブサーバとドメインを準備して自サイトを公開する手順を解説します。サーバには、無料サーバもあれば有料サーバもあります。有料でも格安で利用できるサーバが多々あります。ドメインには、サブドメインを無料で利用する方法もあれば、自分で所有できる独自ドメインを取得する方法もあります。※独自ドメインではないが、既に長く運営しているので評価値を捨てたくない場合独自ドメインではないドメインで既に長く運営している場合には、そのURLがそれなりに検索サイトから評価を受けている場合があります。それを捨てたくないと考えるのは当然です。その場合には、リダイレクト（自動転送）機能を使いましょう。正しい方法で自動転送させれば、検索サイトからの評価値はそのまま新サイトへ引き継げます。（詳しくは次の節でご紹介いたします。）

《参考Ｆ》移転するなら望ましい形でリダイレクト（自動転送）を設定する前節で解説したとおり、検索サイトからの評価値はURLに対して与えられるため、URLを変更するとSEO効果はリセットされてしまいます。したがって極力URLは変更しないことが望ましいのですが、どうしても変更せざるを得ないケースもあるでしょう。その場合には、リダイレクト（自動転送）機能を使って、旧URLから新URLへ自動で移動されるように設定しましょう。そうすれば、検索エンジンは「ページが引っ越した」という事実を認識して、評価値を新URLへ移してくれます。旧URLを充分長い期間ほど維持しておけば、SEO効果を減じることなく移転ができるでしょう。（外部リンクが修正される期間も考慮に入れるなら、短くとも１年間程度は旧URLを維持しておくことをおすすめ致します。もちろん可能なら、永久に維持しておくのが望ましいですが。）■301でリダイレクトする方法最も望ましいリダイレクト（自動転送）の方法は、HTTPステータスコード「301」を返す方法です。この方法なら、閲覧者を一瞬で新URLへ移動させられますし、検索エンジンに対しても「新サイトへ引っ越しましたよ」という事実を伝えられます。設定方法は簡単で、ウェブサーバがApacheの場合は、「.htaccess」という名称のファイルを作成し、その中に以下の書式で１行を書いておくだけです。（サーバ側で.htaccessの使用が許可されている必要があります。）Redirectpermanent[転送元][]もし、サイト内の全ページをhttps://example.jp/へ転送するなら、以下のように書きます。（この場合の「転送元」は「/」記号１つだけです。）Redirectpermanent/https://example.jp/詳しい書き方や設置方法などについては、以下の記事で解説していますのでご参照下さい。◆移転先へ自動移動(転送/リダイレクト)させる方法https://allabout.co.jp/gm/gc/23770/（※筆者が執筆した記事です）ホームページを別のURLへ移転した際に便利な、指定したページへ自動的に移動(リダイレクト)させる方法を解説。すぐに自動転送するほか、旧サイトの全ページに同じ「新しいホームページへの引っ越し案内」を一括表示する方法も説明。.htaccess・HTML・JavaScriptの3通りでリダイレクトする書き方を紹介しています。■移転の事実をGoogleSearchConsoleでも登録自動移動のための設定がすべて完了して、実際にリダイレクト処理がうまく動作していることを確認したら、GoogleSearchConsoleの「アドレス変更ツール」を使って引っ越し先URLを登録しておくこともできます(※１)。301でリダイレクトしている限りは移転した事実を認識してくれますから、この手続きは省略しても問題ありません(※２)。もし念には念を入れたい場合には登録しておくと良いでしょう。「アドレス変更ツール」については、下記のGoogle公式説明をご覧下さい。https://support.google.com/webmasters/answer/83106※１：本稿執筆時点では、「アドレス変更ツール」は旧サーチコンソールを使わないと表示されません。※２：そもそも、自動転送されない状態では「アドレス変更ツール」は使えません。

《参考Ｇ》SSL証明書を使ってhttpsでアクセス可能にするウェブページの場所を示すURLには、先頭に「http://」が付く場合と「https://」が付く場合があります。後者に付いている「s」はSecure（安全）の意味で、通信が暗号化されていることを示しています。Googleの方針によって、httpsでアクセスできないウェブページにブラウザでアクセスした際には、下図のように「保護されていない」等の警告を表示する仕様になりつつあります。図E1.ブラウザのアドレス欄に表示されるSecureサインの有無の例（保護されている上側には錠前のアイコンが見える。保護されていない下側には言葉で「保護されていない」と表示されている）■今すぐ不利になるわけではないがこの警告が表示されても、今すぐSEO面で不利になるわけではありません。しかし、Googleは将来的には全てのサイトにhttpsが普及することを目指しています(※)。その点を考えると、https通信が圧倒的多数になった後には、もしかするとhttp通信が不利になるよう調整される可能性もないとは言えないでしょう。※『保護されたウェブの普及を目指して』(Google公式ブログ)https://webmasterja.googleblog.com/2018/02/asecurewebisheretostay.html※『HTTPSを使用する理由』(GoogleDevelopers)https://developers.google.com/web/fundamentals/security/encryptintransit/whyhttps■閲覧者を不安にさせないようにしたいそもそも、たとえ（現時点では）SEO面で不利にならないとしても、アドレス欄で「保護されていない」などと警告されれば、閲覧者を不安にさせてしまう可能性があります。特に、信用が重要な企業サイトでは「このサイトは安全ではないのでは？」と感じられるような警告が出ていると、その企業のサービスを利用しても大丈夫なのかどうか不安にもなります。閲覧者に余計な心配を掛けないためにも、極力httpsでアクセスできるようにしておくのが望ましいでしょう。■httpsで閲覧できるようにする方法には、無料版もあるhttpsでアクセスできるようにするためには、認証局から発行される「SSL証明書」というデータを取得する必要があります。以前は有料のサービスしかありませんでしたが、最近のレンタルサーバでは「Let’sEncrypt」という無料の証明書を簡単に取得してインストールできるサービスが提供されています(※)。それらを活用すれば、ほとんど手間を掛けることなくhttpsでアクセスできるようにできます。※例えば、レンタルサーバの「さくらインターネット」や「ロリポップ」では、サーバのコントロールパネルからマウス操作だけで「Let’sEncrypt」のSSL証明書を取得し、設定（インストール）まで完了します。SSL証明書の取得やhttpsで自サイトにアクセスできるようにする方法については、以下の記事でも解説していますのでご参照下さい。

◆『SSL証明書を取得してHTTPS化する設定方法』https://allabout.co.jp/gm/gc/464365/（※筆者が執筆した記事です）SSL証明書を取得して、自サイトを常時HTTPSでアクセスできるようにする方法を解説。Chrome68以降ではHTTPで通信するだけで警告が表示されます。HTTPとHTTPSの違いや、HTTPS化しなかった場合の表示例などの基礎から、常時SSL化のための.htaccessファイルの書き方まで簡単にご紹介。Let’sEncryptで無料のSSL証明書を取得すれば費用をかけずにHTTPS通信ができます。「保護されていません」などと表示されないようにしてみましょう。

おわりに■極力時間をかけない、最初のステップとしてのSEO本書では、極力時間を掛けることなく、「これだけを意識してウェブページを作れば、SEOできる」という最低限の基礎を解説しました。ウェブページを作る上で常に気にしておきたい項目はわずか７つだけです。ウェブサイト全体で気にしておきたい３項目を加えても、合計はわずか10項目です。最初のステップのSEOとしては、この10項目をきっちり実践できれば充分でしょう。（さらに参考情報として挙げた項目も実践したなら、なお充分です！）これらよりも詳しいテクニックが必要になったら、他のSEO本を読むなり、SEO業者に依頼するなりすることを考えて下さい。しかし、そこまで考えなくてもおそらく大丈夫です。今までSEOを何もしてこなかったのなら、これらの10項目を実践するだけでも効果は出るはずだからです。■中身（コンテンツ）の充実に時間を使おうSEOは検索サイトからアクセス者を呼び込む手段ですが、訪れてくれた人々を逃さないようにするのは別の話です。読むべき中身が薄ければ、さっさと帰ってしまうでしょう。また、読みにくい構成やデザインだと、せっかく役立つ情報を用意していても見つけられずに帰ってしまうかもしれません。アクセス数の向上にはSEOも大切ですがそこに時間を使いすぎず、中身（コンテンツ）の充実や、ユーザビリティ（分かりやすさや使いやすさ）を考慮したウェブ作りの方にこそ時間を掛けるようにしたいものです。■ウェブページの表示速度の高速化にも気を遣いたいなお、《参考A》でも述べましたが、ウェブページの表示速度を向上させる方法について解説した電子書籍も執筆致しました（下図）。ページの読み込みを高速化する施策と、遅延してしまう要因を排除する方法を詳しく解説しています。ぜひ本書と合わせて参考にして下さい。

「重いサイトを軽くするWebページ表示速度の高速化10の基本」（KindleUnlimited対応）→https://www.amazon.co.jp/dp/B07T17QSQ5▼筆者によるその他の情報筆者は情報サイトAllAboutでウェブ製作に関する様々なテクニックの解説記事を連載しており、2019年時点で400本以上の記事があります。ぜひ覗いてみて下さい。また、個人サイトでもCSSやJavaScriptを使った様々なTIPSを紹介しています。■AllAboutホームページ作成：https://allabout.co.jp/gm/gt/1053/■個人サイト「にししふぁくとりー」：https://www.nishishi.com/

AllAboutで私が担当した新着記事や既存記事の更新情報をお知らせするfacebookページも用意しています。こちらもぜひご活用下さい。https://www.facebook.com/hp.tips▼筆者のその他の著書（紙版）紙の書籍もあります。ご興味があればぜひご覧下さい。●HTML＆スタイルシートプロ顔負けのホームページ作成術()●初心者でもわかるアクセスアップの成功強化書()●ブログ・LPO対策までSEO・SEM使いこなしテクニック()●即戦プロ技MovableTypeデザインテンプレートコレクション()●小説「逃走少女と契約しました。猫だけど。」HJ文庫()

奥付■書籍名：個人でも簡単！時間をかけない最低限のSEO今すぐできる７つの基本■発行所：にししふぁくとりー■著者：西村文宏（にしし）■発行日：2019年6月24日第2版（2019年1月28日第1版）■連絡先：https://www.nishishi.com/（執筆依頼も歓迎です。お気軽にご連絡下さい。）著者略歴：1979年生まれ。大阪府出身。テクニカルライター、ウェブデザイナー、作家。書籍や記事は「西村文宏」の名で、ウェブ上での情報発信は「にしし」の名で活動。2000年より情報サイトAllAboutで「ホームページ作成」ガイドとして記事執筆を担当。400本を超える記事を公開中。2007年「ナノの星、しましまの王女、宮殿の秘密」で第２回ノベルジャパン大賞（現HJ文庫大賞）奨励賞を受賞。2011年「逃走少女と契約しました。猫だけど。」をHJ文庫より刊行し小説家デビュー。企業や団体のウェブサイト製作、ソフトウェア開発、ウェブ技術解説書籍の執筆などで活躍中。Copyright©2019FumihiroNishimura(Nishishi).