スポンサーリンク

AMP化対応したらアクセス数増えるの減るの?減ったのは気のせい?

投稿日:

本日の人気記事BEST10

所要時間目安: 約 11

AMP化対応スマホ画像

WordPress カスタマイズ カスタマイズ スマホ 伝えたいこと 備忘録 時事ネタ

先日、一応記事としてAMP化対応方法に関して記載いたしました。
AMP化対応方法
AMP化対応完全版

しかし、初回のときはうまくAMP化対応できずその都度改善修正を行ってきました。

でも、AMP化対応しはじめた頃から・・・・・・。急にアクセス数が3割くらい減ってきてしまっていました。

AMP化対応とその他にも同時期にプラグインにてあるものを導入したのでどちらが要因なのか原因なのかは今のところ定かではありません。

しかし、確実にその時期から3割…。いや今では3.5割くらいAMP化対応する前に比べてアクセス数が減って少なくなっています。



スポンサーリンク

ただ、WordPressのプラグインでJetpackの統計情報を見ると…。なぜかAMP化対応する以前までとさほどアクセス数に変わりはありません。

この違いがなんなのかまったく今時点では把握しきれていませんが、
Google Analyticsの設置の仕方がいけないのかもしれないのかな・・。

と考えています。

ですが、
現在一応、(たぶん)AMP化対応は投稿ページのみはできたはずです。

なので、
今後1ヶ月くらいは状況を見ながらAMP化対応をどうするのかなどを考えていきたいとは思っています。

いや、1ヶ月と言わず2週間くらいでも良いかもしれません。

来年の1月からはGoogleさんの方で(SSL対応(HTTPS)など)いろいろと変化があるようなので、

その前に何らかの対処と判断と決断をしたいなぁ。
と思っているからです。

ですが、
AMP化対応したからと言ってもニュースサイトなどではないのでそこまでの恩恵があるかどうかは、
今のところ定かではありません。

また、現在ではAMP化対応より上記したようにSSL対応(HTTPS対応)が優先されているようですが…。
今後はわかりません。

AMP化対応も優先的になる可能性もあります。

なので、

一応今回はAMP化対応が優先順位として高くなってきた場合にすぐに対処できる方法と手段を、自分自身に蓄えておくためのものとして位置付けをしておきたいと思います。

あっ、
あとJetpackのphotonを有効化すると今のところ画像が挿入されている投稿ページにおいて、
AMP化でエラーになってしまうのでJetpackのphotonは無効化しなければならなくなっています。

(一応、外部の画像に関しても置換(対応)はしているつもりなのですが・・・・・・。)

ですが、

外部リンク画像の場合もAMP化対応できるようにconvert変換?置換?できるようにできました。

function.php内に記述する内容は以下です。

