ユーザー体験を向上！Yahoo!ニュースにおけるCore Web Vitals対応事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースを担当しているエンジニアの喜楽です。 2020年5月、GoogleよりWebでのユーザー体験を指標化したCore Web Vitalsが発表されました。本記事では、Yahoo!ニュースにおけるCore Web Vitals指標改善の取り組みとその効果についてご紹介します。 Core Web Vitalsとは Webページを閲覧しているときに、コンテンツの表示が遅かったり、スクロールやクリックなどの反応が悪い、レイアウトが読込中に変更され、クリックしたい要素の位置がずれてしまうなどといった経験はないでしょうか。これらはユーザー体験を低下させる一因となります。Core Web Vitalsは上記のような
ダイナミックレンダリングは一時的な回避策、最終的にはSSRの実装を
[レベル: 上級] Dynamic Rendering（ダイナミック レンダリング）は、JavaScript で生成されるコンテンツを確実にインデックスさせるために利用できる仕組みです。 しかし、一時的な回避策としてみなしたほうがいいでしょう。 数年後には必要性が薄れているかもしれません。 最終的には、Server-side Rendering（サーバー サイド レンダリング）の実装が望まれます。 ダイナミックレンダリングよりも SSR JavaScript が関わってくるコンテンツのインデックスに特に問題を感じていないのであれば、Googlebot のレンダリング（正確には、Web Rendering Service）に任せて構いません。 特別な構成は不要です。 しかしながら、Googlebot が実行できない JavaScript を使っていたりインデックスされるまでに時間がかかりすぎ
JavaScript SEOの基本を解説するドキュメントをGoogleが公開
[レベル: 上級] JavaScript を多用するウェブサイトの SEO のために必要な基本知識を解説するドキュメントを Google はデベロッパーサイトで公開しました。 ドキュメントに書かれている内容をざっくり紹介します。 Googlebot が JavaScript を処理するプロセス Googlebot による JavaScript の処理は次の 3 つのプロセスに大きく分かれます。 Crawling（クローリング） Rendering（レンダリング） Indexing（インデックシング） 2 番目のレンダリングが、静的な HTML ドキュメントにはないプロセスになります。 レンダリングが完了して初めて最終的なコンテンツがインデックシング プロセスに渡されます。 クローリングもレンダリングも、すぐ実行されるとは限りません。 “キュー” に保存され順番に処理されます（なので、レンダ
Google Search Console の使い方 | murashun.jp
［ ＋ expand ］Google Search Console とは関連するリンク一覧サマリー検索パフォーマンスURL 検査インデックス登録された URL の検査Google の登録状況インデックスカバレッジ拡張機能公開 URL の検査Google に登録される可能性登録の可否拡張機能レンダリングされたページの表示カバレッジエラー警告除外有効サイトマップサイトマップのエラーモバイルユーザビリティモバイルユーザビリティのエラー検証AMPAMP のエラー問題の優先順位の設定と修正エラーの急激な増加AMP ページの欠落警告について手動による対策ユーザー生成スパムスパム行為のある無料ホスト構造化データに関する問題サイトへの不自然なリンクサイトからの不自然なリンク価値のない質の低いコンテンツクローキング、不正なリダイレクト悪質なスパムクローキングされた画像隠しテキスト、キーワードの乱用AMP コ
Fix Search-Related JavaScript Problems | Google Search Central | Documentation | Google for Developers
SEO fundamentals Introduction Search Essentials SEO Starter Guide How Google Search Works Do you need an SEO? Crawling and indexing Sitemaps robots.txt Meta tags Crawler management Removals Canonicalization Redirects JavaScript SEO Ranking and search appearance Visual Elements gallery Title links Snippets Images Videos Structured data Favicons Site-specific guides Ecommerce International and multi
Announcing domain-wide data in Search Console
accessibility 10 advanced 195 AMP 13 Android 2 API 7 apps 7 autocomplete 2 beginner 173 CAPTCHA 1 Chrome 2 cms 1 crawling and indexing 158 encryption 3 events 51 feedback and communication 83 forums 5 general tips 90 geotargeting 1 Google Assistant 3 Google I/O 3 Google Images 3 Google News 2 hacked sites 12 hangout 2 hreflang 3 https 5 images 12 intermediate 205 interstitials 1 javascript 8 job s
SEOに役立つ、Googlebotのレンダリングを検証する4つの方法
[レベル: 上級] この記事では、Googlebot によるレンダリングを検証、デバッグする方法を4つ紹介します。 Googlebot ＝ Chrome 41 まず、前提知識として知っておかなければならないことは、Googlebot がレンダリングする仕組み (Web Rendering System、略して WRS と呼ぶ）は、Chrome 41 に相当するということです。 この記事を書いている時点では、Chrome の最新バージョンは 65 です。 現在利用されている ES6 の機能のごく一部しか Googlebot はサポートできていません。 たとえば、CSS カスタムプロパティや Strict mode、IndexedDB をサポートしていません。 Chrome 41 がリリースされたのは、2015年3月です。 つまり、SEO を意識するなら、3年前のブラウザに合わせなければならな
ツイートにページ情報を表示する「Twitterカード（Twitter Cards）」を設定してみた
各項目の解説と設定例 twitter:cardは、「Summaryカード」ならsummary、「大きな画像付きのSummaryカード」ならsummary_large_imageと指定します。 <!-- 記述例：Summaryカード --> <meta name="twitter:card" content="summary"> <!-- 記述例：大きな画像付きのSummaryカード --> <meta name="twitter:card" content="summary_large_image"> twitter:site/twitter:creatorは、該当するアカウントを持っている場合のみでOK。 <!-- 記述例：WebサイトのTwitterID --> <meta name="twitter:site" content="@granfairs"> <!-- 記述例：コンテンツ
個人開発者のためのSEO入門｜HOZ｜note
個人開発をしているとどうしても機能の実装やデザインばかりに時間がとられがちですが、リリースしたあとは当然ながら集客が大事です。 リリース当初は、SNSやメディア掲載などで話題になりやすいのですが、しばらく経つと一気にトラフィックが減り、集客に困っているという話をよく聞きます。 集客といっても幅広いのですが、ほとんどの人が個人で運営しており、広告などにお金を使うことが難しいのが現状です。 そこででてくるのが、SNSやSEOなわけですが、SNSに関しては個人ならではの細かな立ち回りやキャラ付けが上手な人が多い印象です。 逆にSEOにおいては、既存の情報の多くがメディアやブログ向けのものが圧倒的なので、個人サービス向けはあまりなく、困っている人も多いのではないかと思います。 ですので、今回は個人開発界隈でよく聞く悩みにフォーカスして簡単に解説してみました。 一応、ぼくはもともとSEOをはじめとし
モバイルウェブのスピードアップに不可欠なのは 画像・JS・フォント の最適化 #ChromeDevSummit
[レベル: 中級] 昨日とおとといに続いて、今日も Chrome Dev Summit 2018 のセッションレポートをお届けします。 セッションのタイトルは “Speed Essentials: Key Techniques for Fast Websites” です。 昨日レポートしたセッションと同じようにモバイルウェブの高速化がテーマです。 しかし、こちらはより実践的な内容になっています。 パフォーマンス改善に非常に役立つテクニックが満載です。 パフォーマンス改善の優先対象は画像とJS、フォントの3つ モバイルウェブで 1 ページあたりデータ量が多いリソースは次の順番（HTTP Archive 調べ） 画像 (約 500 KB) JavaScript (約 380 KB) フォント (約 80 KB) この 3 つは Performance Budget（パフォーマンス バジェット）
Google、SEOに適したLazyloadの仕様を公開
[レベル: 上級] SEO と相性がいい Lazyload の実装を解説するドキュメントを Google はデベロッパー向けサイトで公開しました。 3つのアドバイス ドキュメントには3つの指針が書かれています。 1. viewport 内で見えるようにする viewport 内にあるコンテンツは、必ず Google にも見えるようにしておきます（viewport は簡単に言えば、スクリーンに表示される領域）。 つまり、重要なコンテンツが viewport に入ったときは確実に読み込ませます。 IntersectionObserver API と polyfill を実装するように Google は指示しています。 2. 無限スクロールでは paginated loading を使う 無限スクロールを採用している場合は、paginated loading を実装します。 paginated
無料WordPressテーマ「Cocoon（コクーン）」を公開しました
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。 以前公開したSimplicityの後継となるテーマです（※後釜ということで完全な互換性はないです）。 新しくテーマを作成したのは、Simplicity自体元々、個人用に作成したものを公開したテーマだったので、機能を増設するにつれて、多少の無理も出てきて、動作確認が大変になってきたからです。 また、Simplicityは、約4年前に公開したものなんですが、「当時のWEB状況」と「最近のWEB状況」に乖離もでてきました。ですので、一度現在の状況に合わせて作り直しておきたかったからです。 元々Simplicity自体、僕が初めてPHPで作成したプログラムだったので、当時はPHPの作法などをよくわかっておらず、書き直したい部分もいろいろ出てきたというのもあります。 こういった複合的な理
Google Structured Data Testing Tool
SEO fundamentals Introduction Search Essentials SEO Starter Guide How Google Search Works Do you need an SEO? Crawling and indexing Sitemaps robots.txt Meta tags Crawler management Removals Canonicalization Redirects JavaScript SEO Ranking and search appearance Visual Elements gallery Title links Snippets Images Videos Structured data Favicons Site-specific guides Ecommerce International and multi
Google推奨「JSON-LD」で構造化マークアップ - Qiita
検索結果でパンくずや評価などのリッチスニペットを表示させる、構造化マークアップ。 Googleはこれまでmicrodataでの記述を推奨していましたが、現在JSON-LDを推奨していますね。 ということで、JSON-LDを使って構造化マークアップしてみました。 shema.orgを使ってます。 JSON-LDの記述方法 下記が基本の形です。 このscriptタグの中にまとめて書きます。 HTML内どこに置いてもOK。 <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "####" } </script>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Are Vercel Preview Deployments indexed by search engines?
Setting X-Robots-Tag for preview with custom domain · vercel/vercel · Discussion #5714
VercelのPreview環境に固定のサブドメインを割り当てる
Rich Results Test - Google Search Console
Mega Tags | The most complete social media meta tag generator
Meta Tags — Preview, Edit and Generate
