AMP in the WildNo JS? No problem! From the beginning it was never our intention to recreate a Guardian article in AMP. We used it as an opportunity to rethink our arti…
日商エレクトロニクスが実践する「売上にコミットする顧客本位のマーケティング」とは | マルケトブログ｜マーケティングオートメーション
The latest perspectives and in-depth how-tos from the Adobe Experience Cloud teams.
Google Search ConsoleでAMPのエラーが出ていたので修正した際のメモ - razokulover publog
先日、AMPのドキュメントを読んだので早速自分が管理してるサイトで対応してみた。 ところが、Google Search Console(旧ウェブマスターツール)でAMPのエラーが発生してしまっていたので、その際のエラー内容と修正方法についてメモしておく。 【エラー1】schema.org NewsArticle メタデータがありません AMP対応の記事はGoogleの検索結果の上部でカルーセル状に表示されるが、そのためにはjson-ld形式でschema.orgのNewsArticleについての記述が必須となっている。 Google、AMPに対応した記事向けschema.orgの仕様を公開 自分は実装時、このschema.orgの記載を忘れていたのでこのエラーが出てしまったようだ。 対応方法は、schema.org/NewsArticleを見ながらひたすらJSON-LDを作っていく。 <s
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
AMP対応するためのCSSを書いててエラーが出たので原因と解決方法をまとめました｜今村だけがよくわかるブログ
WebサイトをAMP対応させる過程で「AMP対応ページの見た目をデザインする」こともあると思います。私はAMPのドキュメントにある通り「<head></head>」内に「<style amp-custom></style>」を使ってCSSのスタイルをインラインで書いていきました。 例えば下のような感じですね。 <style amp-custom> body{ background-color: #F3F1E8; } </style>調子よくCSSを書いていましたが、AMP対応に問題がないかChromeブラウザでコンソールを開くと、CSSの書き方についていくつかエラーが表示されていました。 AMP対応ページのURLの後ろに「#development=1」を付けてコンソールを開くと、エラーがあればその原因や解決方法などが表示されます。 どんな原因でエラーがあって、どう解決すればいいのか。今後似
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をつ
Highlights from Chrome Dev Summit 2016 | bitsofcode
A couple of weeks ago I was lucky enough to be able to attend the Chrome Dev Summit in San Francisco. It was a really great experience to be able to see, in person, a lot of the people working on the APIs I use everyday, as well as to see how other developers are creating complex modern web applications. I would urge you to watch all the videos yourself (Chrome Dev Summit 2016 Playlist), but here
はてなブログのAMP対応で学ぶウェブサービスのAMP対応 - hitode909の日記
プレゼンモード 再生 ← / →で移動 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でベスト
sitemap.xmlをクロールしてサイト内の全ページのAMPのバリデーションをしてくれるコマンドラインツールを作った - hitode909の日記
ウェブサービスのAMP対応するときに役立つ，sitemap.xmlをクロールしてサイト内の全ページのAMPのバリデーションをしてくれるコマンドラインツールを作った． GitHubにも置いてあるのでご紹介します． はじめに：AMPのバリデーションについて AMP（Accelerated Mobile Pages）はHTMLのサブセットなのだけど，ふつうのHTMLとちがって，バリデーションに通らないとAMPのページとは認めてもらえず，エラーが出てると検索結果などに出してもらえないので，がんばって直す必要がある． バリデーションの主なやり方には， クロールされるのを待ってSearch Consoleで見る AMPバリデータを使う の2つがある．順番に説明します． クロールされるのを待ってSearch Consoleで見る Search ConsoleからAMPのクロール状況を見れて，エラーが出て
グーグル、“ページ表示が遅い”を解消する「AMP」プロジェクト--7秒が1秒に短縮
Googleはこのほど、2015年10月に公表したオープンソースプロジェクト「Accelerated Mobile Pages（AMP）」の日本語版導入ガイドをウェブサイト管理者向けに公開した。 このAMP（アンプ）と呼ばれるプロジェクトは、スマートフォンで閲覧するモバイルサイトの表示速度を従来のサイトよりも高速化させることを目的としたもので、すでに世界各国のニュースサイトなどがこのプロジェクトに参加し、AMPへの対応を準備しているという。 プロジェクトの目的と具体的な内容について、Google日本法人 プロダクトパートナーシップ本部 ストラテジック パートナー デベロップメントのマネージャであるダンカン・ライト氏、そして同じくプロダクトパートナーシップ本部 出版コンテンツ アジア太平洋統括部長の佐藤陽一氏に聞いた。 ページ表示の遅さによるユーザーの閲覧断念を解消したい --まず、このAM
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用の記事を出力してい
爆速モバイルWeb、AMPの仕組み抄訳 - ku-sukeのブログ
鈴木さんの記事を読みましてAMPの仕組みについて読んでみました。以下抜粋して日本語メモを。 モバイルウェブが爆速に！ GoogleがAMP (Accelerated Mobile Pages) を立ち上げ | 海外SEO情報ブログ 追記：ざっくり言うと、主にニュースとか静的コンテンツを想定し、HTML+CSSでJSは原則禁止、広告とかで使いたい場合iframeを用意するのでその中だけ。iframeや画像は事前にサイズを固定し変更不可にすることでlazyloadしてもレンダリング時にガタガタしないよね。というAMP HTMLフレームワークを策定したお話です。 原文：https://www.ampproject.org/how-it-works/ モバイルのための仕組み （※見出しは筆者による） Web performance is not unexplored territory for t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/T0000N/items/491f17ddbdf5de9e841e
CSSの非表示(display:none)を使った広告の切り替えについて - Google グループ
おすすめプラグイン（2013年）