こんにちは！太偲@WEB屋です。今日は、WEBデザイナーが覚えて損無しのHTMLコーディング「AMP – Accelerated Mobile Pages」についてお送りします！AMPに関しては、SEO対策の為だけの話には留まりませんので、その辺りも含めてAMPの基本をまとめました。 WEBデザイナー、フロントエンドエンジニア、プログラマーの方々。 最近SEOやWEBマーケ担当者から、モバイルページの表示速度高速化の一環として「スマホサイトのAMP対応」について相談をされた事はありませんか？ 今回の記事では、AMPに関する基本の知識（対応コンテンツ・構造化マークアップ・HTML対応一覧・CSS）から現時点での情報まとめやAMP化（モバイル高速化）はするべきなのか？という点と、その他SEOだけではない、スマホサイト制作時の今後の方向性まで、一通りまとめてお話をしたいと思います。 AMP（アン

[レベル: 中級] モバイル検索の通常の検索結果で、スマホ向けページに置き換えてAMPページを表示する実験をGoogleは開始しました。 これまでは、AMPに対応したページは「トップニュース」として、通常の検索結果とは別枠のカルーセル（またはリスト）の中に掲載されていました。 AMPページとスマホ対応ページが混在 通常の検索結果にAMPページが表示される実験用の検索ページには、g.co/ampdemo からアクセスできます（スマホでアクセスしてください）。 うまくいかない場合は、こちらからアクセスしてください。 トップニュース用のAMPカルーセルではなく通常の検索結果の中にAMPページが表示されます。 （僕たちにとっては）おなじみのAMPマークが付いているのですぐにわかります。 検索結果の上には、AMPを説明するためのメッセージが表示されていますね。 こちらは、AMPページとスマホ対応ペー

Theme 第 22 回のテーマは AMP(Accelerated Mobile Pages) です。 今回は @ymotongpoo さんをお迎えして、 AMP の登場背景やそこから見える今の Web の問題点、導入や普及、今後の展望などをふまえ、 AMP が登場した意味、そして AMP が Web にもたらす影響などを通して 「今何がおこっているのか」と「これからどうなっていくのか」を議論しました。 Show Note Why AMP is Fast ampproject.org ampproject/amphtml github Waht is AMP? Why AMP is fast Publishers using AMP HTML AMP Cache AMP Cache AMP Cache Update Ping Format AMP Validator Chrome Dev

プレゼンモード 再生 ← / →で移動 fでフルスクリーン escでおわる こんにちは，id:hitode909です．このあと14時から品川のマイクロソフト様のオフィスでおこなわれている，YAP(PはパチモンのP)Cで発表します． この記事では，発表資料を公開いたします．現地の方は今すぐCルームに来てください．そうでないかたは懇親会でお会いしましょう． はてなブログのトピックもあるようです． トピック「YAPC」 #yapc8ojic のツイート はてなブログのAMP対応で学ぶウェブサービスのAMP対応 2016/07/03 YAP(achimon)C::Asia Hachioji 2016 mid in Shinagawa hitode909 自己紹介 id:hitode909 @hitode909 京都から来ました はてなではてなブログを作っている 自己紹介 YAPC 2015でベスト

グーグル、モバイル検索結果に AMPへのリンクを表示開始 Google が AMP (Accelerated Mobile Pages)に対応開始。モバイル検索結果に、AMP へのリンクを表示。日本語検索結果ではトップストーリーの枠とトップニュースの枠内に表示。 公開日時：2016年02月24日 02:32 米Google は2016年2月24日（日本時間）、モバイル検索結果において AMPに対応したウェブサイトの表示を開始した。英語（米国、google.com）のほか日本語（日本国内）の検索結果にも既に AMP が導入されており、スマートフォンからの検索で確認することができた。 AMP はトップニュース枠とカルーセル枠に表示 先日の報道によるとモバイル検索結果内の AMP へのリンク表示は2月24日（米国時間）と告知されていたが、1日早い導入となった。AMPに対応したページは、検索結果内

