Blogger記事のタイトル表示を変更する方法

今回は、「タイトル」についてです。
皆様のブログ記事では、どのような形式でタイトルが表示されていますか？
「ブログタイトル：記事タイトル」、「記事タイトル」など色々な形式があります。
Bloggerでもタイトル形式がカスタマイズできますので、ご紹介します。

カスタマイズする理由

なぜカスタマイズするのか？と思う方もいらっしゃると思います。
タイトルというのは非常に重要と考えられています。

例えば、検索を行ったときに表示されるリンクは、タイトルとサマリーです。
Google検索もYahoo!検索でも形式は同じです。
表示されるのはタイトルと記事の一部です。
Googleの検索結果は、次の通りですよね。

きっと検索した方は、あなたが書いた記事に辿り着くまでに、
タイトルを見てクリックし、やってきます。
タイトルが不適切であったり、途中で切れてしまっていると、
クリックせずに通り過ぎてしまうかもしれません。

ですからタイトルを魅力的に見せる必要があります。

では、タイトルが「ブログタイトル：記事タイトル」と表示された時、
おそらくブログタイトルは、検索者にとって不要な場合がほとんどです。
少なくとも私は「記事タイトル」に集中したいです。

また記事タイトルが長い場合は、ブログタイトルに押し出されて、
記事タイトルが途中までしか表示されないかもしれません。
たくさん見て頂くためにも次の形式が良いのではないかと個人的な意見です。

• 「記事タイトル｜ブログタイトル」

カスタマイズ手順

カスタマイズ手順は、次の通りです。
※必ずバックアップを取って、編集は自己責任で行ってください。

1. テンプレートのバックアップを行う
2. HTMLの編集画面で、titleタグを見つける
3. 記事ページのみタイトルを変更するコードで修正する
4. テンプレートを保存する

バックアップは、以前の記事を参考にしてください。
参考：Bloggerのテンプレートをバックアップする方法

HTMLの編集画面で、titleタグを見つける

Blogger画面に入り、
「テンプレート」→「HTMLの編集」と進んでください。
titleタグはすぐに見つかると思います。

記事ページのみタイトルを変更するコードで修正する

テンプレートにもよりますが、次のような指定になっていると思います。

<title><data:blog .pageTitle/></title>

赤字の部分が「ブログタイトル：記事タイトル」の形式で置き換わります。
この部分を変更していきます。

変更後は、次のようにします。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
  <title><data:blog.pageTitle/></title>
</b:if>

簡単にご説明します。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
これは、「data:blog.pageType」が「記事ページ」の時という意味です。
プログラミングでいう条件分岐です。

<title><data:blog.pageName/> | <data:blog.title/></title>
記事ページの時に出力されるタイトルがすぐ下の行になります。
この行は、「記事タイトル｜ブログタイトル」で出力するように指定しています。

<b:else/>
この行は、記事ページ以外の時に出力するタイトルを指定しています。
つまり、トップページやラベルで絞ったページを表示する時に、
利用するタイトルを指定します。

編集できたらテンプレートを保存してください。

実際のブログ記事ページを開いて意図したタイトル形式で表示されていればOKです。

お疲れ様でした。
以上で、カスタマイズ完了です。

最後まで読んで頂き、ありがとうございます。