広告

AMPでランぺを作ってみた

ampサイトが出来た WEB
この記事は約5分で読めます。

AMPとは?

一言でいうと、Googleさんが進めているプロジェクトで、モバイルページを素早く表示されるものです。

噂によると、既存より4倍も速いとか・・・

セールスレター型のランディングページは、ページが縦に長〜〜くなってしまうので、どうしても表示速度が遅いという欠点があったのですが、ampにしたら、ほぼいい感じのスピードになりました。

どのくらい速くなったのか?

Google developerという下記のサイトで比較してみました!

PageSpeed Insights

まずは、既存のサイトからです。頑張って表示速度が速くなるようにしていたのですが、結果は如何に!!

既存サイトはこちら

日本脳機能トレーニングセンター
学校に行けない、授業についていけない、といったADHDやPTSD等の精神疾患を改善したいお子さんをお持ちのご家族向けの“ニューロフィードバック療法”は、心理療法の1つです。 ニューロフィードバックは脳を適切な状態にするトレーニングを行うこと

 

モバイルでの表示が52ポイント
モバイル版速度

PCでの表示が81ポイント
pc版速度

一応、平均ですが、まだ改善出来そうな気がします。

ちなみにwordpressでの制作です。

 

では、今日出来立てホヤホヤのampサイトの結果です。

 

https://japanbrainfunctionstrainingcenter.xyz/

 

なんと、モバイルでの表示が91ポイント
モバイル版速度

PCでの表示は98ポイント
pc版速度

おおお!いい感じです。

ちなみに、どちらのサイトも完全レスポンシブです。

ampは構造化データが必要

Google先生が、構造化テストツール

Schema Markup Testing Tool | Google Search Central  |  Google for Developers
Use the Rich Result Test to see what Google results can be generated for your pages and the schema markup validator for ...

構造化データ マークアップ支援ツール

構造化データ マークアップ支援ツール

を作ってくれているので、それほど難しくなく作れる?かも(嘘)
ええ。苦労しました。二度とやりたくないくらい。
でもね。

構造化

絶対みんなも大変な思いをしている筈!ってことで

えっ内容だって?
しょうがないな〜〜

じゃ上から行くよ

@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

商品の写真ってことになっているので、サービスの写真を載っけました。

下層ページなら、パンくず・・・

はい。パンくずですよ。

まだ、やって無いから、ここ見といて・・・

 

How To Add Breadcrumb (BreadcrumbList) Markup | Google Search Central  |  Documentation  |  Google for Developers
Discover how adding breadcrumb markup to your web pages can help users understand and explore your website more effectiv...

 

フェイスブックやツイッターのカードも必要

まだ、あるとは・・・

OGPってやつです。トップページ用のを載っけておきます。下層ページは違うので・・・

内容は・・・勘弁して・・・

めちゃくちゃ大変

まあ、大変なんですよ。

趣味のサイトでも無い限り、最低限必要なものばかり・・・

ぶっちゃけ、素人には無理。

サイト制作してくれる企業に依頼しても、ここまで書いてないこともあるのが実情。

だって、画面に表示されないところだし、決まってないことが多いし、知らない業者の人だっています。

私のサイト調べて!という方がいらっしゃれば、下記のサイトから問い合わせをしてくださいね。

301 Moved Permanently