Blog

スターフィールドホームページをAMP対応

2016.03.01Cat:wordpress 役員

まず、AMPって聞き慣れないですよね。

購読しているRSSの中で、AMPについての言及がよくされていましたが、まだ実施前だしいいか〜なんて思っていたのですが、去る2016年2月24日に日本でも若干前倒しで実装がされたようですので、本サイトも対応してみました。

AMPについて

まず、AMPとは、Accelerated Mobile Pagesの略で、スマートフォンから閲覧するページを高速化させましょうプロジェクトで、原則HTML+CSSで遅くなるJSは禁止というAMPフレームワークを作ったので準拠して下さいというのが超簡単な解釈です。

オフィシャルのページはこちらで詳しく知りたい方は、海外SEO情報ブログさんのこちらの記事が詳しく解説されています。

AMPに対応するためのWordpressプラグイン

この情報も海外SEO情報ブログさんの記事を参考にさせて頂きました。

AMP

一つ目はその名もAMP。

プラグインの検索画面でAMPと入力すると一番上に出てきます。

こちらを有効化します。

http://sterfield.co.jp/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html

日本語URLにしたことを後悔しつつも、要は末尾に/ampをつけることでAMP対応のページを表示してくれます。

http://sterfield.co.jp/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html/amp

私達で用意したスタイルが反映されていないページが登場します。

Developer_Tools_-_http___sterfield_co_jp

要素の検証からもAMPに対応出来ていることが分かります。

Facebook Instant Articles & Google AMP Pages by PageFrog

ここからスタイルをあてていくのが、このプラグインになります。

Styling_PageFrog

素の状態ではロゴととにかくページを早く表示することだけのページです。

設定出来る項目も最低限という感じでこれ以上は、プラグインファイルを直接編集しないといけないとのことです。

Author Profile

mezaki
スターフィールド株式会社/代表取締役/副社長/EC/レスポンシブWebデザイン/Web制作/システム開発/lamp/.net/1985年生/2008年早大卒/西東京市/ひばりが丘/新宿区/高田馬場/江戸川区/瑞江/B級グルメ/料理/自作PC/熱帯魚/MBA11/ipad3rd/iphone4
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