スタンドアロンAMPのススメ
こんにちわ、@t32kです。先日、3/18に大阪で開催されたFRONTEND CONFERENCE 2017に登壇してきました。また弊社メルカリは懇親会スポンサーでした。今回は『スタンドアロンAMPのススメ』というタイトルで講演した内容をシェアしたい思います。 私が所属しているソウゾウ社ではメルカリアッテというクラシファイドサービスを作っています。メルカリは配送システムを介して売買しますが、こちらは直接会って手渡しでモノの売り買いができます。もちろん、手数料や配送料はかかりませんので、よろしかったら使ってみてください。私はそこのWeb担当で、本サイトのAMP実装について話します。 今日のアジェンダです。 AMPのメリット 表現力について テンプレート分散について 構造化データについて まとめ といった内容でやっていきたいと思います。 AMPとは？ まずはAMPとは何か説明します。AMPとは
WordPress AMPプラグインを使って サイトをAMP対応にする – ねんでぶろぐ
Googleは、モバイルページを高速化する AMP（Accelerated Mobile Pages） に対応したサイト検索を開始しました。 AMP は AMP HTML 仕様に沿って作成する必要があります。サイトをAMPに対応させる場合、独自のタグの記述方法や 使えるタグの制約が多いので、自分で対応させるのは大変なのですが WordPressではサイトをAMP対応にするプラグインがあります。 この AMPプラグイン を使うと 自動で変換してAMP対応してくれますのでとても楽になります。ここではさっそくAMPプラグインを使用してAMP対応する方法を紹介します。 WordPress AMPプラグイン(Automattic) https://wordpress.org/plugins/amp/ 【2018/03/07 更新】 ※この記事は WordPress AMPプラグイン ver0.6.2
【WordPress】プラグイン無しでAMP（Accelerated Mobile Pages）に対応にする手順
プラグインを有効化するとこんな感じになります。パープルのヘッダーにグレーの背景でこちらもシンプルな見た目になります。AMPは制約が多いので凝った作りにすることが難しいためです。テーマに組み込んでいた関連記事のショートコードもむき出しになってしまいました。 AMPをプラグインを使わず自分で対応したい 上記のプラグインは完全なAMP対応とは言えずまだまだβ版です。今から数年前にスマホサイト対応でWPtouch Mobile Pluginが流行ったのと同じように、プラグインを使っている人と全く同じデザインになってしまうので「とりあえず対応しました感」があって何か嫌なんですよね。 というわけで今回はWordPressでプラグインを使用せずAMPに対応させた手順をご紹介します。このページもAMPに対応しているので、URL末尾に「?amp=1」を付けてレイアウトの違いを見て下さい。 https://c
AMP対応ページは、サブドメインや別ドメインでも公開可能
[レベル: 上級] AMP対応したページは、サブドメイン、あるいは完全に別のドメインのサイトでさえも公開することができます。 通常のページを公開しているサイトと同じドメイン名を使う必要はありません。 米サンノゼで先日開催されたSMX Westで、GoogleのDave Besbris（デイブ・ベスブリス）氏が説明しました。 AMPページをサブドメイン・別ドメインで公開できる たとえば、WordPressのAMPプラグインを使うと、AMPページのURLは通常ページのURLの末尾に /amp/ を付けたものになります（または、?amp=1）。 したがって、AMPページは通常ページと同じドメイン名での公開になります。 通常ページ ―― https://www.example.com/hoge/ AMPページ ―― https://www.example.com/hoge/amp/ しかしこれはプ
Google Drive: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more
AMP（Accelerated Mobile Pages）の基礎知識から対応・導入方法まで！まとめ | 株式会社ウェブ企画パートナーズ
「Accelerated Mobile Pages」と呼ばれるGoogleが推し進めてきたプロジェクトですが、とうとう正式導入されることになりました。「Accelerated」は「加速される」という意味で、つまりモバイルページ高速化プロジェクト、といったところでしょうか。 まずは導入後のイメージを御覧ください。（英語ですが公式サイトのイメージよりもわかりやすいです） このように、検索結果にカルーセル形式で表示され、リンクをタップすると物凄いスピードでページが表示されます。 自分の携帯で試してみたい方は、下記URLのGoogle検索画面から「ニュース」というキーワードなどで検索してみてください。 http://g.co/ampdemo（※スマホからアクセスしてください） 既にTwitterやアメブロなど、様々なメディアがAMP対応を導入しています。 Googleが過去に発表してきた、モバイル
Google、AMP対応のモバイル検索を2月24日に正式公開
[レベル: 上級] Googleが、AMPに対応したモバイル検索を2月24日に正式公開する予定であることを、Advertising Age（以下、Ad Age）が報じました。 Googleはコメントせず 2月24日の公開は、AMPに詳しい複数の情報筋からAd Ageが直接得た情報です。 ただし、Googleの広報担当は正式な公開日についてはコメントを拒否しています。 Ad Ageがこのニュースを伝えたのは2月18日（現地時間）です。 新たな情報はその後入ってきていません。 したがって間違いなく2月24日の公開だとは断定できません。 とはいえ、信ぴょう性は高いように思います。 もし本当に2月24日だとしたら、米国時間での話になるので日本ではほぼ1日進んで2月25日になるでしょう。 Googleからの公式アナウンスが直前にあるのか直後にあるのか、期待しながら待ちたいところです。 これだけAMP
AMP (Accelerated Mobile Pages) 導入前に知っておくといい話
[レベル: 上級] GoogleのJohn Mueller（ジョン・ミューラー）氏が、英語版の公式ヘルプフォーラムで Accelerated Mobile Pages (AMP) について質問したユーザーに情報を提供しました。 AMP導入を検討している人の参考になるので紹介します。 AMP導入に参考になる情報 今のところは、正規の検索ではまだAMPページを表示していない。2月後半の開始を予定している。 まず最初は、ニュース系コンテンツをカルーセル形式で表示することになるだろう。エンジニアによれば、ほかのタイプも公開後すぐに追加していく予定とのこと。 一般的には、AMPページはページ単位で結び付けられる（各AMPページには対応する[通常の]ウェブページが存在する）。もちろんAMPだけのページを作ることもできる。 私たち[Googlebot]がクロールして link rel=amphtml を
AMPが広告とGoogleアナリティクスをサポート開始
[レベル: 上級] AMP (Accelerated Mobile Pages) プロジェクトは、広告と解析ツールのサポート状況を公式ブログで説明しました。 徹底的に、高速で見やすいモバイルページを提供することがAMPの目的です。 そのため、コンテンツの閲覧に直接関係がないパーツやロードを遅らせるスクリプトの使用がAMPでは厳しく制限されています。 結果として、広告表示やアクセス解析が不可能でした。 特に、現在のAMPの主要な参加者であるニュースメディアにとっては、広告も解析ツールも使えない状況は非常に困ります。 今後のAMPの普及にも足かせになるでしょう。 しかし発表直後は未サポートだった、AMPページでの広告表示とAMPページのアクセス解析が可能になりつつあります。 AMPでの広告 20以上の広告配信ベンダーと協力し、AMPページの利点を損なわない形での広告配信の準備が整いつつあります
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
