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

ブログの検索エンジンからのアクセスアップを考えると記事タイトルのHTMLの見出しタグにはh1かh2を使いたい。サイト評価を上げるためにキーワードを入れても検索エンジンに重視されなければSEO（検索エンジン最適化）効果が下がってしまうせいだ。見出しタグは基本的に大きいほどにキーワードとして注目される。Bloggerで2017年の公式テーマのContempoを使っていて他のSohoとEmporioとNotableも同じだけれども記事ページの記事タイトルの見出しタグにはh3が付いている。変更するためにはブログのHTML編集が必要なんだ。ウェブからテーマの「HTML編集」か、または「バックアップ／復元」からテーマのファイルのデータ（XMLファイル）をダウンロードしてデバイスのアプリでHTML編集を行ってアップロードするかのどちらかを行わなければならない。追記：旧テーマ：SimpleとDynamic ViewsとPicture WindowとAwesome Inc.とWatermarkとEtherealとTravelの投稿の見出しタグの変更についても掲載した。記事ページのみタイトルの見出しタグを「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タグのソースコード

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

Contempo｜Blogger表示される記事の抜粋の一件目の直前に「投稿」と載っていて検索エンジンには分かるようになっている。キーワードのための隠しテキストならばサイト評価でペナルティーを食らう恐れがあるけれども少しだけの機械向けの正面な説明だから大丈夫だろうとそのままにして使っている。そしてさらに記事の抜粋の後にh3の見出しタグが付いたサイドバーのコンテンツが並んで行くからプログ名のh1からのマークアップの流れを考えると抜粋の記事タイトルはh3が良いかも知れない。かりにh2に変更すれば後続のサイドバーのサイト内容が見えないh2の「投稿」よりも抜粋の最後の記事タイトルにかかって検索エンジンに理解されるはずだ。サイト評価に大した違いはなさそうにせよ、後続のサイドバーのサイト内容は並んでいる全ての記事の抜粋を纏めている見えない「投稿」という見出しのh2タグにかかった方が構成的に正確だから気に入ってしまう。旧テーマの投稿のタイトルの見出しタグを変更するソースコード2017年以前からある七つの公式テーマのSimpleとDynamic ViewsとPicture WindowとAwesome Inc.とWatermarkとEtherealとTravelも投稿のタイトルの見出しタグは全て「h3」になっているので、「h1」や「h2」に変える場合はカスタマイズが必要になる。デスクトップヴァージョンの投稿の見出しタグのソースコード

<b:includable id='post' var='post'>
  <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  （中略）
<b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h3>
    </b:if>
  （中略）
  </div>
</b:includable>

帯文字の二箇所が投稿の見出しの開始と終了のタグになっているので、他のものに書き換えることができる。旧テーマのデスクトップヴァージョンの投稿の見出しタグはトップページなどのインデックスページも記事／追加ページで共用になっているので、別々に扱いたい場合はソースコードの見出しタグの部分を次のように書き換えると良いと思う。

<b:if cond='data:post.title'>
  <b:tag class='post-title entry-title' itemprop='name' expr:name='data:view.isMultipleItems ? "インデックスページの見出しタグ" : "記事／追加ページの見出しタグ"'>
  <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
    <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
  <b:else/>
    <data:post.title/>
  </b:if>
  </b:tag>
</b:if>

太字の二箇所を書き換える。帯文字の二箇所はインデックスページと記事／追加ページで、使い分けたい見出しタグの「h1」や「h2」などを入れる。モバイルヴァージョンの投稿の見出しタグのソースコード旧テーマはBloggerの管理画面のテーマのメニュー（▼）のするとモバイルヴァージョンのソースコードを変更することができる。モバイルヴァージョンのインデックスページの見出しタグのソースコード

<b:includable id='mobile-index-post' var='post'>
  <div class='mobile-date-outer date-outer'>
  （中略）
  <div class='mobile-post-outer'>
      <a expr:href='data:post.url'>
        <h3 class='mobile-index-title entry-title' itemprop='name'>
          <data:post.title/>
        </h3>
  （中略）
  </div>
</b:includable>

モバイルヴァージョンの記事／追加ページの見出しタグのソースコード

<b:includable id='mobile-post' var='post'>
  <div class='date-outer'>
  （中略）
<a expr:name='data:post.id'/>
          <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>
  （中略）
</div>
</b:includable>

旧テーマのモバイルヴァージョンの投稿の見出しのソースコードはインデックスページと記事／追加ページに分かれているなので、それそれの見出しタグを個別にカスタマイズできる。旧テーマはDynamic Viewsを除いて投稿の見出しタグを変更すると見出しのデザインが反映しなくなるかも知れないので、CSSのソースコードも修正した方が良いと思う。旧テーマの見出しタグのCSSの例

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

.mobile h3.post-title {
  margin: 0;
}

テーマによってCSSの内容やソースコードの数が変わるけど、とにかく指定先の「h3.post-title」（Dynamic Views以外の旧テーマに必ず、一つ以上、ある）と「.mobile h3.post-title」（Simpleのみ）を見付けて「h3」の部分を消すか新しく使用する見出しタグに変えると以前の見出しのデザインが引き継がれて反映するようになる。記事ページのタイトルはh2でなくてh1でも良いかも知れないし、ヘッダーのブログ名のh1に加えて二つになっても多過ぎはしない。最重要なのは間違いないから非常に迷うけれども現状ではh2を選んでいる。サイト全体の検索エンジンでのサイト評価を想定すると記事ページのタイトルはh2で、ブログ名だけをh1にしておくのも面白いと感じる。デザインは何もしなくても引き継がれる。見出しタグに、直接、CSSが指定されているわけではないせいだ。元々の「h3」が「h1」や「h2」に変更されても文字サイズが大きくなったりはしないし、特定の記事タイトルのデザインが反映している。記事ページのタイトルをh2の見出しタグにしてみて検索エンジンからのアクセスは伸びている感じがする。今まで記事タイトルの見出しタグがh3だったから本文にはh4を使う場合が多かったけれどもサイト構成の順番からすると記事タイトルのh2の次にはh3が新しく使い易くなったから本文の見出しのキーワードも以前よりもSEO効果を増すと期待している。追記：ブログの記事タイトルの見出しをh1でやるように変えた。検索エンジンからのアクセスアップはh3からh2に変えても殆ど感じなかったし、h1でもそうで、見出しタグそのもののSEO効果はないに等しい。もはや記事が高品質かどうかこそ大事だと思うので、記事タイトルの見出しタグをh1にして本文の見出しをh2から付けて文章構成を整えながらやって行きたいと考える。