//AMP判別関数
 //今回は、?amp=1パラメーターを使用(環境によっては変更する必要があるかも)
 function is_amp(){
 //AMPチェック
 $is_amp = false;
 if ( empty($_GET['amp']) ) {
 return false;
 }
 //ampのパラメーターが1かつ投稿ページの
 //かつsingleページのみ$is_ampをtrueにする
 if(is_single() &&
 $_GET['amp'] === '1'
 ){
 $is_amp = true;
 }
 return $is_amp;
 }
 //AMP用にコンテンツを変換する
 function convert_content_to_amp_sample($the_content){
 if ( !is_amp() ) {
 return $the_content;
 }
//iframe用のplaceholderタグ(amp-iframeの呼び出し位置エラー対策)
 $amp_placeholder = '<amp-img layout="fill" src="'.get_template_directory_uri().'/images/transparence.png'.'" placeholder>';
 //noscriptタグの削除
 $the_content = preg_replace('/<noscript>/i', '', $the_content);
 $the_content = preg_replace('/<\/noscript>/i', '', $the_content);
//Amazon商品リンクのhttp URLをhttpへ
 $the_content = str_replace('http://rcm-jp.amazon.co.jp/', 'https://rcm-fe.amazon-adsystem.com/', $the_content);
 //Amazonデフォルトの埋め込みタグを置換する
 $pattern = '/<iframe([^>]+?)(src="https:\/\/rcm-fe.amazon-adsystem.com\/[^"]+?").*?><\/iframe>/is';
 $append = '<amp-iframe$1$2 width="120" height="240"frameborder="0">'.$amp_placeholder.'</amp-iframe>';
 /*
 $pattern = '/(<p>)?<iframe([^>]+?)src="https:\/\/rcm-fe.amazon-adsystem.com\/[^"]+?t=([^&]+)[^"]+?asins=([^&]+)[^"]*?".*?><\/iframe>(<\/p>)?/is';
 $amazon_url = 'http://www.amazon.co.jp/exec/obidos/ASIN/$4/$3/ref=nosim/';
 $append = PHP_EOL.'<p><a href="'.$amazon_url.'">'.$amazon_url.'</a></p>'.PHP_EOL;
 */
 //$append = url_to_external_ogp_blog_card_tag($amazon_url);
 //$the_content = preg_replace($pattern, htmlspecialchars($append), $the_content);
 $the_content = preg_replace($pattern, $append, $the_content);
 //Amazon画像をブログカード化
 //$the_content = url_to_external_blog_card($the_content);
 //C2A0文字コード(UTF-8の半角スペース)を通常の半角スペースに置換
 $the_content = str_replace('\xc2\xa0', ' ', $the_content);
//style属性を取り除く
 $the_content = preg_replace('/ *?style=["][^"]*?["]/i', '', $the_content);
 $the_content = preg_replace('/ *?style=[\'][^\']*?[\']/i', '', $the_content);
//target属性を取り除く
 $the_content = preg_replace('/ *?target=["][^"]*?["]/i', '', $the_content);
 $the_content = preg_replace('/ *?target=[\'][^\']*?[\']/i', '', $the_content);
//onclick属性を取り除く
 $the_content = preg_replace('/ *?onclick=["][^"]*?["]/i', '', $the_content);
 $the_content = preg_replace('/ *?onclick=[\'][^\']*?[\']/i', '', $the_content);
//FONTタグを取り除く
 $the_content = preg_replace('/<font[^>]+?>/i', '', $the_content);
 $the_content = preg_replace('/<\/font>/i', '', $the_content);
//カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する
 $the_content = preg_replace('/ src="(http:)?\/\/ecx.images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://ecx.images-amazon.com', $the_content);
 //カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する(SSL用)
 $the_content = preg_replace('/ src="(https:)?\/\/images-fe.ssl-images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="https://images-fe.ssl-images-amazon.com', $the_content);
 //カエレバ・ヨメレバの楽天商品画像にwidthとhightを追加する
 $the_content = preg_replace('/ src="(http:)?\/\/thumbnail.image.rakuten.co.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://thumbnail.image.rakuten.co.jp', $the_content);
 //カエレバ・ヨメレバのYahoo!ショッピング商品画像にwidthとhightを追加する
 $the_content = preg_replace('/ src="(http:)?\/\/item.shopping.c.yimg.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://item.shopping.c.yimg.jp', $the_content);
//アプリーチの画像対応
 $the_content = preg_replace('/<img([^>]+?src="[^"]+?(mzstatic\.com|phobos\.apple\.com|googleusercontent\.com|ggpht\.com)[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="75" height="75" sizes="(max-width: 75px) 100vw, 75px"></amp-img>', $the_content);
 $the_content = preg_replace('/<img([^>]+?src="[^"]+?nabettu\.github\.io[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="120" height="36" sizes="(max-width: 120px) 100vw, 120px"></amp-img>', $the_content);
//imgタグをamp-imgタグに変更する
 $res = preg_match_all('/<img(.+?)\/?>/is', $the_content, $m);
 if ($res) {//画像タグがある場合
foreach ($m[0] as $match) {
 //変数の初期化
 $src_attr = null;
 $url = null;
 $width_attr = null;
 $width_value = null;
 $height_attr = null;
 $height_value = null;
 $alt_attr = null;
 $alt_value = null;
 $title_attr = null;
 $title_value = null;
 $sizes_attr = null;
//src属性の取得(画像URLの取得)
 $src_res = preg_match('/src="([^"]+?)"/is', $match, $srcs);
 if ($src_res) {
 $src_attr = ' '.$srcs[0];//src属性を作成
 $url = $srcs[1];//srcの値(URL)を取得する
 }
//width属性の取得
 $width_res = preg_match('/width="([^"]*?)"/is', $match, $widths);
 if ($width_res) {
 $width_attr = ' '.$widths[0];//width属性を作成
 $width_value = $widths[1];//widthの値(幅)を取得する
 }
//height属性の取得
 $height_res = preg_match('/height="([^"]*?)"/is', $match, $heights);
 if ($height_res) {
 $height_attr = ' '.$heights[0];//height属性を作成
 $height_value = $heights[1];//heightの値(高さ)を取得する
 }
//alt属性の取得
 $alt_res = preg_match('/alt="([^"]*?)"/is', $match, $alts);
 if ($alt_res) {
 $alt_attr = ' '.$alts[0];//alt属性を作成
 $alt_value = $alts[1];//altの値を取得する
 }
//title属性の取得
 $title_res = preg_match('/title="([^"]*?)"/is', $match, $titles);
 if ($title_res) {
 $title_attr = ' '.$titles[0];//title属性を作成
 $title_value = $titles[1];//titleの値を取得する
 }
$class_attr = null;
 //widthとheight属性のないものは画像から情報取得
 if ($url && (empty($width_value) || empty($height_value))) {
 $size = get_image_width_and_height($url);
 if ($size) {
 $class_attr = ' class="internal-content-img"';
 $width_value = $size['width'];
 $width_attr = ' width="'.$width_value.'"';//width属性を作成
 $height_value = $size['height'];
 $height_attr = ' height="'.$height_value.'"';//height属性を作成
 } else {
 //外部サイトにある画像の場合
 $class_attr = ' class="external-content-img"';
 $width_value = 300;
 $width_attr = ' width="300"';//width属性を作成
 $height_value = 300;
 $height_attr = ' height="300"';//height属性を作成
 }
 }
//sizes属性の作成(きれいなレスポンシブ化のために)
 if ($width_value) {
 $sizes_attr = ' sizes="(max-width: '.$width_value.'px) 100vw, '.$width_value.'px"';
 }
//amp-imgタグの作成
 $tag = '<amp-img'.$src_attr.$width_attr.$height_attr.$alt_attr.$title_attr.$sizes_attr.$class_attr.'></amp-img>';
 // echo('<pre>');
 // var_dump($srcs);
 // var_dump(htmlspecialchars($tag));
 // var_dump($widths);
 // var_dump($heights);
 // var_dump($alts);
 // var_dump($titles);
 // echo('</pre>');
//imgタグをamp-imgタグに置換
 $the_content = preg_replace('{'.preg_quote($match).'}', $tag , $the_content, 1);
 }
 }
 //画像タグをAMP用に置換
 $the_content = preg_replace('/<img(.+?)\/?>/is', '<amp-img$1></amp-img>', $the_content);
// Twitterをamp-twitterに置換する(埋め込みコード)
 $pattern = '/<blockquote class="twitter-tweet".*?>.+?<a href="https:\/\/twitter.com\/.*?\/status\/(.*?)">.+?<\/blockquote>.*?<script async src="\/\/platform.twitter.com\/widgets.js" charset="utf-8"><\/script>/is';
 $append = '<p><amp-twitter width=592 height=472 layout="responsive" data-tweetid="$1"></amp-twitter></p>';
 $the_content = preg_replace($pattern, $append, $the_content);
// vineをamp-vineに置換する
 $pattern = '/<iframe[^>]+?src="https:\/\/vine.co\/v\/(.+?)\/embed\/simple".+?><\/iframe>/is';
 $append = '<p><amp-vine data-vineid="$1" width="592" height="592" layout="responsive"></amp-vine></p>';
 $the_content = preg_replace($pattern, $append, $the_content);
// Instagramをamp-instagramに置換する
 $pattern = '/<blockquote class="instagram-media".+?"https:\/\/www.instagram.com\/p\/(.+?)\/".+?<\/blockquote>/is';
 $append = '<p><amp-instagram layout="responsive" data-shortcode="$1" width="592" height="592" ></amp-instagram></p>';
 $the_content = preg_replace($pattern, $append, $the_content);
//YouTubeのURL埋め込み時にiframeのsrc属性のURLに余計なクエリが入るのを除去(力技;)
 $the_content = preg_replace('/\??(version=\d*|(&|&amp;|&#038;)rel=\d*|(&|&amp;|&#038;)fs=\d*|(&|&amp;|&#038;)autohide=\d*|(&|&amp;|&#038;)showsearch=\d*|(&|&amp;|&#038;)showinfo=\d*|(&|&amp;|&#038;)iv_load_policy=\d*|(&|&amp;|&#038;)wmode=transparent)+/is', '', $the_content);
 // YouTubeを置換する(埋め込みコード)
 $pattern = '/<iframe[^>]+?src="https?:\/\/www.youtube.com\/embed\/([^\?"]+).*?".*?><\/iframe>/is';
 $append = '<amp-youtube layout="responsive" data-videoid="$1" width="800" height="450"></amp-youtube>';
 $the_content = preg_replace($pattern, $append, $the_content);
// Facebookを置換する(埋め込みコード)
 $pattern = '/<div class="fb-video" data-allowfullscreen="true" data-href="([^"]+?)"><\/div>/is';
 $append = '<amp-facebook layout="responsive" data-href="$1" width="500" height="450"></amp-facebook>';
 $the_content = preg_replace($pattern, $append, $the_content);
//Facebook動画埋め込み対策
 $the_content = preg_replace('/ +allowTransparency(=["][^"]*?["])?/i', '', $the_content);
 $the_content = preg_replace('/ +allowFullScreen(=["][^"]*?["])?/i', '', $the_content);
 //TED動画埋め込み対策
 $the_content = preg_replace('/ webkitAllowFullScreen/i', '', $the_content);
 $the_content = preg_replace('/ mozallowfullscreen/i', '', $the_content);
//タイトルつきiframeでhttpを呼び出している場合は通常リンクに修正
 $pattern = '/<iframe[^>]+?src="(http:\/\/[^"]+?)"[^>]+?title="([^"]+?)"[^>]+?><\/iframe>/is';
 $append = '<a href="$1">$2</a>';
 $the_content = preg_replace($pattern, $append, $the_content);
 $pattern = '/<iframe[^>]+?title="([^"]+?)[^>]+?src="(http:\/\/[^"]+?)""[^>]+?><\/iframe>/is';
 $append = '<a href="$1">$2</a>';
 $the_content = preg_replace($pattern, $append, $the_content);
 //iframeでhttpを呼び出している場合は通常リンクに修正
 $pattern = '/<iframe[^>]+?src="(http:\/\/[^"]+?)"[^>]+?><\/iframe>/is';
 $append = '<a href="$1">$1</a>';
 $the_content = preg_replace($pattern, $append, $the_content);
//iframeをamp-iframeに置換する
 $pattern = '/<iframe/i';
 $append = '<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"';
 $the_content = preg_replace($pattern, $append, $the_content);
 $pattern = '/<\/iframe>/i';
 $append = $amp_placeholder.'</amp-iframe>';
 $the_content = preg_replace($pattern, $append, $the_content);
//スクリプトを除去する
 $pattern = '/<script.+?<\/script>/is';
 $append = '';
 $the_content = preg_replace($pattern, $append, $the_content);
return $the_content;
 }
 add_filter('the_content','convert_content_to_amp_sample', 999999999);//なるべく後で行う

 

