いつもご覧になられている読者様、
初めましての方こんにちわ
当ブログは関西を中心に激うまカレーのみを扱っております
当ブログはアメブロ(Ameblo)を使用しており、Twitterでも記事のリンクを貼ることがあるのですが、アメブロも時代の流れに乗って【AMP】対応になっており、それによって一部使い勝手が悪くなっております。
また、GoogleやYahoo!からの検索エンジンも同様で、通常URLの他にAMP用のURLが混在し、AMPのURLでアクセスすると大変見づらくなっております。
あまりにも見にくく(醜く)放置するわけにはいかないので、カレーと直接関係ございませんが、AMPとは何か、どうすれば通常表示されるのか簡単に解説します。
①AMPとは何か
Accelerated Mobile Pages(加速化モバイルページ)の略でAMP(アンプ)と呼ばれています。
近年、PCよりもモバイルからアクセスする人が増えた一方で、モバイルのウェブの読み込みが遅いことが多く、高速表示されるようGoogleとTwitterが開発したプロジェクトです。
これによりモバイルページの表示速度が4倍、データ量が約1/10になると言われています。
1.高速表示される仕組み
AMP対応のサイトで記事が作成されるとモバイル用の記事が2件出来ます。
(アメブロだけかも?)
AMPの記事についてはGoogle側でキャッシュ(保存)されます。
今までは、通常の記事を表示させようとするとデータを読み込むのに時間が掛かっていましたが、AMPのURLで作成された記事はGoogle側が持っているデータを返しているだけのため、すぐに表示することが可能となっております。
2.デザインが崩れる理由
高速表示される代わりにHTMLで記述しているタグに色々と【禁止】タグがあり、これによって通常記事で表示されるものがAMP記事では表示されないようになっております。
例えば、<i frame>~</i frame>が禁止タグとなっており、HTMLに貼り付けたGoogleマップやYouTube動画が読み込みされません。
インスタの<s cript></s cript>の読み込みも不可となっているようです。
現在、当ブログで確認出来ているデザイン崩れは以下のようなものです。
◆文字の装飾(色・大きさ等)がデフォルトになる。
◆Googleマップが表示されない。
(ネット検索された方はGoogleマップの部分が丸々空白に)
◆内部リンクが無効。
◆見出し(当記事にもあるような、HTMLで編集したアンダーラインの線や囲み枠)が表示されない。
◆改行して数行空白にしているものが1行のみの空白に詰めて表示される(Twitterからのリンク)
◆写真が1枚目のみ表示(Twitterからのリンク)
◆絵文字がでかくなる、非表示になる(Twitterからのリンク)
②ネット検索からの流入
多くの方がGoogleやYahoo!等の検索エンジンを使用して当ブログに辿り着いているかと思います。
検索エンジンの一覧に上がってきている記事をクリックすると当ブログのトップページや記事にリンクしますが、タイトルをクリックしただけですと、AMPの関係でレイアウトがかなり崩れ非常に見づらくなっております。
【参考例】(左)通常表示、(右)AMP表示
①文字の装飾がデフォルトに。
ケータイからのネット検索では検索一覧に【amp】やのようなマークがあるものです。
記事のタイトルをクリックすると、先程のAMPでの表示となります。
もしくは、タイトルをクリックした後、下記の手順でクリックすると通常の画面になります。
③Twitterからの流入
Twitterとアメブロの相性が悪いのか、Twitter経由でアメブロ記事を辿るとめちゃくちゃ見づらいです。
高速表示をしてもこんなに見づらいのではメリットがないのでは??
【参考例】(左)通常表示、(右)AMP表示
①文字の装飾がデフォルトに。
クリックすると
【キーワード】検索できます
関西中心の
カレーブログを
毎週月曜日12時更新中。
下のボタンより読者になってね
旅に出る都度更新予定。
【検索用ワード】
AMP、アンプ、Google、Twitter、Yahoo、ツイッター、非表示、見にくい、レイアウト、崩れる、表示されない、消える、禁止タグ、原因、対策、解決策、アメブロ、Ameblo、ブログ、ホームページ、HP、SEO、AMPとは、意味、AMPプロジェクト、読み方、説明、解説、独自ドメイン、gamp