AMPテストだってばよ

日記

4ヶ月ぶりです
((((;゚Д゚))))

先月 本格的にAMP対応のカスタマイズをしたんだけど
こちらは そのAMPのテストページです。

実際アレコレやったら どう表示されるのか わからない事が多いため 実験するページ作りました
というわけです。

AMPってそもそも なんぞや?

簡潔に言うと ものすっごい早く表示されるページです。
しかも Google検索で優遇されてるw

もう少し きちんと説明すると

Accelerated Mobile Pages の略で GoogleやTwitterなどが共同で参加しているAMPプロジェクトが構築したHTML規格のことです

普通のページに 比べると様々な制限がありますが
主にモバイルユーザーの ユーザー体験向上を目的として、WEBページの表示速度高速化などが図られています。

AMPテストだってばよ
4ヶ月ぶりです((((;゚Д゚))))先月 本格的にAMP対応のカスタマイズをしたんだけどこちらは そのAMPのテストページです。実際アレコレやったら どう表示されるのか わからない事が多いため 実験するページ作りましたというわけです。AM

このページだと ↑がAMPで表示され
↓が通常ページが 表示されます

AMPテストだってばよ
4ヶ月ぶりです ((((;゚Д゚)))) 先月 本格的にAMP対応のカスタマイズをしたんだけど こちらは そのAMPのテストページです。 実際アレコレやったら どう表示されるのか わからない事が多いため 実験するページ作りま...

違いは一目瞭然ですよねw
基本的にAMPページは シンプルな表示になります。

では 実験開始だw

文字関連

色や大きさ変更の 基本的な 文字関連を チェキラ

文字の色

色の違う文字

背景の色が違う

spanタグ使えば直書きでも 大丈夫
〆(゚▽゚*) メモメモ

文字の大きさ

大きい字

小さい字

太字

斜め

下線

こちらも同じく大丈夫
〆(゚▽゚*) メモメモ

画像・動画関連

YouTube

まあ YouTubeは大丈夫だよね
Googleの子会社だし

アニメーションGIF

アニメーションGIF

表示されるとは 思わなかったw
アニメーションGIFが行けるのは朗報です。

その他

ブログカード

ブログカードは 上手く行かないぽい
〆(゚▽゚*) メモメモ

ページの表示自体が 大きく崩れるので 結果のみ
一応 こちらのページの下部のような崩れ方になってます

修正される日はくるのだろうか
wordpressの運営とGoogle次第かなw

Googleマップのiframe埋め込みをAMP化する方法
↑を 応用すれば ブログカードも行けそうな予感‼

広告


aaa

コスケタッチペン



コメント

タイトルとURLをコピーしました