最近ではブログ形式のサイトを制作する際に、AMPページも合わせて作るとGoogleから評価されて検索結果に表示されやすい…なんて話をよく聞きます。
真相はGoogle側から提示されることはないので、本当かどうかハッキリとしたことは言えませんが、ただAMPページを作成しているとGoogleの検索結果ではAMPページが先に上位に表示されるようになっているので、AMPページを作成しておくというのはSEO対策としては重要であることは間違いない…とはいえるでしょう。
そこで今回は、AMPページにて画像を表示させるための記述方法についてお話したいともいます！
AMPページにおける画像の記述方法とは？
AMPページにおいて、通常の<img src=”～”>といった記述では、画像自体は表示はされますがGoogle側からすると最適な記述方法とはみなされずペナルティを受ける対象になります。
なので、AMPページにおいて画像を表示させるには以下のような記述をする必要があります。
<amp-img src="画像のファイル名" width="画像の横幅" height="画像の縦幅" layout="responsive"></amp-img>
ちなみにここで重要になってくるのが
・画像の横幅の記述
・画像の縦幅の記述
・layout属性の記述
・</amp-img>の記述
になります。
<img src=”～”>の時でもwidth・heightの指定は任意でできましたが、<amp-img>～</amp-img>の場合は必ず記述する必要があります。
ちなみに画像の横幅・縦幅を記述する際にはpxはなしで数値のみの記述でOKとなっています！
また、layout=”responsive”に関しては、ブラウザの幅によって画像のアスペクト比を維持したまま拡大・縮小してくれるので通常は記述しておくことをオススメします！
そして必ず忘れないでほしいのが</amp-img>の記述。
これがないと画像がちゃんと表示されなかったりするので、必ず記述漏れがないようにしましょう。
上記のルールに従って、横幅320px・縦幅480pxのtest.pngという画像をAMPページにて表示させたい！となった際には以下のように記述します。
<amp-img src="test.png" width="320" height="480" layout="responsive"></amp-img>
上記のように記述することでAMPページにてtest.pngを表示させることが可能になります！
まとめ
以上がAMPページにて画像を表示させるための記述方法でした！
<amp-img>～</amp-img>という独自の記述方法ではありますが、AMPページで画像を表示させる際には必要な記述方法なので、是非とも覚えておきましょう！
