Bloggerブログで投稿の日付からアーカイブページへ記事タイトルから記事ページへリンクする方法

僕がBloggerのテンプレートで最も不可解だと感じるのは記事の日付に記事ページへのリンクが付いている。およそ日付にリンクを付けるならば年別や月別などのアーカイブページへ向けなくてはピンと来ないだろう。日付のリンクは目立たないし、殆ど誰も使わないようだから放っておいたけど――文字色などのデザインがリンクとは気付かないくらい他と変わらない――ただしSEO対策からすると検索エンジンが見ているのは間違いないので、アクセスアップのためにサイト評価を上げるべくは記事ページへのリンクを記事タイトルに付けて日付からはアーカイブページへ変更するのが望ましいと考える。リンク名のアンカーテキストとリンク先のサイト内容が合ってないのは不正行為と判断される危険性を免れない。あからさまに無関係なリンクを貼れば使った訪問者から騙したともはや嫌われ兼ねないわけで、SEO対策でも検索エンジンでのサイト評価を下げる要因になると懸念される。Bloggerのテンプレートのように内部リンクで、多少、ずれているのは特に問題はなさそうだけど――見方によれば日付のリンクが記事ページでもサイト内容（公開日）に含まれるから妥当なデザインだろう――しかし石橋を叩いて渡るのがアクセスアップに繋がるのではないか。適切なリンクを手堅く貼るのが訪問者と検索エンジンに好かれる可能性を高めてくれると感じて止まない。カスタマイズに取りかかって上手く行ったから必要な方法をブログに載せておきたい。

ブログの投稿ガジェットでアーカイブのURLを生成する
記事ページのアーカイブのURLを取得する独自タグ
アーカイブのリンクのテーマ毎のマークアップ
新テーマで日付のリンクをアーカイブに変更する
記事タイトルに記事ページへのリンクを付ける
注目や人気の投稿の記事タイトルのカスタマイズ
旧テーマで日付のリンクをアーカイブに変更する
記事タイトルに記事ページへのリンクを付ける

ブログの投稿ガジェットでアーカイブのURLを生成するブログのアーカイブのように色んなフォルダの詰まって引き出し

やってみると予想以上に難しいと驚く。というのは記事タイトルの下の日付はブログの投稿ガジェットに組み込まれるリンクとしてアーカイブのURLを直ぐには取得できなかったんだ。Bloggerの独自タグで、URLのデータが取得できればどんなページへもリンクを貼るのは容易い。ところがブログの投稿ガジェットで、記事ページのアーカイブのURLそのものを取得するのは無理らしい。なので事前に他の幾つかのデータを組み合わせて加工しなくてはならなかった。記事ページのアーカイブのURLを取得する独自タグブログの投稿ガジェット：Blogのtypeのwidget内では投稿の公開日の年や月のデータが取得できるからそれを使うとアーカイブのURLを生成できるに等しい。リンクを作成するHTMLのaタグのhrefに記入するには年や月のデイレクトリーだけでも相対パスとして役立つ。内部リンクはルートドメインを省略しても構わないし、ちゃんと移動できるようになる。SEO対策ならばリンクのURLにはルートドメインまで含めた絶対パスを使うと良いかも知れない。読み込む文字列が少しでも正確な方が検索エンジンの機械／コンピューターには分かり易いという。年や月のデータの直前にルートドメインをくっ付けてアーカイブのURLを完全に生成するのもBloggerの独自タグで、可能なので、僕は好んで使っているんだ。年別のアーカイブのリンクのソースコード

<a expr:href='data:view.url path (data:post.date.year + "/")'>リンク名</a>

ブログの投稿ガジェットではpost.date.yearから記事毎の年のデータを取得できる。演算できるevalを使ってページURLのview.urlにpathをかけてくっ付けて末尾に半角スラッシュも追加すると「https://example.blogspot.com/2018/」のようなBloggerの年別のアーカイブのURLが生成される。リンクのaタグのリンク先のhrefに指定してリンク名と共に記載すればブログの年月のアーカイブのリンクが完成する。月別のアーカイブのリンクのソースコード投稿した年と同じように月のデータもpost.date.monthから取れるので、evalとpathによって年別のアーカイブのURLに「+」でさらにくっ付ければ大丈夫だけど、ただし月の出力される数値が全て二桁にはならない。Bloggerの月別のアーカイブのURLは一月から九月まで「https://example.blogspot.com/2018/01/」のような月の先に「0」が付いた二桁の表示にしないとエラーページになってしまう。だから一月から九月までは月の先に「0」が付いて十月から十二月まではそのままで出力されるようにソースコードを二種類に振り分けて記載する必要がある。

