JavaScriptを使ってrel=canonicalタグを適切に挿入する方法
[レベル: 上級] JavaScript を使って rel="canonical" タグを適切に挿入する方法が JavaScript SEO を解説する技術ドキュメントに追加されました。 📝すずき注: この記事を書いている時点では、日本語ページは未更新。 JavaScript で rel="canonical" を挿入 JavaScript によって rel="canonical" を挿入することができます。 正しい方法で実装すれば、Google はきちんと認識、処理します。 コードのサンプルがドキュメントでは挙げられています。 fetch('/api/cats/' + id) .then(function (response) { return response.json(); }) .then(function (cat) { // creates a canonical link
Screaming FrogでSPA・JavaScriptに依存するリンクをクロールする方法 | アユダンテ株式会社
先日の記事でSEOのサイト診断などに役立つクロールツールのScreaming Frog SEO Spiderを紹介しました。そのツールでWebサイトをクロールし、URL別に様々な情報を一覧化できますが、デフォルトの設定ではJavaScriptに依存しない、HTML内のリンクのみクロールされます。 この記事ではAngular、ReactやVue.jsなどのJavaScriptフレームワークを使用しているシングルページアプリケーション（SPA）や、サイト内の一部でJavaScriptに依存するウェブサイトをクロールする方法を説明します。 対象サイトがJavaScriptに依存しているか確認する方法 対象サイトがJavaScriptに依存するか確認するには、自社サイトの場合は開発担当、顧客サイトの場合はお客さんに直接聞くと早いでしょう。もしわからなかった場合は、使用しているブラウザでJavaSc
What is JavaScript SEO & What You Need to Know
Patrick Stox is a Product Advisor, Technical SEO, & Brand Ambassador at Ahrefs. He was the lead author for the SEO chapter of the 2021 Web Almanac and a reviewer for the 2022 SEO chapter. He also co-wrote the SEO Book For Beginners by Ahrefs and was the Technical Review Editor for The Art of SEO 4th Edition. He’s an organizer for several groups including the Raleigh SEO Meetup (the most successful
タグマネージャとJavaScriptを使って構造化データを生成する方法をGoogleが解説
[レベル: 上級] JavaScript を利用して構造化データを生成する方法を解説するドキュメントを Google はデベロッパーサイトで公開しました。 Google タグマネージャおよびカスタム JavaScript を使ったやり方を説明しています。 タグマネージャで構造化データを動的に生成 手順の詳細はドキュメントを読んでいただくとして、この記事では特に気にかけておくべき点に触れておきます。 カスタム HTML で作成 タグマネージャで、構造化データ用に構成するタグはカスタム HTML です。 ページ内容に応じて動的に構造化データを生成するために変数を使えます。 変数の例はドキュメントで参照できます。 SSR の利用可能 サーバー サイド レンダリング (SSR) を実装している場合は、構造化データの生成も SSR に含めることができます。 Googlebot のレンダリングにかかる
Google検索のレンダリングとは？――Google Webmaster Conferenceのライトニングトークより #GWCPS
[レベル: 中級] この記事では、昨日に続いて Google Webmaster Conference Mountain View でのライトニングトークをレポートします。 セッションテーマはレンダリングです。 Rendering: レンダリング レンダリングによって、ユーザーが見ているものと同じものを Googlebot が見ることができる。 [左: レンダリング前、右: レンダリング後] レンダリングは基本的には、ブラウザのように振る舞う必要がある。 複雑でコンピューティングの多くの処理を必要とする。 Chrome の機能で Googlebot はレンダリングする。 課題 レンダリングには次の 2 つの要素が必要。 Fetch（フェッチ）でコンテンツやリソースを取得 JavaScript の実行 Googlebot がフェッチし、Chrome が（JS の実行などで）レンダリングする。
レンダーバジェットとは何か、あるいはなぜ私は心配するのをやめてサーバーサイドレンダリングを愛するようになったか - ブログ - 株式会社JADE
こんにちは、株式会社JADEの長山一石です！ 5年ほど前、Google の公式ブログ上で ウェブページをより深く理解するようになりました と言う記事を書きました (英語原本はこちら)。この記事は、検索エンジンが JavaScript を実行し、ウェブページをレンダーすることができるようになったことを告知するもので、当時としては非常に画期的なものだったと言えます。これによりインデックスされていなかった数多くのページが Google に認識されるようになり、ウェブ全体の検索可能性が上がることになりました。最初はインデックスの一部分からはじめて、徐々に範囲を拡大していき、最終的には長らく現役だった AJAX クローリングスキームも無事撤廃することができました。それについても、AJAX クロールに関するスキームを廃止します と言うブログ記事で書きました (英語原本はこちら)。 レンダリングをするボ
Googlebotのレンダリングエンジンがアップデート、最新のChromeに常に対応 #IO19
[レベル: 上級] Googlebot のレンダリングエンジン、技術的な名称で呼べば Web Rendering Service（ウェブ レンダリング サービス）をアップデートしたことをウェブマスター向け公式ブログで Google はアナウンスしました。 Web Rendering Service をアップデートしたニュースは、米マウンテンビューで先週開催された Google I/O 2019 で、JavaScript の SEO をテーマにしたセッションで紹介され、加えてほかのいくつかのセッションでも言及されました。 現地で得た情報も交えて、詳しく解説します。 最新のレンダリングエンジンを常に搭載 これまでのウェブ レンダリング サービス（以下、WRS）は、Chrome 41 相当のレンダリング性能でした。 Chrome 41 がリリースされたのは 2015 年です。 3年が経過したため
JS挿入してクライアントサイドでレンダリングしたcanonicalタグをGoogleは実際にはきちんと処理することが判明
[レベル: 上級] JavaScript によってクライアントサイドでレンダリングした rel="canonical" タグを Googlebot は無視することが Google I/O 2018 で明らかになりました（rel="amphtml" も同様に無視される）。 しかしながら、JavaScript によって挿入された rel="canonical" をきちんと処理するケースが実際にはあるようです。 JS 挿入した canonical を Googlebot が認識することを実験で検証 JavaScript によってクライアントサイドのレンダリングで挿入した rel="canonical" を Google は本当に無視するのかどうかを Eoghan Henn（オーン・ヘン）氏がテストによって検証しました。 テストの手順と経過、結果の詳細はレポート記事で確認していただくとして、簡単に
【Google SEO】JSフレームワークを使ったサイトではプリレンダリングを推奨
[レベル: 上級] React や Angular などの JavaScript フレームワークを利用したサイトでは、プリレンダリングしたページを配信することを勧める。 Google の John Mueller（ジョン・ミューラー）氏は、英語版のウェブマスター向けオフィスアワーでこのようにコメントしました。 プリレンダリングで高速表示 プリレンダリング (Prerendering) は、コンテンツの大部分を JavaScript で生成するページで利用されます（正しく言えば、JS に限りませんがここでは深入りしません）。 プリレンダリングでは、ブラウザに JavaScript を実行させてページをレンダリングさせるのではなく、サーバー側であらかじめレンダリングした“静的な”HTMLをブラウザに配信します。 ※補足: この記事で言う「プリレンダリング」は「サーバー サイド レンダリング (
JSサイトのための第4のレンダリング構成としてダイナミックレンダリングをGoogleが発表 #io18 #io18jp
[レベル: 上級] JavaScript で構築されたサイトのために Dynamic Rendering（ダイナミック レンダリング）と呼ぶ仕組みを Google はサポートするようになります。 米マウンテンビューで開催された Google I/O 2018 のセッションで Google の John Mueller（ジョン・ミューラー）氏が発表しました。 Google が現在サポートする JS サイトのための3つのレンダリング構成 JavaScript でレンダリングされたコンテンツを適切にインデックスするために、次の3つのレンダリング構成を Google は現在サポートしています。 Client Side Rendering（クライアント サイド レンダリング）――クライアント側、つまりブラウザまたは Googlebot がすべてをレンダリングする。Googlebot がレンダリングで
モバイルページのURLには # を使うべきではない、モバイルSEOに不向き
[レベル: 中〜上級] モバイル対応の際に別々のURL構成を採用し、PC向けページとモバイル向けページに異なるURLを割り当てる場合、モバイル向けページのURLに「#」（フラグメント、ハッシュ）を使うべきではありません。 ほとんどのケースにおいてGoogleに適切にクロール、インデックスされません。 # 付きのURLをGoogleはインデックスしない あるサイトの管理者が、検索結果からモバイル向けサイトのページが消え続けていると英語版のヘルプフォーラムで相談しました。 このサイトは、# を含んだURLをモバイル向けページで使っています。 モバイル向けページにはたしかに # が含まれています。 対応するPC向けページは、# を含まず、ごく一般的な通常のURLです。 GoogleのJohn Mueller（ジョン・ミューラー）氏は次のように説明します。 We can’t guarantee t
Ajaxクロールの推奨構成のサポートをGoogleがついに終了
[レベル: 上級] Googleは、今からさかのぼること2009年に公開した、Ajaxクロールの推奨構成を終了することを公式にアナウンスしました。 以前の推奨構成を保持したままでもインデックスされ続けますが、現状に即した技術を利用するように促しています。 ごく限られたJavaScriptしか実行できなかった当時、GoogleはAjaxによって生成されるコンテンツを確実にクロール、インデックスするために特殊な構成をウェブマスターに提唱しました。 この構成を、ざっと簡単に説明すると次のようになります。 ウェブページのレンダリングをすませた、いわゆる“スナップショット”を事前に作成しておき、AjaxページにGooglebotがアクセスしたときには準備済みのスナップショットを返す。 Googlebotにスナップショットを取得させるために、AjaxページのURLに含まれる「#」（ハッシュ、フラグメン
CSS・JavaScript警告文の対処について。アクセスブロックを解除する方法、Googleが確認している事項、メッセージが送付された数。 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
昨日、GoogleからJavaScriptとCSSファイルへのクロールについての警告文が多くのWebマスターに送付されました。こちらは日本のみならず、米国でも大量に送付されているようです。Googleは近年、レンダリング機能の向上をアピールしており、今までもガイドラインの変更やカンファレンスでの発言などでWebマスターに通達していました。今回の通知方法がSearch Consoleを通じて、ということだと思いますが、対処方法についての追加情報を発信しています。今回の警告文を受け取った方は、ぜひ、参考にしてみてください。– SEO Japan ＊記事内のリンク先は全て英語記事となっています。 昨日、GoogleはJavaScriptとCSSをブロックしているサイトに対し、警告文を大量に送付した。もしも、このことを知らないのであれば、こちらの記事を先に読むことをお勧めする。 メッセージが送付さ
CSSやJavaScriptのクロールをブロックするとモバイルSEOにマイナス
[対象: 中級] CSSやJavaScriptをGooglebotがクロールするのをブロックしてはいけません。 特に現在では、モバイル向けサイトをGoogleが正しく認識する妨げになることがあります。 Googlebotのクロール方式に変化あり？ WebmasterWorldに次のような投稿がありました。 正確な時期はわからないが、7月か8月あたりからGoogleがクロールのやり方を変えた。 ページのレンダリングが完了してからクロールを始めるようになった。 以前は静的なHTMLを読み込んですぐにクロールを開始していたけれど、今はJavaScriptが実行されページがユーザーが閲覧するための完全な状態になってからクロールを開始するようになっていると、この投稿者は気付いたのです。 CSS・JSのブロック解除は今すぐできる一番簡単なSEO この発見をBarry Shwartz（バリー・シュワルツ
ウェブページをより深く理解するようになりました
+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
Google Can Now Execute AJAX & JavaScript For Indexing
Google Can Now Execute AJAX & JavaScript For Indexing This morning we reported that the comments on Facebook are being indexed by Google. Google’s Matt Cutts just confirmed on Twitter that Google is now able to “execute AJAX/JS to index some dynamic comments.” This gives Google’s spider, GoogleBot, the ability to read comments in AJAX or JavaScript, such as Facebook comments or Disqus comments […]
[JS]ソーシャルメディアの不揃いなボタンを統一した美しいデザインでブログに設置するスクリプト -Koottam
Twitter, Facebook, Google+, RSSなど、ソーシャルメディアの不揃いなデザインのボタンを統一した美しいデザインにしてブログやサイトに設置するjQueryのプラグインを紹介します。 Koottam Social jQuery Plugin [ad#ad-2] Koottamの主な特徴 Koottamのデモ Koottamの使い方 Koottamの主な特徴 Twitter, Facebook, Google+などのアカウントを設定するだけで設置できます。 7種類のテーマがあり、CSSベースでカスタマイズも可。 カウントの表示はスタティック・アニメーションに対応。 カラーは簡単に変更できます。 より大きいカウント用に省略表記も対応。 MITライセンスのため、あらゆるブログ・サイトに使用しても無料！ Koottamのデモ
ページ内リンクを使用する際の注意点 (ユーザビリティ実践メモ)
しかし、ユーザはリンクをクリックする際、そのリンクが「別ページへの移動」なのか「同一ページ内でのリンク」なのかは事前に把握していません。弊社のユーザ行動観察調査では、ページ内リンクをクリックしたユーザが、クリックした先のコンテンツをスクロールしながら閲覧する途中で、自分がクリックの前と同じページにいる（ページ内リンクだった）ことを知って混乱する行動が多く見られます。 これは、自分がページ内の移動をしていることや、現在自分がいる位置について充分なフィードバックを得ないままユーザが行動することで起こる混乱と考えられます。 ページ内リンクの利点を活かしつつ、ユーザに「現在自分がどういう状態にいるのか」を伝え、混乱を最小限に抑える方法としては以下のようなものがあります。 【クリック前】 リンクのすぐそばに、上下の動きを示すアイコンを置くことによって、そのリンクが同一ページ内での移動であることを伝え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Combine JavaScript & SEO With Isomorphic JS
youmos.com