スキップしてメイン コンテンツに移動

Bloggerで記事タイトルの見出しタグを変更するソースコード

ブログの検索エンジンからのアクセスアップを考えると記事タイトルのhtmlの見出しタグにはh1かh2を使いたい。サイト評価を上げるためにキーワードを入れても検索エンジンに重視されなければSEO(検索エンジン最適化)効果が下がってしまうせいだ。見出しタグは基本的に大きいほどにキーワードとして注目される。

Bloggerで2017年の公式テーマのContempoを使っていて他のSohoとEmporioとNotableも同じだけれども記事ページの記事タイトルの見出しタグにはh3が付いている。

変更するためにはブログのhtml編集が必要なんだ。

ウェブからテーマの「html編集」か、または「バックアップ/復元」からテーマのファイルのデータ(xmlファイル)をダウンロードしてデバイスのアプリでhtml編集を行ってアップロードするかのどちらかを行わなければならない。

記事ページのみタイトルの見出しタグを「h3」から「h2」に変更したソースコード

ContempoとSohoとNotableの場合

<b:includable id='postTitle' var='post'>
  <a expr:name='data:post.id'/>
    <b:if cond='data:post.title != ""'>
      <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
        <h3 class='post-title entry-title'>
          <a expr:href='data:post.link ?: data:post.url'>
            <data:post.title/>
          </a>
        </h3>
      <b:else/>
        <h2 class='post-title entry-title'>
          <data:post.title/>
        </h2>
      </b:if>
    </b:if>
</b:includable>

※太字の部分が書き換え済みだ。

Emporioの場合

<b:includable id='postTitle' var='post'>
  <!-- Snippetize the post title -->
    <div class='post-title-container'>
      <a expr:name='data:post.id'/>
        <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
          <h3 class='post-title entry-title'>
            <a expr:href='data:post.link ?: data:post.url'>
              <div class='snippet-container r-snippet-container'>
                <div class='r-snippetized'>
                  <data:post.title/>
                </div>
              <b:if cond='data:post.title != ""'>
                <div class='snippet-fade r-snippet-fade hidden'/>
              </b:if>
                </div>
            </a>
          </h3>
        <b:else/>
          <h2 class='post-title entry-title'>
            <data:post.title/>
          </h2>
        </b:if>
    </div>
</b:includable>

※太字の部分が書き換え済みだ。

記事タイトルを出力している<b:includable id='postTitle' var='post'></b:includable>の中身を変更している。

実際に取り入れる際には各テーマのソースコードに同じ記述が幾つもあるので、注意してデザインが優先されるブログの投稿ガジェット(BlogのtypeのWidget内)から選んで書き換えなくてはならない。

Bloggerの2017年の公式テーマはトップページなどの一覧ページの記事の抜粋と記事ページのhtmlやcssが共通になっていて切り離して編集するのが厄介なんだ。

サンプルのソースコードは記事ページのタイトルの見出しタグをh2に、それ以外の抜粋のタイトルはh3のままに止めている。

ただし記事タイトルにリンクのaタグが付いているかどうかで識別されるから記事ページのタイトルにリンクが設定してある場合には無効になってしまう。

全てを一辺に変更するならば記事タイトルを出力している<b:includable id='postTitle' var='post'></b:includable>の中の元々の「h3」を「h1」や「h2」に書き直すだけで良い。

検索エンジンからのアクセスアップを考えると一つのページにh1が幾つも出て来るとどれがブログに最重要なのかとサイト構成が曖昧で分かり難くなってサイト評価に不利だからh2が益しだろう。

Bloggerの2107年の公式テーマはトップページに見えないけれども見出しのh2タグが入っている。

Bloggerの2017年のテーマに使われているトップページの「投稿」という非表示の見出しのh2タグのソースコード

表示される記事の抜粋の一件目の直前に「投稿」と載っていて検索エンジンには分かるようになっている。キーワードのための隠しテキストならばサイト評価でペナルティーを食らう恐れがあるけれども少しだけの機械向けの正面な説明だから大丈夫だろうとそのままにして使っている。

そしてさらに記事の抜粋の後にh3の見出しタグが付いたサイドバーのコンテンツが並んで行くからプログ名のh1からのマークアップの流れを考えると抜粋の記事タイトルはh3が良いかも知れない。

かりにh2に変更すれば後続のサイドバーのサイト内容が見えないh2の「投稿」よりも抜粋の最後の記事タイトルにかかって検索エンジンに理解されるはずだ。サイト評価に大した違いはなさそうにせよ、後続のサイドバーのサイト内容は並んでいる全ての記事の抜粋を纏めている見えない「投稿」という見出しのh2タグにかかった方が構成的に正確だから気に入ってしまう。

記事ページのタイトルはh2でなくてh1でも良いかも知れないし、ヘッダーのブログ名のh1に加えて二つになっても多過ぎはしない。最重要なのは間違いないから非常に迷うけれども現状ではh2を選んでいる。サイト全体の検索エンジンでのサイト評価を想定すると記事ページのタイトルはh2で、ブログ名だけをh1にしておくのも面白いと感じる。

デザインは何もしなくても引き継がれる。見出しタグに、直接、cssが指定されているわけではないせいだ。元々の「h3」が「h1」や「h2」に変更されても文字サイズが大きくなったりはしないし、特定の記事タイトルのデザインが反映している。

記事ページのタイトルをh2の見出しタグにしてみて検索エンジンからのアクセスは伸びている感じがする。

今まで記事タイトルの見出しタグがh3だったから本文にはh4を使う場合が多かったけれどもサイト構成の順番からすると記事タイトルのh2の次にはh3が新しく使い易くなったから本文の見出しのキーワードも以前よりもSEO効果を増すと期待している。

追記:ブログの記事タイトルの見出しをh1でやるように変えた。検索エンジンからのアクセスアップはh3からh2に変えても殆ど感じなかったし、h1でもそうで、見出しタグそのもののSEO効果はないに等しい。もはや記事が高品質かどうかこそ大事だと思うので、記事タイトルの見出しタグをh1にして本文の見出しをh2から付けて文章構成を整えながらやって行きたいと考える。

関連:Bloggerブログで記事/追加ページのブログ名から見出しタグのh1を外す

コメント

些細な日常の人気の投稿

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

Imgurで画像URLと埋め込みコードを取得する方法

ジョナサン・モフェットのドラムの8ビートの切れ味の鋭いグルーヴ