売上8%↑ PV 9%↑ 直帰率15%↓など、社内説得に使えるCWV改善のビジネス成果事例14連発【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
「コアウェブバイタル改善したい、でも工数も予算もたりない」そんなあなたに、上司や経営層が喜んで予算をつけてくれる社内説得資料をお届けする。 コアウェブバイタルで他サイトがどのように「売上が増えた」「PV数が増えた」「直帰が減った」「広告収入が増えた」のかの、具体的な数字だ。 今回は、6月から導入予定のコアウェブバイタル（CWV）関連トピックが「CWVやる理由」「CWVの分析」「リダイレクトとCWV」「AMPでもCWV最適化」と多めだ。 ほかにも、ECの動画SEO、順位回復のためのタグ修正、パブリッシャー向け情報などなど、あなたのSEO栄養になる情報をお届けする。 記事2ページ目最後の筆者ブログ記事紹介にある「ページエクスペリエンスのランキングをPC検索にも」も要チェックだ。 CWVの状況をデータポータルで超ビジュアライズ、無料で使えるテンプレートCWVを無視すべきではない2つの理由CWV評
Googleページ エクスペリエンス アップデートは6月中旬から段階的に導入開始
[レベル: 中級] Google は、Page Experience Update（ページ エクスペリエンス アップデート）の導入を、当初予定していた 5 月から少し遅らせて 6 月中旬に開始することを Search Central 公式ブログでアナウンスしました。 段階的に展開していくとのことです。 アナウンス記事では、関連するそのほかの変更と Search Console の新しいレポートについても触れています。 ページ エクスペリエンス アップデートは 6 月中旬から段階的にロールアウト ページ エクスペリエンス アップデートに関する発表内容の要点は次のとおりです。 2021 年 6 月中旬に導入開始 ランキングシグナルとして完全に組み込まれるのは 8 月の終わり 完了までは段階的に展開していく 極端なランキング変動は想定していない ページ エクスペリエンス アップデートはもともとは
AMP Camp のビルドプロセス
.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
モダンなWebフロントエンドの技術とAMP
モダンなWebフロントエンドの技術とAMP モダンなWebフロントエンドのフワームワークやツールとAMPについて紹介します。 リクルートテクノロジーズ兼リクルートライフスタイルのASGチームに所属しているフロントエンドエンジニアの可児です。本記事は、リクルートライフスタイルアドベントカレンダー４日目の記事です。 本記事では、リクルートライフスタイルで取り組んでいる新規Webサービスのモダンなフロントエンド開発に関することとして、Next.jsやAMPについて紹介します。 目次 はじめに モダンなWebフレームワーク React/Next.js TypeScript styled-components AMP AMPとは AMPの開発パターン Next.jsとAMP AMPキャッシュ AMP と 非AMP の共存 検索結果カルーセルとSEO AMPの開発における注意点 まとめ はじめに リク
AMPページと正規ページのどちらに構造化データをマークアップすべきか？ ⇒ 両方で同じ構造化データが必要
[レベル: 上級] AMP ページを公開する場合、正規ページと AMP ページの両方で同じ構造化データのマークアップを使用する必要があります。 構造化データは正規ページだけ？ AMP ページには不要？ 次のような質問が英語版オフィスアワーで取り上げられました。 AMP の検索結果では、Google は構造化データを AMP ページ自身から取得しているのか？ それとも正規ページから取得しているのか？ 正規ページだけにしか構造化データがなくても機能するのか？ 結論を言うと、正規ページと AMP ページの両方に同じ構造化データをマークアップする必要があります。 Google は正規ページ（モバイル ファースト インデックスに移行しているならモバイルページ）をインデックス対象にし検索結果の評価に利用します。 したがって理論的には、正規ページにさえ構造化データがあれば検索に利用されるはずです。 しか
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の利点と対応HTMLの作り方 - ICS MEDIA
AMP（Accelerated Mobile Pages＝アンプ）とは、2016年2月にGoogleが導入した、モバイル端末（スマートフォン・タブレット）でのウェブページの表示を高速化するためのプロジェクトです。AMP対応のウェブページは従来に比べ平均4倍程の速度で表示できるため、さまざまなメリットがあります。 本記事ではAMP導入のメリットと作り方を紹介します。AMP対応することによってアクセス数が増大した話もありますので、記事のシリーズで紹介します。 導入の利点① ページ表示が超高速になる モバイルブラウザで、AMPページにアクセスしたときにものすごいスピードでウェブページが表示されます。読み込み待ちのイライラがなくなるため、ユーザーストレスの軽減につながります。 導入の利点② 検索結果でAMP（稲妻マーク）が表示される モバイルでのGoogle検索で、AMP対応のウェブページは稲妻マ
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
AMPのURLを正しく表示できるSigned HTTP Exchangesを有効にしたデモ検索をGoogleが公開
[レベル: 上級] Signed HTTP Exchanges が有効になったデモ用の検索を Google は公開しました。 ここから検索すると、検索結果に出た AMP ページは AMP キャッシュの URL ではなく、そのページ本来のドメイン名を使った URL を表示します。 オリジントライアルが今月初めから始まっていましたが、すべてのサイトが Signed HTTP Exchanges の仕組みを現在は利用できます。 キャッシュ URL ではなく本当の URL を表示 Signed HTTP Exchanges が有効になったデモ検索には https://g.co/webpackagedemo の短縮 URL からアクセスできます。 ブラウザは Chrome 71 以降が Signed HTTP Exchanges をサポートします（Chrome Beta チャンネル以降、ゆくゆくはす
【AMP】Googleが推進するAMPとは？概要と対応方法まとめ
突然ですが、最近スマホで検索をした時にたまにカミナリ⚡マークが付いたページが表示されるのをご存知でしょうか？ 赤い枠で囲っているリンクにはカミナリのマークがついています。このようなリンクはAMP HTMLで構築されたWebページに遷移します。 リンクをタップして見てみると、非常にシンプルな見た目のコンテンツが表示されます。 これらは「AMP(Accelerated Mobile Pages)」という、Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツです。 「最近よく聞くけど、AMPってなんなの？」と疑問をお持ちの方も多いのではないかと思います。 SEO界隈で何かと話題のAMPについて、概要から対応方法までまとめてみました。 AMPのメリットや設定方法について、こちらの動画でもわかりやすく解説しています。 記事とあわせてぜひご覧ください。
AngularElementsでAMP htmlを動的にロードする - Qiita
本記事ではAngularElementsを使ってAMP htmlをロードするという試みをします。 AMPは、ページを高速に表示してSEOがよくなるやつですね。1 Angular Elementsについて ブートストラップ以下のツリーを通さず直接DOMにAngularComponentを追加できるようになるです。 ユースケースは1年前の記事でごちゃごちゃ書きましたが、相変わらず2つパラレルに走っています。 Angularアプリ内でElementsを使う方法 公式ドキュメントのサンプルが現在このユースケースです。Angularアプリ内で動的コンポーネントをどうやって実現するかという方向です。サンプルでは、AngularComponentでそのままやる方法と、customElementを用いる方法の2つが併記されています。 「サンプル: ポップアップサービス」 単発のcustomElements
AMP stories が発表されたので早速簡単なストーリーを作ってみた件
Accelerated Mobile Pages （AMP）の新しい拡張コンポーネントとして、「AMP stories」 が発表されました。このフォーマットは、タップ操作によって軽快に閲覧可能なフルスクリーンのビジュアルコンテンツを提供可能にします。 AMP stories が v0.1 から v1.0 へとアップデートされ、2019年 3月 19日をもって、v0.1 は廃止される予定です。これに伴い、下記で紹介しているサンプルは少し古くなっていますので、補足記事を別途書いています。詳しくは 「Re: AMP stories が発表されたので早速簡単なストーリーを作ってみた件 （v1.0 対応版）」 をご覧ください。 Accelerated Mobile Pages （AMP） については過去、この Blog でも何度か触れていますが （文末、「関連エントリー」 を参照）、先日、新たに 「
更新が頻繁なコンテンツのAMP対応ベストプラクティス
[レベル: 上級] 高速な表示を実現するために AMP ではキャッシュモデルを利用します。 僕たちのウェブサーバーからではなく AMP の CDN サーバーからキャッシュという形でコンテンツがユーザーに配信されます。 キャッシュなので、常に最新の情報とは限りません。 オリジナルのコンテンツは更新されているのに、キャッシュは古いままという状況がありえます。 ユーザーには古くなった情報を返してしまいます。 更新が頻繁なページでは問題になるかもしれせん。 更新が頻繁なページの AMP 対応のベストプラクティスをセミナー参加者に先日質問され、その場では完全な回答を提供できず、その後 AMP に詳しい方に教えていただいたのでこの記事で共有します。 2つの方法が考えられます。 何もしない <amp-list> を使う 何もしない AMP キャッシュの仕組みをこのブログで以前に詳細に解説しました。 オリ
インデックス可能なプログレッシブ ウェブアプリの構築方法
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
PWAとAMPのイイとこ取りを実現するPWAMPとは？さらに優れたモバイルUXを提供可能に
[レベル: 上級] 先週投稿したプログレッシブ ウェブ アプリ（以下、PWA）の記事で、「AMPよりもPWAに注目したい」と個人的な思いに触れました。 ところが、PWAとAMPの対立軸を作ったように思わせてしまったかもしれません。 しかし、PWAとAMPは排他的な技術では決してありません。 それどころか、両者を組み合わせることによってさらに優れたモバイルユーザー体験を提供できます。 そこでこの記事では、PWAとAMPを組み合わせる、通称”PWAMP”について解説します。 AMPとPWAを連携する3つのパターン GoogleのAMPチームに所属している Paul Bakaus（ポール・バカウス）氏は、AMPとPWAを組み合わせるパターンとして、次の3つの形態をSmashing Magazineの記事で紹介しています。 AMP as PWA AMP to PWA AMP in PWA それぞれ
CSSのみでアイコンフォント風の図柄を表示できる「CSS ICON」の使い方
CSS ICONとは CSS ICONは、CSSのみで描画されたアイコンを表示させることができるコードが集められたアイコン集です。 この記事を書いた2016年11月時点では500以上のアイコンを利用することができます。 CSSのみで描かれたものということなので、思いっきり簡素なものと思いきや、かなり実用的なアイコンがそろっています。 CSS ICONの使い方 アイコンを利用するには、まずCSS ICON利用したいアイコンを選択します。 すると、画面右側に「アイコンを利用するためのコード」が表示されます。 CSSをコピペ これを利用するには、まずCSSをコピーします。 すると、以下のようなコードがクリップボードに貼り付けられるので、CSSファイルなどに貼り付けます。 .heart.icon { color: #000; position: absolute; margin-top: 6px;
【長文】WordPressでAMP対応をしたので、やったことをまとめてみる | 今日も8時間睡眠
先日「AMPについて、まじめに考えるか」と書きましたが、さっそく当サイトのAMP対応を行いました。今日はその作業内容をまとめてみます。 今日の記事は、技術的な話しかありません。 AMPとは AMPは、Googleなどが主導する、モバイルでのサイト閲覧の高速化を目指すプロジェクトのことです。高速化は、キャッシュの仕組みやページの軽量化により実現されています。サイト作成者がAMPに対応するには、「AMP HTML」というフレームワークの仕様に従ったページを作成しないといけません。 サイトによっては、AMP対応ができない場合もあります。AMP対応時に障害になりそうなものを挙げておきます。 JavaScriptが使えない（ただし、後述の通り、AdSenseやGoogle Analyticsは可） 外部cssも使えない（内部スタイルシートの上限は約50kb） 使えないタグや使用に制約のあるタグがある
はてなブログの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でベスト
WordPressのAMPデザインテンプレート「Simp」を無料配布
GoogleとTwitterが共同開発したAMP(Accelerated Mobile Pages)ですが、現在のところGoogleの検索結果をはじめとして、Gunosyなどのキュレーションアプリやはてなブックマークなどに対応されています。また、Twitterも米国では一部AMP対応のテストをしているようです。 Accelerated Mobile Pages Project Androidアプリ「はてなブックマーク」がAMPに対応しました TwitterがAMPのサポートを開始、まずはMomentsでシェアされたコンテンツに対して WordPressでも簡単に「 AMP 」というWordPress.comを開発しているAutomattic社のプラグインを使用すれば簡単にAMP化できるのですが、日本語向けには作られておらず、デザインがイマイチというのが正直なところです。 そこで今回は「AM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AMP Websites Guides & Tutorials
