Core Web Vitals と AMP の相関関係
.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
サイズのわからない画像のAMP対応 - Qiita
AMP⚡️(Accelerated Mobile Pages)に対応したサービス増えてきました。 AMPのページではできることが少ないので、対応は簡単です。（元の仕様を削るのが大変） AMPで画像を表示するには<amp-img>タグを使う必要があります。 例えばこんな感じ
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｜Technical Creator Hub
原 一成 2008年に入社し、アメーバブログ、アメーバピグ、アメーバスマホなどのフロントエンドを担当。近年はサーバーサイド・クライアントサイド両方の実装をしている。著書に「フロントエンドエンジニア育成読本」「Web制作者のためのGitHubの教科書」など。 2016年2月、Webページの高速表示を目的としたAccelerated Mobile Pages (AMP) がGoogle検索結果に表示され始めました。アメブロは国内のブログで非常にはやく(おそらく最速)でAMP対応をしました。本記事では、そのアメブロでのAMP対応についてお伝えします。 AMPとは AMPは、Accelerated Mobile Pagesの略で、Google, Twitterが始めた、Webの高速化プロジェクトです。近年増加の一途をたどるモバイル向けに、より最適化されたWebページを作り、配信できる手法を提供して
【WordPress】プラグイン無しでAMP（Accelerated Mobile Pages）に対応にする手順
プラグインを有効化するとこんな感じになります。パープルのヘッダーにグレーの背景でこちらもシンプルな見た目になります。AMPは制約が多いので凝った作りにすることが難しいためです。テーマに組み込んでいた関連記事のショートコードもむき出しになってしまいました。 AMPをプラグインを使わず自分で対応したい 上記のプラグインは完全なAMP対応とは言えずまだまだβ版です。今から数年前にスマホサイト対応でWPtouch Mobile Pluginが流行ったのと同じように、プラグインを使っている人と全く同じデザインになってしまうので「とりあえず対応しました感」があって何か嫌なんですよね。 というわけで今回はWordPressでプラグインを使用せずAMPに対応させた手順をご紹介します。このページもAMPに対応しているので、URL末尾に「?amp=1」を付けてレイアウトの違いを見て下さい。 https://c
Google Drive: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more
Accelerated Mobile Pages Project
AMP を使用してウェブページを作成すると、静的コンテンツを高速でレンダリングできます。 以下は AMP を構成する 3 つの要素です。 AMP HTML は、パフォーマンスを保証するための制約が設けられた HTML で、 通常の HTML より優れたリッチ コンテンツを作成できる拡張機能が備わっています。 そして AMP HTML ページのレンダリングを高速化するのが、 AMP JS ライブラリです。 Google AMP Cache は（必要に応じて）AMP HTML ページを配信します。 AMP HTML AMP HTML は基本的に、カスタム AMP プロパティを追加した HTML です。 以下は最もシンプルな AMP HTML ファイルです。 <!doctype html> <html ⚡ > <head> <meta charset= "utf-8" > <link rel=
＜amp-carousel＞ - カルーセルを設置する
AMPのamp-carouselは、カルーセルを設置するための要素です。カルーセルは、複数の画像をスライドして1枚ずつ表示するUIです。画像ギャラリーを設置したい場合に有用です。 概要名前amp-carousel可用性Stable (安定)サポートするレイアウトfill,fixed,fixed-height,flex-item,nodisplay,responsive必要なスクリプト<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>検証https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/0.1/validator-amp-caro
AMPでCSS読み込みとカルーセル実装 - Qiita
AMPでカルーセルを実装してわかったことまとめ 簡単な説明 AMPとは 簡単に言うと、モバイル端末でのウェブページの表示を高速化するためのフレームワークで AMPのフォーマットでモバイルサイトを構成すると、リンク先のページを高速に表示することが可能になる 細かい仕組みや仕様なんかは日本語の解説も多くあるので割愛 仕様 ・<html ⚡>か<html amp>で始める ・cssはheadタグ内に書くかstyle要素でインラインスタイルを当てる ・JavaScript原則禁止 ・img, video, audio, iframeは、代わりにamp-imgなどのカスタムエレメンツを使う ・↑これを使うためにhttps://cdn.ampproject.org/v0.jsを読み込む ・object, form, input等は禁止 Validator urlの末尾に#development=1をつ
AMP（Accelerated Mobile Page）が拓くモバイルの加速世界 - Qiita
AMP（Accelerated Mobile Pages）とは？ Googleが先日発表した「AMP（Accelerated Mobile Pages - アクセラレーテッド・モバイル・ページ＝アンプ）」は、モバイルにおけるWeb表示を劇的に高速化することを目的にしたオープンソース（新フォーマット）です。パブリッシャーとしてBBC、ウォール・ストリート・ジャーナル、Twitter、Pinterest、WordPress、LinkedIn、朝日新聞、毎日新聞、産経デジタルなど多くの企業が立ち上げ段階で参画しています。 Google検索によるデモはこちら ※スマホからのみ有効 AMP HTMLの利用 AMPは「AMP Project · GitHub」にて導入方法が上がっているので、誰でも採用することが可能です。現在のWebページをAMP HTMLの仕様に習って修正することで、AMP対応が可能
『アメブロにおけるAMP対応について』
今回はアメーバブログにおけるAMP対応について解説ならびにご報告をさせて頂きます。 まず、AMPとは「Accelerated Mobile Pages」の略になります。 「アンプ」「エーエムピー」という呼び名がありますが、Googleの方も「アンプ」という呼び方をされていますので、「アンプ」と呼ばれることが多いようです。 昨年のPUBCON(ラスベガス）やSMXイスラエルにおいて、Googleのゲイリー・イリーズ氏が1995（もしくは2000年）から現在にかけて産まれた世代は興味の持続が2.8秒しかないと話していたように、（参考：SEO Japan）ウェブサイトの表示を待つことを嫌うインターネットユーザーが増えているのは確かです。 若い世代だけでなく、かつてのナローバンド時代と異なりウェブサイトは素早く表示されることが当たり前になりつつある環境の中で多くの人が無意識のうちに表示の速さを求め
AMPをワードプレスにプラグイン無しで設定する方法 | q-Az
2月より Google が AMP（Accelerated Mobile Pages）のインデックスを始めるようで、SEO 界隈ではそれなりの盛り上がりをみせています。 AMP というのは簡単に言うと「スマホ高速表示技術」のようなものです。 AMPとはモバイルで閲覧する人が PC で閲覧する人数を超え、スマホで見れるのは当たり前という時代。Google はさらなるモバイル用の閲覧環境を高速化するため AMP プロジェクトを立ち上げました。表示 HTML に制限を加える事でより高速にモバイル用のページを表示させます。 HTML にかなりの制限があるため、モバイルフレンドリー対策以上にしなくてはいけない項目が多く、その対策を適当にしてしまうと AMP でのインデックスがされないため何の意味もなくなってしまい、モバイル対策以上に深刻です。 ワードプレスは AMP 対策のため、プラグインを開発中で
AMPの対応方法まとめ
Googleが「Accelerated Mobile Pages(モバイル環境でのページ表示を高速化しよう)」という目的で始めたAMPプロジェクト。AMPに対応したウェブページを作成する方法を、初心者の私が勉強をしながらまとめていきます。 Q&A対応するとどうなるの？カルーセルに掲載されるモバイルでのGoogleの検索結果にカルーセル形式で表示されます。ただし、AMPに対応した全てのページがカルーセルで表示されるとは限りません。 AMPのマークが付くモバイルでのGoogleの検索結果に雷のマークが付きます。そして検索結果からのアクセスは全てAMPのページになります。開発者もユーザーも、通常のページかAMPのページかを選択することができません。 アクセスは増える？増えると思います。AMPに対応するとカルーセルに表示されるかもしれません。カルーセルは確かに検索結果ページの上部にありますが、その
AMPページでサイドバーやアコーディオン、ソーシャルボタンの利用が可能に
[レベル: 上級] AMPプロジェクトは、AMPページのなかでサイドバーやアコーディオン型UI、ソーシャルシェアを使える拡張機能を公開しました。 拡張機能公開の背景 高速化を徹底的に実現するためにAMPコンテンツは基本的に、「閲覧するだけ」の機能しか持ちません。 なかったとしてもコンテンツの閲覧に大きな支障を与えない要素を極限までそぎ落としています。 しかしたとえ速かったとしても、便利な機能が欠けている状態は逆にユーザー体験を低下させてしまうこともあります。 そこで、AMPプロジェクトはいくつかの拡張機能を公開しました。 今回公開した拡張機能は次の4つです。 サイドバー アコーディオン ソーシャルシェア ダイナミックCSS AMPページにサイドバーを設置することができます。 コンテンツの閲覧を妨げないように普段は隠れていて、タップすると横から出現します。 もう一度タップすると隠れます。 こ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Templates
Single finger scroll not working in amp-lightbox and amp-image-lightbox · Issue #2948 · ampproject/amphtml
JS Bin
GitHub - ampproject/amphtml: The AMP web component framework.
バックナンバー – おくvillage
Documentation: <amp-carousel>