2018-08-13T16:50:49Z

BloggerのHTTP/HTTPS共存で躓いたこと(canonical)

注意:本記事は、問題解決を諦めた経緯を記載します。問題は解決されておりません。

躓いたこと

Bloggerの独自ドメインでHTTPS設定ができるようになりました。なので、HTTPS設定したのですが、サーチコンソールで確認するとアクセスの殆どがいつまでもHTTP接続でした。

調べた結果、ページのcanonical設定によって元ページを指定しており、Googleの検索は元ページにユーザを誘導するようです。そのため、HTTPS接続が使用されていないようです。

目的

  • BloggerのHTTPS対応の一貫として、canonicalにHTTPSパスを指定する
  • canonicalを指定することで、HTTPのインデックスをHTTPSに付け替える
  • HTTPSをインデックスしてGoogle検索順位を優位なものとしたい

実施

BloggerのHTTP/HTTPS共存(HTTPSリダイレクトなし)の場合、<b:include data='blog' name='all-head-content'/>のテンプレートタグにより、HTTPのcanonicalが自動挿入される。HTTPS完全移行(HTTPSリダイレクトあり)の場合、HTTPSのcanonicalが自動挿入される。

<b:include data='blog' name='all-head-content'/>を使用しなければ、HTTP/HTTPS共存出来るかと言うと、そんなことはなくHTTPSのパスを作り出すことができず、canonicalを作成できませんでした。状況は以下の通りです。

  • HTTPSパス(例:https://ドメイン名/2018/01/test.html)を取得できない
    • HTTPS完全移行すれば、data:blog.canonicalUrlで取得可能
    • 共存環境では、data:blog.canonicalUrlからHTTPパスを取得する
    • data:blog.urlでは、HTTP接続時にHTTPパスを取得する
  • パスのみ(例:/2018/01/test.html)を取得できない
    • 取得可能であれば、https://ドメイン名 + パスをcanonicalに設定して対応可能

<data:view.url.canonical.https/>タグを使用して、以下のように記述するとHTTPSのcanonicalを記述できる。

<link expr:href='data:view.url.canonical.https' rel='canonical'/>

HTTPSのcanonical記述ができた。残るは、<b:include data='blog' name='all-head-content'/>を代替えすることで目的が実現できる。代替えコードを下記に示す。

代替えコード(all-head-content)

<meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/>
<b:if cond='data:widgets'>
  <b:comment>Chrome, Firefox OS and Opera</b:comment>
  <meta expr:content='data:skin.vars.body_background_color' name='theme-color'/>
  <b:comment>Windows Phone</b:comment>
  <meta expr:content='data:skin.vars.body_background_color' name='msapplication-navbutton-color'/>
</b:if>
<data:blog.latencyHeadScript/>
<data:blog.mobileHeadScript/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<b:if cond='data:blog.adultContent'>
  <meta content='adult' name='rating'/>
</b:if>
<link expr:href='data:view.url.canonical.https' rel='canonical'/>
<data:blog.feedLinks/>
<data:blog.openIdOpTag/>
<data:blog.meTag/>
<b:tag name='link' cond='data:blog.googleProfileUrl' rel='publisher' expr:href='data:blog.googleProfileUrl'/>
<b:tag name='link' cond='data:view.featuredImage' expr:href='data:view.featuredImage' rel='image_src'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:include name='openGraphMetaData'/>
<data:blog.ieCssRetrofitLinks/>
<!--[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]-->

結果

筆者は、今回この件に関しては諦めることとしました。HTTP/HTTPS共存状態でcanonicalにHTTPパスを指定したままとします。

一難ありましたが、無事HTTP/HTTPS共存状態でのcanonicalのHTTPS指定ができました。

参考

 コメントを書く