<b:if cond='data:post.date.month lt 10'>
  <a expr:href='data:view.url path (data:post.date.year + "/0" + data:post.date.month + "/")'>リンク名</a>
  <else/>
  <a expr:href='data:view.url path (data:post.date.year + "/" + data:post.date.month + "/")'>リンク名</a>
</b:if>

全ての月が二桁で表示されるので、月別のアーカイブのURLのリンクにpost.date.monthを使っても一月から九月までエラーページにならない。振り分けの独自タグのifの条件のcondの「lt」は「<」を示す。なので「data:post.date.month lt 10」はページの月が十未満（九以下）を意味する。マークアップに「<」を使うとエラーになってHTML編集を上書きできなくなる。他の独自タグの一部と見做されるせいなので、エスケープするために「lt」を使う。一般的に文字実体参照の「<」を使っても大丈夫だけれどもBloggerの独自タグでは「<」の代わりに「lt」が用意されている。追記：月別のアーカイブリンクのソースコードはhref属性の内容を三項演算子で振り分けると半分以下に短縮することができる。

<a expr:href='data:view.url path (data:post.date.year + (data:post.date.month lt 10 ? "/0" : "/") + data:post.date.month + "/")'>リンク名</a>

以下のカスタマイズのマークアップの月別のアーカイブリンクに関するソースコードは短縮して書き直した。アーカイブのリンクのテーマ毎のマークアップアーカイブのリンクのテーマ毎の違いを表す色んなボールが浮遊している

アーカイブの年別や月別のソースコードを使ってブログのテンプレートのブログの投稿ガジェット：Blogのtypeのwidget内の実際に反映するかぎりの場所ならばどこでもマークアップして表示できる。僕は投稿の日付の記事ページへのリンクをアーカイブへのリンクと取り替えて記事ページへのリンクは記事タイトルに付けるようにカスタマイズしたので、一連のマークアップについて纏めておこうと思う。新テーマで日付のリンクをアーカイブに変更するContempoとSohoとEmploymentとNotableが対象になる。何れもデフォルトで日付のソースコードはカスタマイズできない。Bloggerのサーバーから<b:include name='super.headerByline'/>で出力されるためだ。この中に含まれるpostTimestampのidのincludableタグを取り出して変更すると当のソースコードの新しいマークアップがデフォルトよりも優先して読み込まれるようになる。年別のアーカイブのリンクを使う場合

<b:includable id='postTimestamp'>
  <span class='byline post-timestamp'>
  <data:byline.label/>
  <b:if cond='data:post.url'>
    <a expr:href='data:view.url path (data:post.date.year + "/")' class='timestamp-link'>
    <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'><data:post.date/></time>
    </a>
  </b:if>
  </span>
</b:includable>

※ソースコードはデフォルトの日付のデザインに合わせて修正済みだ。月別のアーカイブのリンクを使う場合

<b:includable id='postTimestamp'>
  <span class='byline post-timestamp'>
  <data:byline.label/>
  <b:if cond='data:post.url'>
    <a expr:href='data:view.url path (data:post.date.year + (data:post.date.month lt 10 ? "/0" : "/") + data:post.date.month + "/")' class='timestamp-link'>
    <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'><data:post.date/></time>
    </a>
  </b:if>
  </span>
</b:includable>

※ソースコードはデフォルトの日付のデザインに合わせて修正済みだ。どちらの場合でもBlogのtypeのwidget内のwidgetsettingsと他のincludableタグの外側にマークアップを行う。すると新しいpostTimestampとしてsuper.headerBylineが読み込んで記事ページの日付にアーカイブのリンクを付けてブログに表示するようになる。新テーマの投稿の日付は注目や人気の投稿ガジェットでも使われているので、ブログの投稿ガジェットと同じようにリンク先をアーカイブへ変更するならば個別にカスタマイズしなくてはならない。方法は三つとも共通している。個々のwidget内にpostTimestampのidのincludableタグを追加する。注目の投稿だとFeaturedPost、人気の投稿だとPopularPostsのtypeのwidgetタグのソースコードがカスタマイズの対象になる。記事タイトルに記事ページへのリンクを付ける四つのテーマに共通の記事ページの記事タイトルのソースコードがそれそれのBlogのtypeのwidget内のpostTitleのidのincludableタグに記載されている。ContempoとSohoとNotableの場合

<b:includable id='postTitle' var='post'>
  <a expr:name='data:post.id'/>
  <b:if cond='data:post.title != ""'>
    <h3 class='post-title entry-title'>
      <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
        <meta expr:content='data:post.url.canonical'/>
        <a expr:href='data:post.link ?: data:post.url' rel='bookmark' title='permanent link'><data:post.title/></a>
      <b:else/>
        <meta expr:content='data:post.url.canonical'/>
        <a expr:href='data:post.url' rel='bookmark' title='permanent link'>
        <data:post.title/>
        </a>
      </b:if>
    </h3>
  </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'/>
    <h3 class='post-title entry-title'>
      <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
        <meta expr:content='data:post.url.canonical'/>
        <a expr:href='data:post.link ?: data:post.url' rel='bookmark' title='permanent link'>
          <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>
      <b:else/>
        <meta expr:content='data:post.url.canonical'/>
        <a expr:href='data:post.url' rel='bookmark' title='permanent link'>
        <data:post.title/>
        </a>
      </b:if>
    </h3>
  </div>
</b:includable>

※太字の部分が新たに追加したソースコードだ。トップやアーカイブなどのインデックスページの記事の抜粋／スニペットの記事タイトルも含まれている。ブログの投稿ガジェットから記事タイトルを出力する二つの<data:post.title/>の一つ目がインデックスページ用のなので、二つ目の記事ページ用のソースコードをリンク付きに変更している。日付から記事ページのリンクを外すと他の部分も消えてしまうので、デフォルトで付いていたURLを指定する以外のmetaタグと「rel='bookmark'」と「title='permanent link'」を記事ページだけではなくてインデックスページでも追加している。何れも構造化データに関与していて外してもブログの閲覧に支障はないけど、しかし検索エンジンに記事ページへのリンクだと示しているからSEO対策に使うと良いかも知れない。僕はmetaタグは必要ないと考えて使わないようにした。HTMLではbody内に不要なので、サイトで使うとしたら一般的にMicrodataの構造化データのためだけれども新テーマではそうしたマークアップのitemscopeやitemtypeやitempropは全く行われてない。旧テーマでは数多く行われていたけれども新テーマではむしろGoogle推奨のJSON-LDの構造化データに置き換えられているようなんだ。ソースコードに只単にmetaタグが置かれていてもSEO効果は期待できなさそうだから外すのは吝かではない。残りの二つはHTMLでも標準的にあり得るマークアップだからそれ自体でSEO効果を期待できる。「rel='bookmark'」は記事ページへのリンクをブックマークリンクとして示すと共にMicroformatsのコンテンツのためのhAtomの構造化データを取り入れれば任意項目として有用性を持つ。「title='permanent link'」は記事ページへのリンクをパーマリンクとして示すと共にパソコンでは閲覧中に表示できるツールチップの内容を含むから訪問者にとっても役立たないわけではない。使わなくても構わないかも知れないけど、もしも使うならば注目や人気の投稿の記事タイトルの記事ページへのリンクのマークアップにも合わせるのが良いと思う。新テーマのどちらの日付の記事ページへのリンクにもデフォルトで「rel='bookmark'」と「title='permanent link'」が付いている。リンク先をアーカイブページへ変更した場合、記事タイトルの記事ページへのリンクに追加しないとそれそれの機能は引き継がれないんだ。注目や人気の投稿の記事タイトルのカスタマイズどちらもカスタマイズに必要なソースコードは同じだけど、デフォルトでサーバーから出力される状態だから個別に取り出してマークアップを行わなくては変更できない。

