モバイルページ読込を高速化するAMPを三ヶ月間運用してどうだったのか - ICS MEDIA
※AMPは画像を遅延読み込みする機能が存在するため、ファーストビューでの転送容量が少なくなる傾向があります。当サイトもHTTP/2やリバースプロキシーを利用するなどWordPressを極限まで早くするようチューニングしていますが、AMPページではそれよりも高速に表示されています。 筆者はモバイルブラウザでのページ読み込み高速化によって、アクセス数が伸びる、SEO的に有利になる、エンゲージメントが向上する、といったことに期待していました。 AMP対応の効果は今のところ局所的 結論からいうと、AMP対応して得られたメリットは局所的なものでした。一部の記事がバズったときに、アクセス数の向上を確認できたというものです。まずアクセス数の数値から、AMPの状況を見ていきましょう。次のグラフはAMP対応してから現在までのアクセス数の記録です。 ▲アクセス解析はAMPページのみに絞り込んで表示 上位1位の
Google、AMPに完全対応した爆速表示の広告 A4A を公開
[レベル: 上級] Google (AMP Project) は、AMPページでも高速で表示される広告として、AMP for ads、略称 “A4A” を公開しました。 メインコンテンツの表示を遅らせることなく、広告のすばやい表示を A4A は実現しています。 広告表示も爆速 A4A 広告 と A4A ではない広告の表示速度にどのくらいの違いがあるかをデモンストレーションしたアニメーションを、AMP Projectが公式ブログの記事で紹介しています。 左が A4A ではない普通の広告で、右が A4A 広告です。 ページの上部にデモ用の青いバナー広告が表示されます。 検索結果をタップしてページに飛んだあと、A4A ではない普通の広告が完全に表示されるまでには3.12秒かかっています。 それに対して、A4A 広告は0.5秒で表示が完了しています。 訪問者に広告をしっかりと見てほしい広告出稿者と
モバイルページの高速化！ AMPの利点と対応HTMLの作り方 - ICS MEDIA
AMP（Accelerated Mobile Pages＝アンプ）とは、2016年2月にGoogleが導入した、モバイル端末（スマートフォン・タブレット）でのウェブページの表示を高速化するためのプロジェクトです。AMP対応のウェブページは従来に比べ平均4倍程の速度で表示できるため、さまざまなメリットがあります。 本記事ではAMP導入のメリットと作り方を紹介します。AMP対応することによってアクセス数が増大した話もありますので、記事のシリーズで紹介します。 導入の利点① ページ表示が超高速になる モバイルブラウザで、AMPページにアクセスしたときにものすごいスピードでウェブページが表示されます。読み込み待ちのイライラがなくなるため、ユーザーストレスの軽減につながります。 導入の利点② 検索結果でAMP（稲妻マーク）が表示される モバイルでのGoogle検索で、AMP対応のウェブページは稲妻マ
AMP HTML でアコーディオンやカルーセル表示などを実装する拡張コンポーネントを使ってみる
AMP 拡張コンポーネントには、カルーセルやスライドショー、あるいはアコーディオン式の UI を実装したり、ソーシャルボタンを設置するためのコンポーネントも用意されています。そこで個人的に気になったものをいくつか取り上げて、簡単に解説してみたいと思います。 以前、AMP （Accelerated Mobile Pages） HTML に関する基本的な記事と、拡張コンポーネントを利用した AMP HTML への Google Analytics 導入方法について記事を書きました（下記リンク参照）。 AMP （Accelerated Mobile Pages） HTML を出力するようにしてみたけど面倒くさかった話 amp-analytics コンポーネントを使用した AMP HTML への Google Analytics 導入方法 AMP の拡張コンポーネント （Extended comp
AMPページでサイドバーやアコーディオン、ソーシャルボタンの利用が可能に
[レベル: 上級] AMPプロジェクトは、AMPページのなかでサイドバーやアコーディオン型UI、ソーシャルシェアを使える拡張機能を公開しました。 拡張機能公開の背景 高速化を徹底的に実現するためにAMPコンテンツは基本的に、「閲覧するだけ」の機能しか持ちません。 なかったとしてもコンテンツの閲覧に大きな支障を与えない要素を極限までそぎ落としています。 しかしたとえ速かったとしても、便利な機能が欠けている状態は逆にユーザー体験を低下させてしまうこともあります。 そこで、AMPプロジェクトはいくつかの拡張機能を公開しました。 今回公開した拡張機能は次の4つです。 サイドバー アコーディオン ソーシャルシェア ダイナミックCSS AMPページにサイドバーを設置することができます。 コンテンツの閲覧を妨げないように普段は隠れていて、タップすると横から出現します。 もう一度タップすると隠れます。 こ
『AMPを導入してどうだったのか？』
アメブロがAMP対応してからしばらくが経ちました。 今回はその"AMP"に対応した結果どうなったのか？ という、効果について簡単に書きたいと思います。 ここ最近ブロガーさん向けの記事が多かったので、今日は珍しくSEOネタっぽいやつです。 さて、アメブロでは3/10より順次AMP対応しています。 スマートフォンでGoogle検索をした際に、 このような表示がされることがあります。 これは実際に「ユニクロ」で検索した結果の一部です。 このマーク が表示されているものはAMP対応となり、 このように簡易的なページが表示されます。 AMPページはGoogleからの検索の場合はGoogle側にキャッシュされる形になることもあり、 いろいろな制約があります。 例えば、 ・広告の掲載に制約がある ・画像の使い方に規則がある ・使えるHTMLタグに制約がある などです。 HTMLタグなどは、AMPページを
Googleが推奨するAMPとは？-特徴から対応方法まで基礎解説
今回はモバイル高速化でおなじみの「AMP」の概要を初心者の方向けに簡単にまとめてみようと思います。 まず、AMPについて知らない方のためにAMPとはどんなものかをご説明します。 【無料】ねぎお社長のSEOメールマガジン※30秒で登録完了 購読者数は既18000人を突破！ SEO業界20年のねぎお社長が最新情報、ノウハウ、考え方などこのメルマガでしが入手できない情報を配信。SEO,コンテンツマーケティングで売上を上げたい方は、是非、ご購読下さい。 詳細はこちら AMPとは AMPの正式名称は「Accelerated Mobile Pages」で、モバイルサイトの高速表示を目的としたGoogle主体のプロジェクトのことです。 また、「AMP HTML」というAMP公式のオープンフレームワークが公開されており、これを指してAMPと呼ぶケースもあります。 2015年の10月くらいに公式アナウンスが
WordPressをAMPページにサクっと対応しようとしてみたらめちゃくちゃ大変だった【一応解決】
こんにちは。 はてなブックマークアプリがAMP(Accelerated Mobile Pages 以下AMP)対応しましたね。 bookmark.hatenastaff.com 話題のAMPですが、そんなに爆速になるのであれば、やっておかなくてはと焦ってきました。 はてなブログはそのうち公式で対応しそうな気がするので（あくまで予測ですが） WordPressのサイトをAMP対応してみます。 AMPって何？ AMPはモバイル環境でのウェブサイト表示を高速化するプロジェクトでGoogleが発足しました。 AMP のテクノロジーを利用しているウェブページは、従来に比べ平均 4 倍の速度で表示され、データ量も約 1/10 に抑えられるため、ほとんどのページが瞬時に表示されます。 引用：Google Japan Blog: モバイルウェブをもっと速く これまでのモバイル向けのウェブページに加えて、A
WordPressブログをプラグインを使って30分でAMP化する方法
[レベル: 上級] この記事では、Wordpressブログを手っ取り早くAMP対応させる方法を説明します。 AMP (Accelerated Mobile Pages) に対応したモバイル検索が一般公開されました。 Google Japanの公式ブログで発表されたこともあり、僕たちほどにはSEOと密接にかかわっていない人たちにもニュースになりました。 GoogleがAMPを強く推していることもあり、自分のサイトをAMP対応させてみようかと考えている人も多いのではないでしょうか。 そこで、「“とりあえず”AMP対応して、どんなだか様子を見てみたい」という人のために簡単にできるAMP化を解説することにします。 ただし、Wordpressでサイトを運営していることが条件です。 3つのプラグインを使います。 AMP Facebook Instant Articles & Google AMP Pa
AMPページをGoogleアナリティクスで計測する方法｜今村だけがよくわかるブログ
前提としてですが、通常のGoogleアナリティクスのトラッキングコードがAMP（Accelerated Mobile Pages Project）ページにあるとエラーが出てしまいます。（エラーは出るけど、計測はできるみたいです。2016/02/26確認時点） エラーがある（AMPページがGoogleのガイドラインに準拠していない）ページは、Google検索のAMP関連機能に表示されないです。 そこで、AMPページをGoogleアナリティクスで計測する方法がありますので「AMPページもGoogleアナリティクスで計測したい」という場合はご参考ください。 対応についてはAMPのドキュメント「amp-analytics.md」を参考にしましたが、Googleアナリティクスのドキュメント「Adding Analytics to your AMP pages」は端的に書かれているので、理解しやすいで
AMP（Accelerated Mobile Pages）の基礎知識から対応・導入方法まで！まとめ | 株式会社ウェブ企画パートナーズ
「Accelerated Mobile Pages」と呼ばれるGoogleが推し進めてきたプロジェクトですが、とうとう正式導入されることになりました。「Accelerated」は「加速される」という意味で、つまりモバイルページ高速化プロジェクト、といったところでしょうか。 まずは導入後のイメージを御覧ください。（英語ですが公式サイトのイメージよりもわかりやすいです） このように、検索結果にカルーセル形式で表示され、リンクをタップすると物凄いスピードでページが表示されます。 自分の携帯で試してみたい方は、下記URLのGoogle検索画面から「ニュース」というキーワードなどで検索してみてください。 http://g.co/ampdemo（※スマホからアクセスしてください） 既にTwitterやアメブロなど、様々なメディアがAMP対応を導入しています。 Googleが過去に発表してきた、モバイル
【WordPress】プラグイン無しでAMP（Accelerated Mobile Pages）に対応にする手順
プラグインを有効化するとこんな感じになります。パープルのヘッダーにグレーの背景でこちらもシンプルな見た目になります。AMPは制約が多いので凝った作りにすることが難しいためです。テーマに組み込んでいた関連記事のショートコードもむき出しになってしまいました。 AMPをプラグインを使わず自分で対応したい 上記のプラグインは完全なAMP対応とは言えずまだまだβ版です。今から数年前にスマホサイト対応でWPtouch Mobile Pluginが流行ったのと同じように、プラグインを使っている人と全く同じデザインになってしまうので「とりあえず対応しました感」があって何か嫌なんですよね。 というわけで今回はWordPressでプラグインを使用せずAMPに対応させた手順をご紹介します。このページもAMPに対応しているので、URL末尾に「?amp=1」を付けてレイアウトの違いを見て下さい。 https://c
AMPが正しく設定できているかチェックする3つの方法
[レベル: 上級] この記事では、AMPを正しく設定できているかどうかを検証するための3つの方法を説明します。 Chromeのデベロッパー ツール 構造化データ テスト ツール Search Console それぞれを詳しく解説します。 Chromeのデベロッパー ツール Google Chromeのデベロッパーツールを利用すると、AMP HTMLのバリデーションをチェックできます。 つまり、AMPが定める仕様に従って正しくコーディングできているかどうかの検証に使えます。 手順は次のとおりです。 1. AMPページのURLの末尾に「#development=1」を付けてページを表示させる バリデーションをチェックするモードにChromeを入らせます。 たとえば、AMPページのURLが https://example.com/amp/validation.html なら、https://ex
モバイルサイトの爆速表示を実現するAMP-HTML-Page作成方法まとめ
モバイルサイトの爆速表示を実現するAMP-HTML-Page作成方法まとめ Publish2015/12/24(木) 今日は久しぶりに技術的な内容の記事になります。 普段と違ってサイトを作る側の人向けの記事です。 ただし、実装方法はともかく、こういう技術があることを知っておくことも重要なので、Web担当者さんやディレクターさんにも見てもらいたい内容ではあります。 今回紹介する技術は「AMP」と呼ばれるモバイルサイトの表示を高速化させる技術についてです。 AMPとは？ まずは概要です。AMPは「Accelerated Mobile Pages （アクセラレイティッド・モバイル・ページ）」の略で、GoogleやTwitterが主導して開発したものになります。 AMP独自の使用の「AMP HTML」のルールに沿って文書を作成することで、モバイルサイトを高速表示させようという取り組みです。 詳しく
AMP最新情報 ―― Google検索のランキングにAMPが与える影響、WordPressがAMPプラグインを開発中
[レベル: 上級] AMPプロジェクトにたずさわっているGoogleのRichard Gingras（リチャード・ギングラズ）氏に、Poynterがインタビューしました。 インタビューのなかから、SEOに取り組む僕たちが特に気になる、AMPが検索ランキングに与える影響に関する部分を紹介します。 そのほか、AMPが持つ懸念点とAMP用のWordPressプラグインについての情報にも触れます。 AMPは検索順位にどのように影響するのか？ [Poynterからの質問] AMPの採用は、それを採用した発行者のウェブトラフィックにどんな影響を与えるでしょうか？ AMPを採用していない発行者は不利になりますか？ Google検索でAMPページはより重要視されるのでしょうか？ [ギングラズ氏の回答] 分けて考えてみましょうか。 最後の点（AMPページは上位に表示されるのか？）に関しては、くり返し本当によ
AMP(Accelerated Mobile Pages) HTMLしてみたという話 / masuP.net
Googleさんが発表したモバイル端末での表示高速化のAMP HTMLに対応してみたよ、という話です。 Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web 概要などは上記見てもらえれば感じはつかめると思いますし、日本語で紹介してる記事だとKenichi Suzukiさんの紹介記事を見ると分かるかと思います。 なぜやってみようかと思ったかというと、「javascriptが無い静的なHTMLとCSSのページは爆速で表示したるで！」というGoogleさんの粋な計らいかと勘違いし、ほとんどが静的なページであるこのブログもサクーっと対応できたりするんじゃね、と思ったからですが、ちょっと苦労しました。 なおブログを完全に対応させたのではなく、記事ページのみ別にAMP HTML用の記事を出力してい
爆速モバイルWeb、AMPの仕組み抄訳 - ku-sukeのブログ
鈴木さんの記事を読みましてAMPの仕組みについて読んでみました。以下抜粋して日本語メモを。 モバイルウェブが爆速に！ GoogleがAMP (Accelerated Mobile Pages) を立ち上げ | 海外SEO情報ブログ 追記：ざっくり言うと、主にニュースとか静的コンテンツを想定し、HTML+CSSでJSは原則禁止、広告とかで使いたい場合iframeを用意するのでその中だけ。iframeや画像は事前にサイズを固定し変更不可にすることでlazyloadしてもレンダリング時にガタガタしないよね。というAMP HTMLフレームワークを策定したお話です。 原文：https://www.ampproject.org/how-it-works/ モバイルのための仕組み （※見出しは筆者による） Web performance is not unexplored territory for t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページ表示が遅いと41%が離脱!? グーグルがAMPに本気っぽい などSEO記事まとめ10+4本 | 海外&国内SEO情報ウォッチ