あとは、AMP用のスタイルシートstyle.cssを作成すればページ単位ではAMP出来ているはずです。

ただ・・・・・・。

冒頭にも書きましたが、
AMP化に正式に対応した後にアクセス数がセッションでやはり3.5割から4割程度減っています。

AMP用にGoogle Analyticsのプロパティを新規作成することが推奨されていますが、

ページ単位のみの場合にプロパティって作成できなくない?

タグマネージャーにて振り分けるということも出来ますが・・・・・・。

ただ、
カスタムレポートを見るとアクセス数は変化がないのです。

Google Analyticsのユニバーサル(U・A)だと、アクセス数が(セッション数ですが、)なぜか減ってしまっています。

AMPからのアクセス数がしっかりとちゃんと計測できていないのが原因かと思われますが・・・・・・。

これは、
そのままでも良いのかもしれませんが何か気持ち悪いです。

フィルタ設定などで何とかできそうですが良く分かっていません。o(´^`)o ウー

タグマネージャーにての設定方法であればできそうですが、

それがGoogle Analyticsのアクセス数のサマリーすべてのコンテンツに反映されるのかどうか・・・・・・。

スポンサーリンク

これから、タグマネージャーにて設定してみようかなぁと思ってもいます。

その後の詳細はまたしばらく様子を見てから記事にしたいと思います。

Google検索からのアクセス数は1000近く減ってしまいました。
が、上記したようにカスタムレポートにおいては変化がありません。

う~ん、悩ましい・・・・・・。

ただ、ひとつ言えることはAMP化対応したページを見ると

とってもシンプルで目的とする記事のみに集中はできますし、下手にjavaScriptなどで装飾したりしてページ表示速度が遅くなってしまうこともないのでなんだか新鮮な感じがします。

AMP化対応スマホ画像

これだけは間違いないです!!どうですか?シンプルですよね?

-WordPress, カスタマイズ, カスタマイズ, スマホ, 伝えたいこと, 備忘録, 時事ネタ

おすすめ記事一部広告

スポンサーリンク


  • この記事を書いた人
  • 最新記事

izu

はじめまして、izuと申します。医療ミスにより長胸神経麻痺になってしまい若干の障害がありブログをさせていただいています。旦那との共同運営になりつつありますがよろしくお願いいたします。

Follow Me !

よろしかったらシェアよろしくお願いします。



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!




Copyright© WordPressデビュー津々浦々 , 2017 AllRights Reserved Powered by AFFINGER4.