<b:includable id='snippetedPostTitle'>
  <h3 class='post-title'>
  <a expr:href='data:post.url' rel='bookmark' title='permanent link'><data:post.title/></a>
  </h3>
</b:include>

※太字の部分が追加したマークアップだ。注目の投稿はFeaturedPost、人気の投稿はPopularPostsのtypeのwidget内にwidgetsettingsと他のincludableタグを避けて記載する。最初は何もなくて<b:include name='snippetedPostTitle'/>でサーバーから呼び出されるけど、ところがテンプレートのソースコードに定義付けの同名のsnippetedPostTitleのidのincludableタグを載せておくと優先されるからカスタマイズが可能になる。僕はContempoテーマを使ってカスタマイズした記事タイトルの記事ページへのリンクの全てに「rel='bookmark'」と「title='permanent link'」を追加するようにした。デザインは殆ど変わらないし、概して非表示のコンテンツなので、訪問者にとって有用性は少ないにせよ、検索エンジンは読み取るからブログへのSEO効果が全くないとは考えられない。旧テーマで日付のリンクをアーカイブに変更するシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行が対象になる。旧テーマは投稿の日付が記事タイトルの上の日付ヘッダーと本文の下の時刻のフォーマットの二つに分かれているけど、ただしデフォルトで記事ページへのリンクが付いているのは本文の下の時刻のフォーマットだけだ。なので当該のマークアップを変更するソースコードを取り上げる。年別のアーカイブのリンクを使う場合

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
     <b:if cond='data:post.url'>
       <a expr:href='data:view.url path (data:post.date.year + "/")' class='timestamp-link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
    </b:if>
  </b:if>
</span>

月別のアーカイブのリンクを使う場合

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
      <b:if cond='data:post.url'>
        <a expr:href='data:view.url path (data:post.date.year + (data:post.date.month lt 10 ? "/0" : "/") + data:post.date.month + "/")' class='timestamp-link'>
        <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr>
        </a>
     </b:if>
  </b:if>
</span>

旧テーマのソースコードはデスクトップとモバイルに分かれているので、前者はpostのidのincludableタグ、後者はmobile-postのidのincludableタグの内容を必要な分だけ変更する。どちらの場合もpost-timestampのclassのspanタグの中のaタグをアーカイブページへのリンクのソースコードに置き換える。記事タイトルに記事ページへのリンクを付けるデスクトップ用のソースコード

<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 or (data:post.url and data:blog.url != data:post.url)'>
    <meta expr:content='data:post.url.canonical' itemprop='url'/>
    <a expr:href='data:post.link ? data:post.link : data:post.url' rel='bookmark' title='permanent link'><data:post.title/></a>
  <b:else/>
    <meta expr:content='data:post.url.canonical' itemprop='url'/>
    <a expr:href='data:post.url' rel='bookmark' title='permanent link'><data:post.title/></a>
  </b:if>
  </h3>
</b:if>

※太字の部分が新たに追加したソースコードだ。モバイル用のソースコード

<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'>
      <meta expr:content='data:post.url.canonical' itemprop='url'/>
      <a expr:href='data:post.link' rel='bookmark' title='permanent link'><data:post.title/></a>
    <b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
      <meta expr:content='data:post.url.canonical' itemprop='url'/>
      <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
      <a expr:href='data:post.url' rel='bookmark' title='permanent link'><data:post.title/></a>
    </b:if>
  </h3>
</b:if>

※太字の部分が新たに追加したソースコードだ。どちらも<a expr:name='data:post.id'/>以下の記事タイトルのソースコードをカスタマイズしている。追加ページの記事タイトルにも反映する。リンクのマークアップの他に「itemprop='url'」（metaタグ）や「rel='bookmark'」や「title='permanent link'」を追加するのはデフォルトの日付の記事ページへのリンクからの引き継ぎで、何れも構造化データに関与していて検索エンジンに記事ページへのリンクだと伝えるのに役立つ。外して使わなくてもブログの閲覧、またはデザインにも大きな支障はないと思うけど、しかしながらSEO対策のためには使うべきだ。