AMP 対応可 やめました
AMPとは? デザインが崩れる?

ブログ運営について

当ブログでは
よくお越しいただくお客様も
許可を取った上で稀に登場いたします
(仮名:Aさん/Bさん/お客様として)

宜しくお願いいたします


Rito
Rito

AMP対応やめました!!

冷やし中華が
終わる時期だから
やめたんか?

相方
相方
Rito
Rito

ちゃっちゃちゃ
ちゃうわーっ!!

普段に増して
めんどくせー
ノリだな・・・

相方
相方

AMPとは?

Rito
Rito

極端に言ってしまえば

AMPに対応すると
モバイルページが
高速になりますよー
っと
思って頂ければ
OKかなと思います

検索した時に
稀に出てくる
⚡マークがついたページが
AMPに対応している
サイトです

いやいやいや・・・
ざっくり過ぎるだろ

相方
相方
Rito
Rito

駄目か・・・

AMPとは
Accelerated Mobile Pages
頭文字をとった名称です

上記でも記載した通り
URLの横や画像の右端に
⚡のマークがついているのが
AMP対応しているページです

目的としては
パソコンよりも
スマートフォンユーザーが
多いネット社会ですので
モバイルページを
高速に表示させよう

と言うことです

Googleが推進している
と言う事もあり
AMP対応しようと
行動している人は多いです

Rito
Rito

如何でしょう?

最初からそうに書けよ

相方
相方
Rito
Rito

AMP系の記事って
結構あるからいらんかと;

・・・・。

で?
なぜやめたの?

相方
相方
Rito
Rito

そうそう!!
聞いて聞いて!!

めんどくせーよぅ・・

今日のノリめっちゃ
めんどうくせーよぅ

相方
相方

デザインが崩れる

Rito
Rito

一番の問題は
デザインが崩れる事です

結構デザインに関する
記事見かけるよね

相方
相方

AMP対応すると
AMP HTMLで構成される

Rito
Rito

AMPページは
・AMP HTML

・AMP JS

・AMP Cache
で、構成されます

上記の三つの中で
AMP HTMLの影響で
デザインが崩れてしまいます

なるほど。
わからん

相方
相方

AMP HTMLはかなり限定される

この手の記事は多いので
詳細に関しては省いて
簡単に説明いたします

簡単に言ってしまうと

サイトの読み込みに
時間がかからないようにする
という事が目的なので
読み込みや描画の負荷を減らし
表示を早くしてます


その為
通常のHTMLのような
自由度があまりなく
制限されてしまうと言う事です

んー・・・

別にAMPは
やらなくても良いの?

相方
相方
Rito
Rito

いや・・・・
出来る事なら
やった方が良いよ

元々がシンプルな構成であれば
AMPはおすすめです


Google自体も推進してますし←

応用できる要素も作られている

以前は
複雑な機能を持ったサイトには
向かなかったのですが
要素が追加されたことによって
段々と対応ができるように
なっては来ています


とは言うものの
出来る限りシンプルな構成にして
表示を早くすると言う事ですから
複雑のサイトをAMP仕様にするのは
かなり手間がかかります

例えばこのブログの場合

Rito
Rito

パンダはこっち

相方はこっち

相方
相方

このような形で吹き出し機能を
使用しています

これを
そのままAMP対応してしまうと
どうなるかと言うと

このようなイメージになります

パンダはこっち

Rito
Rito

相方はこっち

相方
相方

ごちゃごちゃになって
記事が読みにくそうだな

相方
相方
Rito
Rito

読みにくそうじゃない
読みにくいのっ!!

お、おう・・・

相方
相方

というわけで

Rito
Rito

AMP対応やめました

そうですか・・・

相方
相方

改善策はないと言うわけではないけども
私の場合は、今は良いかなと言う考えです


ちょっと頑張って
このブログ以外のブログで
AMP導入して約半年
AMPを解除して約半年
合計1年の期間で見てみたのですが
正直PV数含めさほど変わらなかった

結果が良ければ
このブログにも導入しよう

と考えていたのですが
今は良いかなと言う結果になりました

寧ろ解除後の方が
微妙にPV数は上がった・・・


恐らく
AMPになって見づらくなり
直帰率が上がってた

構成にもよると思うが
シンプルな構成であれば
AMPの方がメリットはある

と考えますが
複雑なサイトであれば
今はあまり向かない