[レベル: 中級] AMP (Accelerated Mobile Pages) に対応したモバイル検索をGoogleは全世界で開始したようです。 この記事を公開している時点では、Googleから正式なアナウンスは出ていません。 リーク情報では2月24日の公開予定でしたが、1日早い公開になりました（時差の関係で日本ではすでに24日ですが）。 ※公式アナウンスが出ています。記事の最後に追記。 AMPページ vs. Non-AMPページ AMP対応検索はまだ展開中らしく、環境によって見ることができたりできなかったりします。 ほぼ同じタイミングで検索した、AMPページが表示されている結果とされていない結果を比べてみます。 こちらは、「日航」のモバイル検索結果です。 左が今までの通常の検索結果です。 右がAMPページが表示される検索結果です。 トップニュース枠の中にカルーセル形式でAMPコンテンツ

「Accelerated Mobile Pages」と呼ばれるGoogleが推し進めてきたプロジェクトですが、とうとう正式導入されることになりました。「Accelerated」は「加速される」という意味で、つまりモバイルページ高速化プロジェクト、といったところでしょうか。 まずは導入後のイメージを御覧ください。（英語ですが公式サイトのイメージよりもわかりやすいです） このように、検索結果にカルーセル形式で表示され、リンクをタップすると物凄いスピードでページが表示されます。 自分の携帯で試してみたい方は、下記URLのGoogle検索画面から「ニュース」というキーワードなどで検索してみてください。 http://g.co/ampdemo（※スマホからアクセスしてください） 既にTwitterやアメブロなど、様々なメディアがAMP対応を導入しています。 Googleが過去に発表してきた、モバイル

Googleが「Accelerated Mobile Pages(モバイル環境でのページ表示を高速化しよう)」という目的で始めたAMPプロジェクト。AMPに対応したウェブページを作成する方法を、初心者の私が勉強をしながらまとめていきます。 Q&A対応するとどうなるの？カルーセルに掲載されるモバイルでのGoogleの検索結果にカルーセル形式で表示されます。ただし、AMPに対応した全てのページがカルーセルで表示されるとは限りません。 AMPのマークが付くモバイルでのGoogleの検索結果に雷のマークが付きます。そして検索結果からのアクセスは全てAMPのページになります。開発者もユーザーも、通常のページかAMPのページかを選択することができません。 アクセスは増える？増えると思います。AMPに対応するとカルーセルに表示されるかもしれません。カルーセルは確かに検索結果ページの上部にありますが、その

Googleはこのほど、2015年10月に公表したオープンソースプロジェクト「Accelerated Mobile Pages（AMP）」の日本語版導入ガイドをウェブサイト管理者向けに公開した。 このAMP（アンプ）と呼ばれるプロジェクトは、スマートフォンで閲覧するモバイルサイトの表示速度を従来のサイトよりも高速化させることを目的としたもので、すでに世界各国のニュースサイトなどがこのプロジェクトに参加し、AMPへの対応を準備しているという。 プロジェクトの目的と具体的な内容について、Google日本法人 プロダクトパートナーシップ本部 ストラテジック パートナー デベロップメントのマネージャであるダンカン・ライト氏、そして同じくプロダクトパートナーシップ本部 出版コンテンツ アジア太平洋統括部長の佐藤陽一氏に聞いた。 ページ表示の遅さによるユーザーの閲覧断念を解消したい --まず、このAM

.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads

[レベル: 上級] Googleは、Accelerated Mobile Pages （アクセラレイティッド・モバイル・ページ）という、モバイル端末でのウェブページの表示を高速化するためのプロジェクトを公開しました。 略して、AMP（アンプ）と呼びます。 AMPで策定された仕様に従ってモバイルサイトを構成すると、モバイル検索結果からリンク先ページがまさに“一瞬”で表示されます。 AMPをデモで体験 AMPを使ったページがどのようにモバイル検索から表示されるのかを見てみましょう。 Inside Searchの公式アナウンスに動画があります。 まずこれを見て、何となくでいいので雰囲気をつかんでください。 ただ、見てもどんなだか十分にはわかりませんでしたよね。 実際に試したほうが理解できます。 AMPを体験できるサンプルのリンクもアナウンスに出ていますが、日本からでは機能しないので少し細工を加え