画像タグに要注意!『AMP』の書き方と17の禁止タグ・19の専用タグまとめ

amp

やぁ、フィギュアばかりいじってるユトピ(@yutopi60pa)だよ。

本日初の運転免許証の更新に行ってまいりました。
なかなか煩雑な手続きでしたが、ある程度システム化はしていたので流れ作業的な感じになっていましたので迷うことはなかったですね。

ちなみに初回更新は違反した人と同じ講習を受けるので、ガラが悪い率が高かった気がしましたね。

ということで今回はまた「AMP」です。
AMPに関しては前回の記事にて説明しましたね。

ブロガーは対応すべき!表示速度が爆速になる『AMP』をざっくり解説!

ざっくりおさらいしますと、「必要最低限なファイルのみ読み込み、ページ表示を爆速にする」のがAMPです。
Google検索結果にからみた場合は1秒以下のスピードで表示されるので、ユーザビリティが向上するというものですね。

そして今回は早速AMPについてのHTMLの書き方についてまとめていこうと思います。
一部面倒な部分もあるのですが、これは覚えておきましょう。


AMP用HTMLテンプレ

とりあえずまずは一式を書いていきましょう。




これが基本形。
特にヘッダー内は特徴的ですね。

細かくみていきましょう!

<!doctype html>

HTMLのバージョン設定は変わりませんね。HTML5版での設定です。


<html ⚡>

<html>はampの場合、⚡を付けます。または<html amp>でもOKですよ。


metaタグ

文字コード設定はそのままで、viewport設定は必須なのでしっかり書いておきましょう。


linkタグ canonical属性

AMPで作られたページURLには最後に「/amp」「&amp=1」などが付加されます。
その際、Googleに元々のURLとAMPページが重複ページとして認識されないように、linkタグにはcanonical属性を設定しましょう。
canonical属性とは1つのページで複数のURLが存在する場合に、どのURLに統一させるかを指定する属性です。


boilerplate指定

続いてはAMPの高速表示に必要な記述です。ちなみに決まり文句ですので内容は理解しなくても大丈夫です。

AMPのライブラリの読み込み

AMPを使うためにAMPのライブラリを読み込む必要があります。
これもなにも考えず書きましょう。

ちなみにこのAMPのJavascriptファイル以外のJavascriptファイルは読み込むことはできませんのでご注意くださいね。

以上が最初に書く必要のあるコードです。
この辺はなにも考えずにコピペしちゃいましょう。


禁止されているHTMLタグ

AMPにはそのまま使用することができないタグがあります。
代表的なのだと<img>タグ。こちらはそのまま記述しても表示されません。

そんな禁止タグをご紹介しましょう。

img 代用タグあり。
video 代用タグあり。
audio 代用タグあり。
iframe 代用タグあり。
script AMPライブラリ読み込み以外での使用禁止。
base 禁止
frame 禁止
frameset 禁止
object 禁止
param 禁止
applet 禁止
embed 禁止
form 禁止 今後対応予定。
input 禁止
textarea 禁止
select 禁止
option 禁止

これらのタグはAMPでは使用することができません。
使用した場合、AMPページとして認識されませんのでご注意ください。
逆にこれ以外のタグは使うことができます。

ほとんど使用頻度が少ないタグですね。
上部の使用頻度が高めのタグはAMPの代用タグがありますので、そちらは次の章で紹介します。


AMP用タグ

先ほど禁止されたタグの中にどうしても使いたいものもあると思います。
特に<img>タグなんかは使用頻度はめちゃくちゃ高い。

ということでAMP専用タグの一覧です。

amp-img 画像を表示する。width、heightが必須。alt属性が使用可能。
amp-image-lightbox 画像のライトボックスの表示。
amp-lightbox ライトボックスの表示。
amp-carousel カルーセルの表示。
amp-ad 広告表示用タグ。アドセンスを使用する場合はこちらを使います。
amp-video 動画表示用タグ。
amp-brightcove 動画プレーヤーの表示。
amp-iframe iframeとして使用可能。
amp-audio 音声ファイル用タグ。
amp-anim アニメーションGIF用タグ。
amp-font カスタムフォントの表示。
amp-fit-text 内容にフィットするフォントを表示する。
amp-youtube Yotube動画の表示タグ
amp-facebook Facebook投稿を表示
amp-twitter Twitterの投稿を表示。
amp-instagram Instagramの投稿を表示。
amp-pinterest Pinterestの投稿を表示。
amp-vine Vine動画を表示。
amp-install-serviceworker ServiceWorkerをインストール。


以上です。
なかなか多いですが、SNSもサポートされているのはいいですねー。
ちなみにvineは終了するので使うことはなくなるかも。

まとめ

ということでこれがAMPの基本的な書き方とタグについてです。
結構制限が多いように見えますね。

特に<img>タグなんかは使用頻度高いので、一括変換することができないときは、1つ1つ対応する必要があるので大変な手間になります。

WordPressなどでブログ運営していればうまく変換できるプラグインもありそうなので、サイトに合わせて対応していくようにしましょう。


たくさん書いて疲れた(´・ω・`)。

コメントを残す

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