【Blogger リダイレクト】ブログ全体や記事単位でのリダイレクト方法

Google Blogger (グーグル ブロガー)のリダイレクトについてまとめています。Bloggerはhtaccessによるリダイレクトができないのでcanonicalとrefreshを利用したリダイレクトになります。ポイントは自動で出力されるcanonicalを制御しながらリダイレクトしている点です。canonicalが2重に出力されることなくリダイレクトしています。

Bloggerのheadタグ内を調査

Bloggerのソースを見てみるとcanonicalがあるのですが、「HTMLの編集」にそれらしき記述がありません。調べてみるとall-head-contentという独自タグでcanonicalも含め様々なソースを出力しているようです。

Bloggerブログのテンプレートのhead内のカスタマイズのために独自タグのall-head-contentを分解する

「HTMLの編集」で以下のようにコメントで囲み、どのようなソースが出力されているのか調べてみました。

    <!-- all-head-content -->
    <b:include data='blog' name='all-head-content'/>
    <!-- ./all-head-content -->

出力された内容は以下の通りです。

<!-- all-head-content -->
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<!-- Chrome, Firefox OS and Opera -->
<meta content='#f4f4f4' name='theme-color'/>
<!-- Windows Phone -->
<meta content='#f4f4f4' name='msapplication-navbutton-color'/>
<meta content='blogger' name='generator'/>
<link href='https://[アドレス].blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://[アドレス].blogspot.com/' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="[ブログタイトル] - Atom" href="https://[アドレス].blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="[ブログタイトル] - RSS" href="https://[アドレス].blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="[ブログタイトル] - Atom" href="https://www.blogger.com/feeds/[xxxxxxxxxxxxxxxxxxx]/posts/default" />
<!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->
<meta content='https://[アドレス].blogspot.com/' property='og:url'/>
<meta content='[ブログタイトル]' property='og:title'/>
<meta content='' property='og:description'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
<!-- ./all-head-content -->

リダイレクトするにあたってこれらの情報は必要ないので、リダイレクトする際は以下の独自タグを出力しないようにすればいいのかなと思います。

<b:include data='blog' name='all-head-content'/>

リダイレクトのケース別の対処

Blogger全体を別サイトのページへリダイレクトする場合

ブログ全体を別ページへリダイレクトする場合です。たとえばBloggerの全てのページを別サイトの1つのページにまとめた場合なんかがあてはまります。私の場合は、リンク集的なブログや旅行ブログ、行楽に関するブログをBloggerで作っていたのですが、別サイトの1ページにまとめたくなったので、このリダイレクトが必要になりました。

このリダイレクトはとても楽で以下を削除して、

<b:include data='blog' name='all-head-content'/>

かわりに以下を記述すれば、Bloggerの全てのページを別サイトのページへリダイレクトできます。

<link rel="canonical" href="[URL]"/>
<meta http-equiv="refresh" content="0;url=[URL]"/>

Bloggerの特定のページを別サイトのページへリダイレクトする場合

Bloggerの特定のページを別サイトのページへリダイレクトする場合です。Bloggerの特定のページを判別するの「blog.canonicalUrl」を利用しました。Bloggerでは以下のようにif文が使えます。

【第3回】これでわかった!Bloggerの制御タグ・データタグまとめ | ぶろぐらまー

<b:if cond='data:blog.pageType == "item"'>
  <!-- 表示するページの種類が「投稿」の場合 -->
<b:elseif cond='data:blog.pageType == "static_page"'>
  <!-- 表示するページの種類が「ページ」の場合 -->
</b:if>

以下のようにすれば、Bloggerの特定のページを別サイトのページへリダイレクトできます。

<b:if cond='data:blog.canonicalUrl == "https://[].blogspot.com/2020/06/elements.html"'>
  <link rel="canonical" href="[url]"/>
  <meta http-equiv="refresh" content="0;url=[url]"/>
<b:else/>
  <b:include data='blog' name='all-head-content'/>
</b:if>

elseifを利用すれば複数のページをそれぞれ、別サイトのページへリダイレクトできます。

<b:if cond='data:blog.canonicalUrl == "https://[].blogspot.com/2020/06/post1.html"'>
  <link rel="canonical" href="[url1]"/>
  <meta http-equiv="refresh" content="0;url=[url1]"/>
<b:elseif cond='data:blog.canonicalUrl == "https://[].blogspot.com/2020/06/post2.html"'/>
  <link rel="canonical" href="[url2]"/>
  <meta http-equiv="refresh" content="0;url=[url2]"/>
<b:else/>
  <b:include data='blog' name='all-head-content'/>
</b:if>

※ HTTPS リダイレクトが「はい」になってないとif文で判定できなことがわかりました。

Bloggerではswitch文も使えるので以下のように記述してみましたが、判別できませんでした。switch文のほうがスマートなのでできればこちらでリダイレクトさせたいのですが。

<b:switch var='data:blog.canonicalUrl'>
  <b:case value="https://[].blogspot.com/2020/06/post.html"/>
    <link rel="canonical" href="[url]"/>
    <meta http-equiv="refresh" content="0;url=[url]"/>
  <b:default/>
    <b:include data='blog' name='all-head-content'/>
</b:switch>