AMPとは?
一言でいうと、Googleさんが進めているプロジェクトで、モバイルページを素早く表示されるものです。
噂によると、既存より4倍も速いとか・・・
セールスレター型のランディングページは、ページが縦に長〜〜くなってしまうので、どうしても表示速度が遅いという欠点があったのですが、ampにしたら、ほぼいい感じのスピードになりました。
どのくらい速くなったのか?
Google developerという下記のサイトで比較してみました!
まずは、既存のサイトからです。頑張って表示速度が速くなるようにしていたのですが、結果は如何に!!
既存サイトはこちら
モバイルでの表示が52ポイント
PCでの表示が81ポイント
一応、平均ですが、まだ改善出来そうな気がします。
ちなみにwordpressでの制作です。
では、今日出来立てホヤホヤのampサイトの結果です。
なんと、モバイルでの表示が91ポイント
PCでの表示は98ポイント
おおお!いい感じです。
ちなみに、どちらのサイトも完全レスポンシブです。
ampは構造化データが必要
Google先生が、構造化テストツール
構造化データ マークアップ支援ツール
を作ってくれているので、それほど難しくなく作れる?かも(嘘)
ええ。苦労しました。二度とやりたくないくらい。
でもね。
絶対みんなも大変な思いをしている筈!ってことで
えっ内容だって?
しょうがないな〜〜
じゃ上から行くよ
@type
いろいろな種類があるけど、実店舗にお客さんが来る。セミナーをする。ということで、LocalBusinessにしました。
ブログはblog、記事はNewsArticle。企業・団体ならOrganization。種類によって書く内容が大きく変わるから注意!
LocalBusinessで必要なものと、NewsArticleで必要なものが違うってこと。
今回は、LocalBusinessとOrganizationで迷った。。。
name
屋号や社名です。ブランド名はまた別なので注意。サイト名にしてもOKですよ。
telephone
はい。電話番号です。
そうそう、+81を電話番号の前につけて、市外局番の最初の0を取って書きます。海外から日本に電話をかける時と同じですよ。
address
はい、住所です。日本語で入れるべきなのか、英語で入れるべきなのか、真剣に悩んだのですが、日本語にしました。
addressCountryは、日本語NGです。JPの大文字にしてね。
postalCodeは、郵便番号。ハイフンを入れておいたよ。
geo
緯度と経度ですね。グーグルマップから探して入れましょう。
brand
ブランド名を入れます。
alternateName
他に名前があれば、入れる項目。ブランドがアルファベットだったら、読み方を入れておくといいかも。
photo
店舗の写真です。https://schema.org/によると
A photograph of this place.
imageはアイテム(商品やサービスの写真)
openinghours
営業日と営業時間
priceRange
必須ではないのですが、プライス。金額ですね。
url
サイトのurlです。
description
ツイッターカードとかにも、使うものですが、コピペで・・・
founder
創業者です。今の社長という意味ではないので注意。
現在の社長に該当するものが無い(汗)
sameAs
ツイッターやフェイスブックなどのurlを記載します。
mainEntityOfPage
メインのwebサイトですね。
image
商品の写真ってことになっているので、サービスの写真を載っけました。
下層ページなら、パンくず・・・
はい。パンくずですよ。
まだ、やって無いから、ここ見といて・・・
フェイスブックやツイッターのカードも必要
まだ、あるとは・・・
OGPってやつです。トップページ用のを載っけておきます。下層ページは違うので・・・
内容は・・・勘弁して・・・
めちゃくちゃ大変
まあ、大変なんですよ。
趣味のサイトでも無い限り、最低限必要なものばかり・・・
ぶっちゃけ、素人には無理。
サイト制作してくれる企業に依頼しても、ここまで書いてないこともあるのが実情。
だって、画面に表示されないところだし、決まってないことが多いし、知らない業者の人だっています。
私のサイト調べて!という方がいらっしゃれば、下記のサイトから問い合わせをしてくださいね。