{D33509E8-87F0-4956-B6CE-1B29CB3BD832}

 

 

いつもご覧になられている読者様、

初めましての方こんにちわカナヘイうさぎカナヘイきらきら

当ブログは関西を中心に激うまカレーのみを扱っておりますカレー

 
 
当ブログはアメブロ(Ameblo)を使用しており、Twitterでも記事のリンクを貼ることがあるのですが、アメブロも時代の流れに乗って【AMP】対応になっており、それによって一部使い勝手が悪くなっております。
 
また、GoogleやYahoo!からの検索エンジンも同様で、通常URLの他にAMP用のURLが混在し、AMPのURLでアクセスすると大変見づらくなっております。
 
 
あまりにも見にくく(醜く)放置するわけにはいかないので、カレーと直接関係ございませんが、AMPとは何か、どうすれば通常表示されるのか簡単に解説します。
 
 

【流れ】

①AMPとは何か

②ネット検索からの流入

③Twitterからの流入

 

注意現在、アメブロアプリからですと内部リンクが正常に作動しません。

お手数ですが、そのままスクロールするか、画面右上の地球をクリックしてインターネットのページで表示するとリンクが有効となります。 

 
 
 
  

①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表示
 
①文字の装飾がデフォルトに。
 
 
 
②Googleマップが非表示に。
 
 
 
③見出し線が非表示に。

 
 
【通常表示の仕方】
 
検索一覧ではAMP対応のサイトは赤枠で囲った表示があります。
 
 
ケータイからのネット検索では検索一覧に【amp】や雷のようなマークがあるものです。
 
 
記事のタイトルをクリックすると、先程のAMPでの表示となります。
 
 
 
一番簡単に通常表示させる方法は、赤枠で囲った【gamp.ameblo.jpで開く】をクリックするだけで通常表示となります。

 
 
もしくは、タイトルをクリックした後、下記の手順でクリックすると通常の画面になります。
image
 
 
 
 
 
 

③Twitterからの流入


 
Twitterとアメブロの相性が悪いのか、Twitter経由でアメブロ記事を辿るとめちゃくちゃ見づらいです。
高速表示をしてもこんなに見づらいのではメリットがないのでは??
 
 
【参考例】(左)通常表示、(右)AMP表示
 
①文字の装飾がデフォルトに。
更に最初の絵文字が馬鹿でかく(笑)、以降の絵文字は非表示に。
 
 
 
②Googleマップが非表示に。
 
 
 
③見出し線、その他が非表示に。
左の通常表示が右のAMP表示では、赤枠で囲った1/3に圧縮。これは酷い。笑

 
 
【通常表示の仕方】
 
Twitter経由でアメブロ記事をご覧になる場合の通常表示のやり方です。
 
①赤枠のリンクをクリック。
 
 
 
②このままだと簡易表示になりますので、右下のSafari(サファリ)をクリック。
 
 
 
②上部にURLが出てきました。
【gamp.】と言うのはアメブロのAMPです。
 
 
 
③この【gamp.】の記述を消します。
 
 
 
④通常のURLになりました。
これで、右下の【開く】ボタンをクリック。



⑤これで通常表示になりました!!
 
 
 
 
 
 


 
 
 

 

Twitterやってますカレー

 

 

クリックすると

【キーワード】検索できますカレー

右矢印ブログ内検索

 

 

関西中心の
カレーブログを
毎週月曜日12時更新中。

下のボタンより読者になってねつながる花2つながる花1つながる花2とびだすうさぎ2カナヘイきらきらカナヘイハート

フォローしてね

 
 
ついに世界へ旅に出ちゃった。

旅に出る都度更新予定。つながる花2つながる花1つながる花2とびだすうさぎ2カナヘイきらきらカナヘイハート

右矢印TRIP SPICE(インデックス)
 

 
【検索用ワード】
AMP、アンプ、Google、Twitter、Yahoo、ツイッター、非表示、見にくい、レイアウト、崩れる、表示されない、消える、禁止タグ、原因、対策、解決策、アメブロ、Ameblo、ブログ、ホームページ、HP、SEO、AMPとは、意味、AMPプロジェクト、読み方、説明、解説、独自ドメイン、gamp