Loading…

記事内にプロモーションが含まれています。

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

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

AMP化対応スマホ画像

所要時間目安:11

This session is using  IPv4  is established in

この記事は2016年12月22日のものです。現在は状況が異なる可能性がありますのでご注意ください。

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

目次に行く・戻る

メルカリ招待コード:

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

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

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

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

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

アドセンス336pxPC閲覧記事下表示1つ目コード


この記事を読む方へのオススメ


ただ、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('https://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 = 'https://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="(https:)?\/\/ecx.images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="https://images-fe.ssl-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="(https:)?\/\/thumbnail.image.rakuten.co.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="//thumbnail.image.rakuten.co.jp', $the_content);
 //カエレバ・ヨメレバのYahoo!ショッピング商品画像にwidthとhightを追加する
 $the_content = preg_replace('/ src="(https:)?\/\/item.shopping.c.yimg.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="https://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="(https:\/\/[^"]+?)"[^>]+?title="([^"]+?)"[^>]+?><\/iframe>/is';
 $append = '<a href="$1">$2</a>';
 $the_content = preg_replace($pattern, $append, $the_content);
 $pattern = '/<iframe[^>]+?title="([^"]+?)[^>]+?src="(https:\/\/[^"]+?)""[^>]+?><\/iframe>/is';
 $append = '<a href="$1">$2</a>';
 $the_content = preg_replace($pattern, $append, $the_content);
 //iframeでhttpを呼び出している場合は通常リンクに修正
 $pattern = '/<iframe[^>]+?src="(https:\/\/[^"]+?)"[^>]+?><\/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, カスタマイズ, カスタマイズ, スマホ, 伝えたいこと, 備忘録, 時事ネタ」同じカテゴリーの記事一覧

あなたにおすすめ

Windows10で使えなくなった筆ぐるめなどアプリケーションを使えるようにする

PC Windows10 不具合 伝えたいこと 備忘録 設定

Windows10起動しない使えないアプリを起動する方法(筆ぐるめなど)

Windows10が発売、リリースされてもう1年4ヶ月弱が経とうとしています。 その間に大幅なアップデートが2回ほどありました。 1回目は昨年2015年11月のth1511です。この時の大幅なアップデ…

もっと読む

インフィード広告アドセンス

ブログカード

Stinger6 Stinger7 WordPress カスタマイズ

WordPressブログカード作成方法

昨今、ShereHTMLでのリンク作成がここ数年メジャーでしたが、 WordPressやはてなブログにおいてはブログカードなるものが出てきました。 サイト内リンクや外部サイトリンクのサイトがカードみた…

もっと読む

インフィード広告アドセンス

小林麻耶神対応

伝えたいこと 備忘録 時事ネタ 治療

小林麻央さんの姉小林麻耶さん、見事な神対応だった…。やっぱり一味違う!!

(アイキャッチ画像出典元:小林麻耶オフィシャルブログ「まや★日記」Powered by Ameba)ここ数日世間では(職場や友人間など)、 小林麻央さんの病状のことやお姉さんの小林麻耶さんの事などの話…

もっと読む

インフィード広告アドセンス

人気記事ランキング表示

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

人気記事ランキングに順位を付けてCSSで丸く表示する方法

多くのサイトやブログにおいて人気のある記事は異なると思います。 また、 人気記事をサイトやブログに表示しておくだけで訪れてくれた人にこのブログやサイトでの人気のある記事ランキングが分かるようになります…

もっと読む

インフィード広告アドセンス

コンタクトフォーム

Stinger6 Stinger7 WordPress カスタマイズ 備忘録

続、プラグインなしでコンタクトフォームを作成方法

  先日、 WordPressでプラグインを使わないでお問い合わせ(先)フォーム(コンタクトフォーム)の作成する方法を記載しました。 (プラグインなし)   WordPressプラ…

もっと読む

インフィード広告アドセンス

スマホファースト

Stinger6 Stinger7 WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

WordPressアイキャッチ画像を自動で投稿記事に表示する方法

いまやブログにおいてアイキャッチ画像は無くてはならない存在になりつつあります。 特にWordPressにおいては、基本的にアイキャッチ画像を設定することが出来るようになっているテーマがほとんどです。 …

もっと読む

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

Googleニュース

2024-05-03

JAFの出動率が高くなるGW. ゴールデンウィークはドライブに最適な季節だが、クルマメンテナンスをするのにもいい季節。クルマの利用者が増えれば、 ...

2024-05-03

原因のひとつがエバポレーターの汚れだ。そこでエバポレーターの清掃&消臭をDIYで実施しよう。 ◇季節の変わり目に臭うクルマのエアコンは寒い冬にはヒーター ...

2024-05-02

やバイクのメンテナンスにアウトドアなど、あらゆるフィールドで活躍する同商品を、車内やガレージに備えておこう。 究極のグローブ「プレシジョン プロ ...

2024-05-02

そこでエバポレーターの清掃&消臭をDIYで実施しよう。 ◇季節の変わり目に臭う. クルマのエアコンは寒い冬にはヒーター、暑い夏場に ...

2024-05-02

... メンテナンス未経過契約残高は85.60億円(対前期末比1.5%増)となった。 燃料販売について、主に自動車用燃料給油カードにおいて、低燃費の普及により需要 ...

Total243


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください