2015年8月21日

タイトルタグ重複の解消、Bloggerのモバイル?m=1問題。

スポンサードリンク

 BloggerからWordPressへ行くにあたり気付きました。(遅い)

モバイル・スマホ表示の?m=1の影響で、
同じタイトル・メタタグ等のサイトが2つある事になってしまうのですね。

遅ればせながら解消しました。

Bloggerでタイトルタグの重複は避けられない



 ウェブマスターツールでチェックしてビックリ。
タイトルタグが重複していました。

Bloggerの全ての投稿で、?m=1がある、無いで2つページがあると
みなされています。
確かに、そうなりますね。


 でももちろん、作った投稿は一つだし、
コピーサイトではありません。
ドメインが全く同じですからね。


 GoogleAdSenseや
インデックスになにか不利があったかと言うと
そうでもないです。

普通にインデックスされていますし、アクセスは徐々に伸びてきました。


 インデックスに関しては、
そういえばPCで自分のサイトを検索している時に、たまに
モバイルページがヒットしてたように思います。

モバイルページが見られたなぁなんて思いながら、
これをほっとくあたりが、私ですね。


 逆は問題ないんですね。
スマホでサイトを閲覧中に、PCのURLをクリックしても、
自動で?m=1がつくようになっています。

だからスマホ閲覧中はPCページに飛んでしまう事はほぼ
無かったと思います。

タイトルタグ重複の解消方法


 これまた簡単でした。
もともとテンプレートに入れておいて欲しいなぁと思う位簡単。


 Blogger管理画面へいきます。

テンプレート→

HTMLの編集→

<head> ~ </head>を見ましょう。


<head>内にはメタディスクリプションや、RSS、文字コード等
重要な情報が入っています。

ここに、追加します。


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


 どのあたりに追加するかと言うと、
  <head>
      <meta content='width=1100' name='viewport'/>

<b:include data='blog' name='all-head-content'/> ここです。


    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.title/></title>
    <b:else/>
      <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
     <title> Page not found | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
      </b:if>
    </b:if>



 <head>の最初にはviewportがあって、
その下にはウィンドウのタイトルの表示方法が載ってあります。

この間位に挟んでみました。

どこが一番良いのかは分かりませんが、
<head>内であれば大丈夫でしょう。

ソースコードで実際の表示を確認する



 実際にどう読み込まれるのか、ソース表示を見てみましょう。

当ブログの同じ投稿を、
PCバージョンとモバイルバージョンで見てみました。

ではソースコードを見てみます。


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

を追加した位置、つまり<head>に


PCのソースコード
<link href='http://custom.rabbitshimako.com/2015/08/blog-post.html' rel='canonical'/>

モバイルのソースコード
<link href='http://custom.rabbitshimako.com/2015/08/blog-post.html' rel='canonical'/>


が表示されていました。


 これがどういう事なのかというと、これでOKだという事です。

PCでもモバイルでも、同じソースコードを吐き出していますよね。
これで良いわけです。


 rel='canonical'を吐き出しています。

rel='canonical'はいわゆる参照する、というコードなので、
URL変更をしていない場合に使うのは珍しいのかな?

こういう使い方もアリなんですね。


 実際PCでは、全く同じPCのURLを参照している(当然そうなる)ので、
意味の無いコードになりますね。


別に問題がなさそうなのでそれは置いておいて…。



 モバイルの時に
<link href='http://custom.rabbitshimako.com/2015/08/blog-post.html?m=1' rel='canonical'/>

こんな表示になっていたら失敗。

というか、こんなコードは出ないでしょう。
逆にどうやって出したのか教えて欲しいです。

<link href='http://custom.rabbitshimako.com/2015/08/blog-post.html' rel='canonical'/>
が表示されていないという失敗は起こります。

もう一度、

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

<head>
内にきちんと設置したか確認して下さい。



 実際に見てみたい方はチェックしてみてください。
PCブラウザで、ソースコードを見て下さい。

こちらです。

PCバージョン
http://custom.rabbitshimako.com/2015/08/blog-post.html

モバイルバージョン
http://custom.rabbitshimako.com/2015/08/blog-post.html?m=1


 うまくいって良かったです。
Bloggerをお使いの方は要チェックですね。



参考にしたサイトはこちら

【Blogger】モバイルURLが違うためウェブマスターツールにタイトルとディスクリプションが重複していると怒られてしまったので対応してみた


Blogger(ブロガー)の記事をtweetされやすくするためにcanonicalタグを設置する方法



タイトルタグ重複の解消と、URL正規化やリダイレクトは別物


 通常rel='canonical'は
URLを変更した時など、元のページと同じ内容を
アップする時に重要なコードです。

このコードが無ければコピーサイト扱いを受ける可能性があります。
新しいページが。


 また、
301.302リダイレクトとか、
メタリフレッシュの時とかに出てくるrel='canonical'ですが、
今回はそれとは違う考え方です。

なので、もし今回のタイトルタグ重複の解消をしたからと言って、
Bloggerから他ブログサービスに移行した時、
?m=1の正規化(?m=1のある、無し)が出来る訳ではありません。

多分。


 こういう場合は、ちゃんと301リダイレクトをして、
新しいURLをrel='canonical'に指定します。

かつ.htaccessで?m=1のクエリパラメータを除去するコードを
追加しなければなりません。

それはまた後日アップしますのでご参考にどうぞ。

UPしました
http://custom.rabbitshimako.com/2016/01/301-htaccess.html



 こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。


 当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。

必ずデータは最新のバックアップを取っておいて下さい。


 WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。

当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。

詳細はWordPressヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク