Webページ作成時の初心

Webページを制作していると、いろいろな不具合がでてきます。Google Search Consoleで検索数が急に減ったとかいう時や、AdSenseが表示されないといった時には、ページに問題が発生しているかもしれません。

都度ネットで調べて対応していたりしているのですが、いつの間にか対策を忘れてしまっていて、ソコに考えが至らないことがあったりするのでここに初心として残しておきます。

SEOツール

Google Search Console

おそらくなにかしらのWebサイトを運営されている人には説明するまでもないでしょうがGoogle Search ConsoleにもWebページの不具合を検出してくれる機能があります。「Webに関する主な指標」という項目に、モバイルとPCに分かれて問題があった場合に出力されます。

「カバレッジ」の項目では、「除外」の項目に着目してインデックス化されていないページの理由を確認します。特に「クロール済み-インデックス未登録」や「検出-インデックス未登録」を中心に確認します。

インデックスへの登録をリクエストをすれば登録されることもしばしばですが、それぞれのページを確認して共通項を探したりして、なぜ登録されないのかを考えると、クローラに備わっている暗黙のルールとか癖とかが見えてくるかもしれません。

基本的に内容が薄いかったり、濃くてもニーズがないと「クロール済み-インデックス未登録」になりやすいと筆者は考えています。また、「検出-インデックス未登録」の方は比較的新しい記事がその扱いになりやすく、内部リンクを確認できずに自動的にインデックスに追加されない状況だと考えています。

Being Web Master Tools

こちらも説明する必要がないと思われるBing Web Master Toolsです。Search Consol同様にサイトの登録が必要です。、検索総数がGoogleに比べて少ないため、当サイトのような規模の小さなサイトだとデータが少なくやや使いづらい部分がありまが、こちらはSEOレポートという形で、SEO的に問題のあるページや箇所を具体的に案内してくれます。

ページのチェック

ページのチェックにはHTMLとCSSの文法チェックや、マルウェアが存在しないかというセキュリティチェック、AMPに対応しているかや、JavaScriptを含んだ表示速度等、いろいろな面があります。

HTMLのチェック

タグの閉じ忘れ等でサイトが崩れていると、Googleでインデックス化されなかったり、内容があってもヒット数が少なかったりします。そのようなことがないように、Markup Validation Service等を使ってチェックします。

また、構文的にはあっていてもリンク切れ等もユーザービリティに影響し、検索結果が上位にならない理由になったりします。

CSSのチェック

CSS項目の名前にスペルの間違いがあったり、許容外の値が入っていたりして思った通りになっていないことがあります。そのおかしなコードの影響が全体に及ぶこともあります。

CSSの記述ミスはチェック機能があるエディタ等でも防止できますが、CSS Validation Serviceで、定期的にチェックをするのがいいと思います。

feedのチェック

BloggerやWordPressにはfeedを作成する機能がありますが、feedには多様性がありカスタマイズしたい場合もあるかと思います。その際はAtom feedならRFC4287に従って記述するのですが、そうして出来上がったfeedの整合性をチェックしたい場合は、Feed Validation Serviceを利用することができます。結果では、整合性だけでなく、推奨項目やfeedのタイプ(RSS/Atom)やそのバージョンも表示してくれます。

モバイルユーザビリティ(モバイルフレンドリー)

画面のサイズがPCと大きく違うモバイルツールでページを表示した際の見え方を考慮することはサイトを作成するにあたり重要です。

そのひとつの判断方法としてGoogleが提供する「モバイルフレンドリー テスト」があります。

Googleが考える一定の基準通りになっているかのチェックで、実際に人が見た際の印象とは違う場合もありますが、Googleがインデックスを作成するウェブクローラの基準でもあります。

筆者も自サイトで目視では問題ないのに「コンテンツの幅が画面の幅を超えています」というエラーがでて悩まされたことがあり、その際に役に立ちました。

ちなみにその原因はpreタグ内にあったタブ文字でした。

マルウェアチェック

ページにマルウェアが仕込まれていないかは、virustotalで調べることができます。

ページのほかファイルのチェックも可能ですが、公開されて困るファイルはチェックしてはいけません。

AMPサイトチェック

AMPテストはページの構造がAMPサイトとして登録できるかチェックします。

リッチリザルト(構造化テキストチェック)

Google検索時に上位の結果が囲み枠に入って、他の検索結果欄と違っているのを見たことがあると思います。あのような検索結果をリッチリザルトと言います。通常の結果になるかリッチリザルト形式になるかがGoogle次第なのですが、少なくとも構造化データを配置していないといけません。

JSON-LDでのページの構造化については「BloggerでJSON-LD(構造化)」の記事も参照していただければ幸いです。

リッチリザルトテストは、そのような構造化テキストの記述が正しくされているかをチェックするツールです。

表示速度等の総合的な問題のチェック

PageSpeed Insightsは、ページの表示速度やCLSの問題(表示後にページがずれる事)等の総合的なテストをしてくれます。

クローラに正確に情報を伝える

単に文法に乗っ取って作成するだけでは、複雑化されたHTML5の世界ではクローラに情報を伝えるのは難しいです。そのためHTML5では、ページ内での役割を含んだタグがいくつか加えられました。これらを利用してページを表現していくと、もう一歩進んだページになると思います。

ページ内での役割を含んだタグには次のようなものがあります。これらに関してはMDN Web Docs ：「HTML要素リファレンス」を参考にさせていただきました。

• header

  導入部や、ページナビゲーション等のグループを作ります。ロゴや検索フォームなどを含めてもいいです。headとはまったく別の要素です。

• footer

  headerに対するfooterです。著者の情報や、著作権情報、関連文書などを示します。

• nav

  ナビゲーションの略で、同一サイト内へのリンクをしめします。過去記事の一覧などをこのタグで囲みます。

• aside

  余談や補足情報を追加する項目です。当ページはサイドバーに関連記事へのリンクを載せていいますが、注釈等をサイドバーに書くなら、asideを使います。

• section

  単なる区間を示します。意味的に先のnavやaside等を使えるなら、そちらを使うことが推奨されています。BloggerのレイアウトHTMLの編集ではガジェットがsectionタグによって区切られています。(実際に表示させるとsectionという名前のクラスを持つdivタグになってしまいますが)

• hr

  これはHTML5以前からあったタグですが、意味的な区切りを示すものになっています。

• del

  削除された文字列の範囲を示します。クローラはこの文字を読むのか読まないのか気になります。 CSSで「text-decoration: line-through」とするより簡単に消し線が出せます。

• ins

  delの反対で挿入部分を意味します。Google AdSenseの広告コードはこのタグを使っています。

• dl,dt,dd

  dlで定義や説明のリストの領域を示します。その中で、dtで言葉を提示して、ddで説明します。

• figure,figcaption

  figureで図表の領域をしめします。その中で、imgタグなどで中身を記述しfigcaptionで注釈を追加します。

• article

  articleは自己完結している要素で、再利用をすることを前提としたものです。

• main

  mainはbody中の主要な部分を示します。

記事のネタに詰まった時

ネタに困ったり、集客を意識したい場合は次のようなサイトに頼ります。

• Googleトレンド

  急上昇ワードや、ワードの検索ボリュームを相対検索当ができます。情報収集の役に立ちます。

• 販促カレンダー

  朝日折込のイベントカレンダーです。手早くいってしまうと直近の「今日は何の日」のカレンダーです。当サイトでは縁遠いですが。

• Ubersuggest

  Ubersuggestはキーワードに対する検索ボリュームや、キーワード候補、CPCを表示してくれます。会員向けだったり、有料コンテンツだったりする部分が多いですが、無登録ユーザー向けのサービスも存在します。

• ラッコキーワード

  ラッコキーワードは、一つのワードに対して、並列検索されているキーワードを列挙してくれます。

Google AdSenseが表示されない

適切な記事をしても表示されない時は、サイズがおかしいのかもしれません。広告の種類によって最大サイズ、最小サイズが決められています。また、一般的なサイズから外れていても、表示する広告がなかったりするようです。

確証はないですが、筆者の経験上AdSense用のタグをコメントアウトしてもうまくコメント化されなかった事があり、削除したこともありました。