AMPを「高速化技術」「一瞬で表示する技術」というのはもうやめよう。｜榊原昌彦
AMP（Accelerated Mobile Pages）がオープンソースとして立ち上げられてから数年が経ちました。食べログなどの大手Webサービスが対応し、また簡単にAMP対応できるWordPressプラグインが出たことで、今では一般に浸透してきた感じを持っています。 ただ「表示高速化技術」「一瞬で表示する技術」というのは正しくないのでやめませんか？ AMPはWeb Componentsフレームワークまず誤解されがちなのですが、AMPは新たな技術ではなく、Web標準の「Web Components」というAPIを用いて実装されています。AMPのGitHubページにもしっかりと「The AMP web component framework.」（AMPというWeb Componentsを用いたフレームワーク」と掲載されています。 Web Componentsは、再利用可能でカプセル化された
Components
サイドバーの切り替え サイドバーの切り替え The AMP Component Catalogue The AMP HTML library consists of a basic runtime that brings the core functionalities of AMP to your page. If you want to add additional features you can do so by using one or more of the ready-to-use AMP components. They are classified as: Built-in Components that are included in the base library, such as amp-img and amp-pixel. Extended Extensions
今の時代、ウェブページは一瞬で表示するべき！ 画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA
ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。 表示速度を改善する施策は色々とありますが、本記事では「AMPアンプ（Accelerated Mobile Pages）」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。 AMPとはウェブページの読み込みを高速化させる技術 「AMPアンプ（Accelerated Mobile Pages）」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。 本サイト（ICS MEDIA）では以前「AMPの利点と対応HTMLの作り方」で導入方法を紹介していま
AMP Start、レスポンシブウェブデザインのAMPサイトを簡単に構築できるテンプレートを公開
[レベル: 中級] AMP プロジェクトは、AMP HTML で構成したウェブサイトを簡単に作成するためのテンプレートの提供を始めました。 AMP Start という名称のサイトで公開しています。 まずは2種類のテンプレートを配布 AMP Start で公開されているテンプレートを使えば、AMP に対応したサイトをゼロから構築する必要はありません。 テンプレートはデザイン的に洗練されており、たいていのサイトに必要な要素を備えています。 現在公開されているテンプレートは、次の2種類です。 記事用 ブログ用 記事もブログも大差ないように思いますが、ナビゲーションメニューやソーシャルボタンなどの要素に多少の違いがあります。 “COMING SOON”とあるので、もう1種類のテンプレートが近々公開されると思われます。 RWD + AMP HTML どちらのテンプレートも、レスポンシブ ウェブ デザ
Google、リッチスニペットよりもビジュアルなリッチカードをグローバル展開。レシピ、レストラン、映画が対象
[レベル: 中〜上級] リッチカードが、世界中の Google モバイル検索で利用可能になりました。 日本でも利用できます。 リッチカードは、従来のリッチスニペットよりも視覚に訴える効果が高くなっているのが特徴です。 2016年5月に米 Google (google.com) で公開されました。 レシピと映画、飲食店のリッチカードをサポート 次の3つのジャンルでリッチカードがサポートされています。 レシピ 映画 飲食店 こちらは、レシピのリッチカードです。 そのサイト専用 (host-specific) のカルーセルとして掲載されるのもリッチカードの特徴です。 上で見たチキンカレーのレシピは、楽天レシピだけのリッチカード カルーセルになっています。 こちらは、飲食店のリッチカードです。 食べログ専用のカルーセルになっています。 米 Google ではホテルもリッチカードカルーセルに掲載され
robots.txtによりURLが制限されています(ウェブマスターツール) | inosh blog
robots.txtによりURLが制限されています 前回、sitemap.xmlを作成するGoogle XML Sitemapsの設定 でsitemap.xmlを自動作成＆検索エンジンへの通知をするように設定しました。 また、Wordpressの設定で「検索エンジンがサイトをインデックスしないようにする」のチェックを外しました。 そして、１番最初だけグーグルウェブマスターツールからsitemap.xmlを手動で送信しておこうと思い、送信してみたのです。 すると・・・ 説明 「サイトマップにアクセスしようとした際にエラーが発生しました。サイトマップがガイドラインに従っており、指定した場所からアクセスできることを確認してから、再送信してください。」 例 robots.txt により URL が制限されています ということなので、「robots.txt が重要なページをブロックしているかどうかを
Google Search Console
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
GitHub - ampproject/amp-wp: Enable AMP on your WordPress site, the WordPress way.
Page Experience (PX) is a set of ranking signals—including Core Web Vitals (CWV)—measuring the user experience of interacting with a web page. AMP is a powerful tool which applies many optimizations and best practices automatically on your site, making it easier for you to achieve good page experience for your visitors. The official AMP Plugin, supported by the AMP team, makes it easy to bring the
ECサイト初のAMP成功事例？ AMP対応したインドのショッピングサイトは1日の注文が52%増加、一覧ページのトラフィックが59%増加
[レベル: 上級] 3月7〜8日に米ニュヨークで Google が主催している AMP Conf 2017 で、AMP 対応した EC サイトの成功事例が紹介されました。 eBay や Namshi のように AMP 対応した EC サイトがいくつかありますが、AMP 対応したことが良い結果に繋がったのかどうかの事例は、僕は今までに聞いたことがありません。 Snapdealは、オーダーが52%↑、一覧ページのトラフィックが59%↑ EC サイトの AMP 成功事例として紹介されたのは、インドのショッピングサイト、Snapdeal（スナップディール） です。 Snapdealは、PCやスマホ、家電、ファッション、キッチン用品などさまざまな製品を販売する総合オンラインショッピングサイトです。 Amazonみたいなものですね（Amazonは出店もできますが）。 Snapdeal は、商品一覧ペー
AMP CDNのキャッシュURL構成をGoogleが更新、専用のサブドメインを各サイトに割り当て
[レベル: 上級] Googleは、AMPキャッシュのURL構成を近いうちに更新することを開発者向けブログでアナウンスしました。 セキュリティを高めることが狙いです。 一部のサイトを除く、ほとんどのサイトでは特別な対応は不要です。 AMP CDNドメインのサブドメインを各サイトに割り当て 今後は、Googleが提供するAMP CDNが使用しているドメイン名のサブドメインが、各サイトに割り当てられます。 たとえば現状では、この記事のAMPキャッシュURLは次のようになります。 https://cdn.ampproject.org/c/s/www.suzukikenichi.com/blog/google-updates-url-scheme-for-amp-cache/amp/ 今後は、僕のブログ専用のサブドメインが割り当てられ、次のように変わります。 https://www-suzukik
【WordPress】プラグイン無しでAMP（Accelerated Mobile Pages）に対応にする手順
プラグインを有効化するとこんな感じになります。パープルのヘッダーにグレーの背景でこちらもシンプルな見た目になります。AMPは制約が多いので凝った作りにすることが難しいためです。テーマに組み込んでいた関連記事のショートコードもむき出しになってしまいました。 AMPをプラグインを使わず自分で対応したい 上記のプラグインは完全なAMP対応とは言えずまだまだβ版です。今から数年前にスマホサイト対応でWPtouch Mobile Pluginが流行ったのと同じように、プラグインを使っている人と全く同じデザインになってしまうので「とりあえず対応しました感」があって何か嫌なんですよね。 というわけで今回はWordPressでプラグインを使用せずAMPに対応させた手順をご紹介します。このページもAMPに対応しているので、URL末尾に「?amp=1」を付けてレイアウトの違いを見て下さい。 https://c
WordPressをマジメにAMP（Accelerated Mobile Pages）対応させた話 #AMPlify | PSYENCE:MEDIA
WordPressをマジメにAMP（Accelerated Mobile Pages）対応させた話 #AMPlify ku-suke 2016.10.06 474 6616395150 こんにちは、2016年中途入社のku-sukeです。現在はkidslyという保育園むけサービスのプロダクトオーナーを担当しています。今回は個人的にも注目しているAMP（Accelerated Mobile Pages）をこのテックブログに実装した話を書きたいと思います。特に、WordPressプラグインを入れるだけの簡易対応ではなく、フッターまわりやデザインの調整などをまじめに対応させたので、企業をはじめメディア運営をWordPressで運用されている方のお役に立てば幸いです。 事業サイドがAMPに乗っかるか考える事 - ku-sukeのブログ AMPとは？ AMPとはAccelerated Mobile
WordPressのプラグインでブログをAMP対応にしてみた
[レベル: 上級] この記事では、WordPressをAMP対応させるプラグインについて解説します。 AMPプラグインを使えば、WordPressで構築したサイトをいとも簡単にAMP化できます。 しかし初期ステージでのバージョンの公開のため機能が不完全です。 今すぐに利用する必要はまったくありません。 AMPにものすごく興味があったりSearch Consoleに実装予定のAMP機能のベータテストに参加したかったりする場合のみ、試してみるとよさそうです。 WordPressのAMPプラグインの設定方法や仕上がり WordPressのAMPプラグインのインストールや設定の方法、仕上がりをここから説明します。 インストール WordPressのプラグインサイトにあるAMPプラグインのページからファイルをダウンロードし、 /wp-content/plugins/ ディレクトリにアップロードします
AMP（Accelerated Mobile Pages）の基礎知識から対応・導入方法まで！まとめ | 株式会社ウェブ企画パートナーズ
「Accelerated Mobile Pages」と呼ばれるGoogleが推し進めてきたプロジェクトですが、とうとう正式導入されることになりました。「Accelerated」は「加速される」という意味で、つまりモバイルページ高速化プロジェクト、といったところでしょうか。 まずは導入後のイメージを御覧ください。（英語ですが公式サイトのイメージよりもわかりやすいです） このように、検索結果にカルーセル形式で表示され、リンクをタップすると物凄いスピードでページが表示されます。 自分の携帯で試してみたい方は、下記URLのGoogle検索画面から「ニュース」というキーワードなどで検索してみてください。 http://g.co/ampdemo（※スマホからアクセスしてください） 既にTwitterやアメブロなど、様々なメディアがAMP対応を導入しています。 Googleが過去に発表してきた、モバイル
amphtml/amp-html-format.md at master · ampproject/amphtml · GitHub
* Update element categories for SVG Elements in allowlist * Remove unclear description * primative => primitive AMP HTML ⚡ [TOC] AMP HTML is a subset of HTML for authoring content pages such as news articles in a way that guarantees certain baseline performance characteristics. Being a subset of HTML, it puts some restrictions on the full set of tags and functionality available through HTML but it
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用の記事を出力してい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The AMP Validator
AMP - a web component framework to easily create user-first web experiences
Will Google AMP & Facebook Instant Articles Affect Your Publishing Strategy?
WordPressプラグイン「AMP」のカスタマイズが超簡単だった！