BloggerのHTTP/HTTPS共存で躓いたこと(canonical)
注意：本記事は、問題解決を諦めた経緯を記載します。問題は解決されておりません。
問題は解決しました。
うまくいかなかったこと
Bloggerの独自ドメインでHTTPS設定ができるようになりました。なので、HTTPS設定したのですが、サーチコンソールで確認するとアクセスの殆どがいつまでもHTTP接続でした。
調べた結果、ページのcanonical設定によってHTTPページを指定しており、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'/>を代替えすることで目的が実現できる。代替えコードを下記に示します。
更に内部で呼び出される<b:include name='openGraphMetaData'/>も合わせて代替えします。og:urlがHTTPのままであるため。
<meta expr:content='data:blog.url.canonical.https' property='og:url'/>代替えコード（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>
<meta expr:content='data:blog.url.canonical.https' property='og:url'/>
<meta expr:content='data:view.title.escaped' property='og:title'/>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/>
<b:elseif cond='data:widgets'/>
<b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
<meta expr:content='resizeImage(data:imageUrl, 1200, "1200:630")' property='og:image'/>
</b:loop>
<b:elseif cond='data:blog.postImageUrl'/>
<meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' property='og:image'/>
</b:if>
<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指定ができました。
追記(2018/12/23)
移行はゆっくりとすすみ、12月上旬頃からHTTPSでのアクセスがHTTPアクセスを上回る様になりました。
HTTPSアクセスがゆっくりと増加し、HTTPアクセスもゆっくりと減少して綺麗に移行していったように感じます。特段不安になる挙動はありませんでした。