と個人的には感じました

あくまでも個人的にはです

でもAMPって
どうやめるの?

相方
相方
Rito
Rito

それは簡単ですよ

AMPを無効にする

恐らく
この記事を見てくださっている方は
WordPressを使っていると思います

その場合、大体の方が
プラグインテーマかの
いづれかでAMPをしていると思います

プラグインの削除(又は無効)

プラグインでAMPにしている人は
プラグインを無効にすれば解除されます

とりあえず直近で
AMP対応にする気がないならば
プラグイン削除しておいた方が良い

と個人的には思います

プラグインが多すぎると
WordPressのダッシュボードが
重くなる原因にもなるため

Rito
Rito

無駄なものは
ポイしましょ♪

使い物にならなくなったら
私も簡単にポイするのね?

相方
相方

何を言っているんだ
こいつは・・・・

Rito
Rito

テーマの機能の場合

テーマによっても
多少やり方は異なるのですが
大体は同じと思います

まずは
WordPressの管理画面で
「(テーマ名) 設定」

テーマによって名称は違うと思いますが
「(テーマ名) 設定」又は「一般設定」など
クリックします

次に
「AMP」設定の項目を探します

その中に
AMP機能を有効化」などの
チェックボックスがあると思います

そのチェックボックスを
OFFにします

Rito
Rito

これで完了です

なるほど・・・
これだけで良いの?

相方
相方
Rito
Rito

いえ・・・・
もう一個だけ;

301リダイレクトの設定

301リダイレクト
なんだそれ・・・

相方
相方
Rito
Rito

404エラーってわかる?

あーなんか
見たことあるかも

相方
相方

404エラーとは?


404 not found
又は
お探しのページは見つかりませんでした
表示されるエラーです

404301なんちゃら
どんな関りが・・・?

相方
相方
Rito
Rito

・・・・。
(なんちゃらって;)

AMPを利用していた場合は
URLもAMP用のURLになっています

例えば
Googleの検索エンジンで
検索されたURLがAMPのURLだと
301リダイレクトをしていないと
404エラーのページに行ってしまい
自分のサイトを見てもらえない

と言う事です

それは大変だ;

相方
相方
Rito
Rito

それなので
301リダイレクトで
AMPではないURLに
誘導させてあげる

と言う事です

 .htaccess編集にコード追加

うわっ・・・・

コード追加って
言われるだけで
だるいわぁ・・;

相方
相方
Rito
Rito

そう言うなって

追加するソース

  1. <IfModule mod_rewrite.c>
  2. RewriteEngine On
  3. RewriteCond %{QUERY_STRING} (^|&)amp=1(&|$)
  4. RewriteRule ^(.*)$ https://(domain.name)/%{REQUEST_URI}? [R=301,L]
  5. </IfModule>

コピペする前にご注意
ソースコードを記載すると
そのまま気にせずに
貼ってしまう人もいます


このコードは
上記の「04.」の部分
https://(domain.name)

を変更しなくてはいけません

ご自身のドメイン名に変更です

ドメインネームを変更したら
.htaccess編集に追加

上記のコードの
ドメインネームを変更したら
.htaccess編集に追加します

.htaccess編集フォルダを開くと
WordPressの場合は
下記のようなコードがかかれています

これはコピペ用ではありません
  1. # BEGIN WordPress
  2. <IfModule mod_rewrite.c>
  3. RewriteEngine On
  4. RewriteBase /
  5. RewriteRule ^index\.php$ - [L]
  6. RewriteCond %{REQUEST_FILENAME} !-f
  7. RewriteCond %{REQUEST_FILENAME} !-d
  8. RewriteRule . /index.php [L]
  9. </IfModule>
  10. # END WordPress

このコードの上に
先ほどご自身のドメインに
変更をしたコードを入力します

AMP,301リダイレクト,無効,設定,方法
Rito
Rito

これで完了です

ご注意

.htaccessファイルを変更する際は
はじめての方は出来る限り
技術者などと一緒に行ってください


間違えてしまうと
エラーでWordpressにも
入れなくなります

.htaccessファイルの変更は
自己責任でお願いいたします

おわりに

今回は

・AMPやめました宣言←(需要無し)
・AMPについて
・AMPの無効化について
・301リダイレクト設定について

Rito
Rito

上記に関しての
記事でした