• 2018-07-11
ウズマスター戦記
ウズマスター戦記 https://www.uzumax.org/2018/07/bloggerseo.html

BloggerのSEO対策:見出しレベルを改善する

当ブログの読者数を増やす為、気合い入れてSEO対策を行いました!!

そのうち、Blogger特有の作業であった見出しレベルの改善についてご説明します。



見出しとは

見出しとは、H1、H2、H3といった各種タグのことです。

SEO対策ではこれを正しく使用するのが大切で、数字が小さいほど重要になってきます。
つまりH1が一番重要で、H1が検索エンジンのキーワードを含んだ簡潔なページの要約になっていると、SEOのポイントが高いそうです。

なるほど。ではこの点を踏まえて我がブログのチェックをしてみました。

BloggerのH1は最初はタイトルになっている

ここでちょっとすいません。
このブログ「ウズマスター戦記」は既にSEO対策を行ってしまった後なので、まだ実施していないもう一つのブログ「ウズマスターの日々」を題材にチェックしていきます。

ウズマスターの日々

さあ、このブログの階層構成はどうなってるかな!?

階層構成Before

あぎゃ~。

H1に指定されてるのはブログタイトルじゃねえか!!

ブログタイトルじゃなくて記事のタイトルがH1じゃなきゃ困るんだよ!!

出来の悪い見出し設定

こりゃ酷ぇwww
と言うわけで、修正していきましょう。

修正プラン

私の狙う構成は以下のとおり。


  • タイトルは見出しにしない。(「ウズマスターの日々」で検索する人なんかいない)
  • 日付は見出しにしない。(同じく、注目に値する場所ではない)
  • 記事のタイトルをH1にする。
  • さすれば、それより下の記事の見出しはH2から続いてくれる。


これで修正したいと思います。

修正作業

「テーマ⇒HTMLの編集」から以下の部分を修正していきます。

タイトルの修正

タイトルの箇所は「h1」で検索すればすぐ見つかります。
パソコン表示用とモバイル表示用の2か所があるのでご注意ください。

<div id='header-inner'>
  <div class='titlewrapper' style='background: transparent'>
    <h1 class='title' style='background: transparent; border-width: 0px'>
      <b:include name='title'/>
    </h1>
  </div>
  <b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); "                      + "background-position: "                      + data:backgroundPositionStyleStr + "; "                      + data:widthStyleStr                      + "min-height: " + data:height                      + "_height: " + data:height                      + "background-repeat: no-repeat; "' id='header-inner'>
  <div class='titlewrapper' style='background: transparent'>
    <h1 class='title' style='background: transparent; border-width: 0px'>
      <b:include name='title'/>
    </h1>
  </div>
  <b:include name='description'/>
</div>

「h1」となっている所を「div」に変更します。

日付の修正

日付の箇所は「<data:post.dateHeader/>」と書かれている所です。
パソコン表示用とモバイル表示用の2か所があるはずです。

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

これも「h2」となっている所を「div」に変更します。

記事タイトルの修正

いよいよ本丸です。
記事タイトルは「<data:post.title/>」で検索すれば見つかります。
やっぱりパソコン表示用とモバイル表示用の2か所がありますので丁寧に変更。

<h3 class='mobile-index-title entry-title' itemprop='name'>
  <data:post.title/>
</h3>

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
  <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
  <b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
    <a expr:href='data:post.url'><data:post.title/></a>
  <b:else/>
    <data:post.title/>
  </b:if>
</h3>
</b:if>

「h3」になっちゃっているところを「h1」にレベルアップします。

途中確認

ここまで来たら一回チェックしてみましょう。

タイトルの見出し修正後

無事にタイトルの見出しは直ったようですね。

しかし、何か赤いところが……。

なんと、「コメント」が「h4」になっているので階層の順番が崩れているのです。

これも直さなければいけません。(泣)

コメント部の修正作業

コメントラベルの修正

まずコメントラベルの修正です。「<h4><data:post.commentLabelFull/>:</h4>」で検索して発見して下さい。
「<data:post.commentLabelFull/>」だけだと3か所あったりますが、修正箇所は「h4」のある2か所です。

<h4><data:post.commentLabelFull/>:</h4>

「h4」を「h2」にします。

「コメントを投稿」の修正

「コメントの投稿」は「<data:postCommentMsg/>」で見つかります。
該当箇所は2か所です。

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
    </script>
  </div>
</b:includable>

「h4」を「h3」に修正、と。

修正完了

これで無事に見出しの階層構成は綺麗になりました。
お疲れ様でした。

修正完了

残作業

当然ですが、タグを変更したのでブログのレイアウトが崩れているはずです。
各自、スタイルシートを修正して元の見栄えに戻してあげて下さい。

どうやって見出しの階層構成をチェックしているの?

見出しの階層構成をHTMLソースを目視でチェックするのは難しいです。
HeadingsMapというChromeのプラグインがオススメです。


以上。

HTMLの編集は大変ですが、読者獲得のためですから。
頑張ってください!!

0 件のコメント:

コメントを投稿

お気軽にコメント下さい。