Redirecting… Click here if you are not redirected.
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
[レベル: 上級] AMP ストーリー専用のセクションが検索結果に表示されるようになります。 東京の六本木で 4 月 17 〜 18 日に開催された AMP Conf 2019 で発表がありました。 AMP ストーリーは、本をパラパラとめくるようにして物語風に一連の情報を閲覧できる AMP の機能です。 文字ではなく、画像や動画をふんだんに使ったビジュアルさに特徴があります。 こちらは、AMP Conf で紹介された楽天レシピの AMP ストーリーです。 動画のようですが、AMP HTML で作成されています。 専用アプリは不要で、プラットホームを問わずブラウザで表示できます。 Google 検索の AMP ストーリー 現在は、2 つのタイプで AMP ストーリー はモバイル検索結果に表示されます。 カルーセル サイト専用 (host-specific) のカルーセルにそのサイトの AMP
先日12月10日に六本木ヒルズにて”Google for WordPress Publisher Tokyo”が開催されたので、その様子をリポートする。 イベント内容 このイベントはGoogleのWordPressチームがアジアを回るツアーの一環として行われている。AMPやSitekitといった各種ツールの普及がその目的。セッションの内容は次の通り。 OpeningProgressive WordPress: Success in the Web, the WordPress WayUser-first Websites, the road to successLunch(お弁当がついていた)Further Along the User-first PathWorkshop: AMP Plugin for WordPressWorkshop: AMP-first Content strat
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は、再利用可能でカプセル化された
地方自治体や公共団体のサイトで、災害時にアクセスが集中しても問題ないようにするには、CDN化やインフラの増強が基本だ。しかし、そうした追加コスト負担なしに、無料で利用できるCDNのインフラがある。予算のないところはぜひチェックしてみてほしい。 ほかにも、グーグル検索やSEOに関する最新の情報を、ポイントを絞ってわかりやすくお届けする。 h1タグはSEOに必要? 不要?リンクの評価は時間がたっても消えない!アフィリエイトリンクに rel="sponsored" を付けるべき?コアアップデート対策をグーグルが公式解説検索結果での見せ方を細かく制御できる新しいタグをグーグルが導入Search Consoleでパンくずリストが正しく認識されているかチェックSearch Console関連の情報多数、新meta robotsタグの情報も ―― 10月のオフィスアワー良いSEO会社に発注するための3つ
[レベル: 上級] Google は、Signed HTTP Exchanges (以下、SXG) を有効にした検索を正式に公開しました。 2018 年 11 月下旬に試験用のデモ検索を公開していましたが、通常の検索で SXG が現在は有効になっています。 SXG は、AMP キャッシュにアクセスした際に AMP CDN から返されるキャッシュの URL ではなく、オリジナルの AMP コンテンツを配信している本来のサイトのドメイン名の URL で表示するための技術です。 自分のドメイン名の URL で表示できない AMP キャッシュ 検索からアクセスした AMP ページの URL はたとえば、次のようになっています。 https://www.google.co.jp/amp/s/www.example.com/amp/sxg.html これは、自分のドメイン名ではなく Google が管
[レベル: 上級] WordPress サイトを AMP 対応する公式プラグインのバージョン 1.0 安定版が正式公開されました。 AMP プラグインのディレクトリからダウンロードできます。 統一されたデザインと機能を AMP で実現 v1.0 の大きな特徴の 1 つは統一されたデザインと機能を AMP ページで実現できる点です。 v1.0 以前のプラグインは、AMP ページのデザインが変わってしまい通常のモバイルページと比べるとかなり簡素に変換されてしまっていました。 しかし、v.1.0 では、AMP ページの外観および機能は通常のモバイルページとなんら変わりありません。 最新の AMP プラグインには 3 つのモードがあります。 Native Mode(ネイティブ モード): サイトを完全に AMP 化する。すべてのページが AMP になり、通常の PC ページやモバイルページはなくな
ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。 表示速度を改善する施策は色々とありますが、本記事では「AMPアンプ(Accelerated Mobile Pages)」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。 AMPとはウェブページの読み込みを高速化させる技術 「AMPアンプ(Accelerated Mobile Pages)」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。 本サイト(ICS MEDIA)では以前「AMPの利点と対応HTMLの作り方」で導入方法を紹介していま
AMP(Accelerated Mobile Pages)はGoogleが主導して行われるオープンソースプロジェクトで、基本的にはモバイルページの高速化を狙ったプロジェクトである。特徴としては次の通り。 HTMLページの高速簡易版のようなものを用意する。 現在AMPページを優先的に表示するのはGoogle検索とtwitterである。いずれもモバイルのみ。 AMP HTMLとAMP JSという独自のHTML+JSでページを実装する。 フォームのようなインタラクティブな要素は存在せず、また、当然ながらログインもできない。 どのような背景でこのプロジェクトが生まれてきたのかというと、やはりインターネット体験におけるGoogleの優位が低下したことへの対抗策というのが筆者の見方だ。2010年代はWeb広告を含むさまざまな鬱陶しさが人々をモバイルアプリの世界に追いやってしまった時代である。Webと検
.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
.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
こんにちは、エンジニアの荒井です。 2016年はAMP(Accelerated Mobile Pages)の正式サポートがアナウンスされ、導入した方も多いのではないでしょうか。VASILYでもAMPを導入し数ヶ月運用しています。AMPの導入に関しては、関連記事も多く存在しますが、導入したことによって得られた結果について触れている記事は少ないと感じています。そこで本記事では、弊社でのAMP導入事例と、AMPによって得られた効果を紹介したいと思います。これから導入を検討している方はAMP対応による効果の一例として、すでに導入している方は比較対象として参考にして頂ければと思います。 AMPについて 初めにAMPについて簡単に説明します。 AMPはモバイルページを高速にユーザー届けるために発足したプロジェクトです。昨年Googleの検索結果に表示されるようになり、様々なサービスで対応が進められてい
[レベル: 上級] AMPが正式にフォームをサポートしました。 <form> 要素と <input> 要素を使用したフォーム機能がAMPページでも利用できます。 フォームを利用するとたとえば、メールアドレス登録やサイト内検索、ECサイトでのカラー選択などユーザーからのアクションに応じた操作が可能になります。 amp-formでフォームを実装 AMPページでフォームを実装するためには、<amp-form> 拡張を使います。 コードの例です。 <form method="post" action-xhr="https://example.com/subscribe" target="_blank"> <fieldset> <label> <span>Your name</span> <input type="text" name="name" required> </label> <label
[レベル: 上級] AMP化したモバイル検索の導入が日本でも迫っています。 AMP対応を進めているサイト管理者も多いのではないでしょうか。 AMP対応する際に役立つツールとして、AMPページの有効性を検証するための「AMP テスト ツール」をGoogleは先週公開しました。 この記事では、公式ツールではない、AMPページのさまざまな情報をチェックできるサードパーティ製のツール、「AMPBench(アンプベンチ)」を紹介します。 さらに多くの情報をチェックするAMPBench AMPBenchは、公式のAMPテストツールよりもさらにずっと多くの情報をチェックしてくれます。 AMP HTMLの有効性 amphtmlリンクタグおよびcanonicalの有無 Googlebotがクロール可能か AMP CDNにキャッシュされているか 構造化データが設定されいてるか etc. リストに挙げたのは一部
.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
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
[レベル: 中級] Googleは、Accelerated Mobile Pages (AMP) を通常の検索でサポートするモバイル検索を正式に公開しました。 Inside SearchブログとAMP公式ブログで同時にアナウンスしています。 すべてのモバイル検索結果にAMPページを表示 今までは、AMP対応したページは、ニュース的なコンテンツだけが通常の検索結果とは別にトップニュース枠に(主に)カルーセル形式で掲載されていました。 通常の検索結果にもAMP表示を拡大したモバイル検索をGoogleは8月に試験的に公開していましたが、いよいよ正式導入です。 今後は、すべての検索結果にAMPページが表示されることになります。 リッチスニペットを設定したレシピページもAMP対応していれば、AMP版が表示されます。 ランキングアルゴリズムの変更ではない 試験公開されていた開発版のときと同じように、ラ
[レベル: 中級] Accelerated Mobile Pages (AMP) に対応したサイトを増やすことを目的としたAMPlifyキャンペーンをGoogleは先日スタートしました。 キャンペーンの第一弾として、AMPの始め方を紹介する記事を、英語版と日本語版のウェブマスター向け公式ブログで同時に公開しました。 How to get started with Accelerated Mobile Pages Accelerated Mobile Pages を始めるには 英語版と日本語版のほか、ドイツ語版やフランス語版の公式ブログでも翻訳記事をすぐさま公開しているあたりにも、AMP普及に対するGoogleの気合の入れようを感じます。 AMP対応を始めるに必要なリソースの紹介 書いてある内容は、AMPを始めるために必要なリソースの簡単な紹介です。 CMSはプラグイン利用 次のCMSはプラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く