Loading…

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

フォレスト出版
¥2,047 (2024/03/15 08:52時点 | Amazon調べ)

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化対応スマホ画像

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

あなたにおすすめ

おすすめSSD

PC カスタマイズ 伝えたいこと

SSD換装におすすめSSDは1TBのCrucialのMX500

もう数年前にはSSDは結構な国内PCメーカーの上位機種パソコンには搭載され始めてきていました。私のパソコンはもう8年目なので、そこそこ古い部類かと思います。ですが、途中途中にメモリの増設(8GB×2枚…

もっと読む

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

Facebook携帯番号対処方法

WordPress カスタマイズ 備忘録

WordPressでOGP設定方法。プラグイン使わない。

多くのブログやサイトで今ではFacebookやTwitterのOGP設定がされています。 なので、 OGP設定はある意味SEO的にもFacebookなどのSNSを使用している人にとっては、 必須の設定…

もっと読む

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

アイキャッチ画像自動設定

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

アイキャッチ画像を設定し忘れないように自動で設定する方法

WordPressやFC2ブログなどで、アイキャッチ画像を設定しなければならないのは意外と手間ですよね。 以前に、アイキャッチ画像を設定し忘れた時にランダムに表示させる方法を記事として紹介しました。 …

もっと読む

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

おすすめCANONプリンター複合機

PC 伝えたいこと 設定

おすすめプリンター複合機CANON・EPSONでもなくBROTHERかHP(ヒューレット・パッカード)

現在、多くの家電量販店や価格ドットコムなどで人気機種ランキングや売上数ランキングなどでじょういを占めているCANONとEPSONのインクジェットプリンター。しかし、よくランニングコストを考えると、長期…

もっと読む

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

ニュースとは何か

伝えたいこと 備忘録

ニュースとは。NEWSとは?どういう意味なのか考察…。

ニュース…単語のみの意味を考察すると…。 ニュースとは→新しい情報・事柄(etc)などタチ(達)の総称。 であろうと考えています。

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

バイラルメディア風SNSボタン

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

Stinger6、Stinger7でバイラルメディア風ボタン設置方法

ここのところ、よくブログサイトや大手企業のニュースサイトなどの記事の下に、 上記の画像のようなバイラルメディア風のSNSボタンが設置されているのをよく見かけると思います。 これまでは、とくに気にしなか…

もっと読む

おすすめの記事一部広告

おすすめ!!

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

おすすめ2

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

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

Multiplex 広告

Googleニュース

2024-04-19

それによりカーメンテナンスエリアとタイヤ売場に最大横幅7.7mの大開口を実現、車両の出し入れを容易に出来る幅を確保しました。「ロッドマン」は通常のホール ...

2024-04-19

... メンテナンスパック」だが、ディーラーによっては ... 新車 日産 特別仕様 軽自動車 輸入 限定 電気自動車 ... カテゴリー カー用品・グッズ情報 自動車 ...

2024-04-19

修理・自動車整備に関するご相談や困りごとなどを解決する高橋巨樹プロのコラムは必見。 今回のコラム記事は『【驚きの事実! 交換不要!?】 ATF / CVTF交換 ...

2024-04-19

【4月19日 CGTN Japanese】秦の始皇帝陵1号銅馬は18日、3年にわたるメンテナンスを経て、秦の始皇帝陵銅馬博物館に運ばれ、展示スペースに設置されまし ...

2024-04-19

秦の始皇帝陵1号銅馬は18日、3年にわたるメンテナンスを経て、秦の始皇帝陵銅馬博物館に運ばれ、展示スペースに設置されました。秦の始皇帝陵1号、2号銅 ...

Total236


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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