紙吹雪を空中に投げて友達と共有したくなるような、驚くほどインタラクティブな Web サイトにアクセスしたことがあるなら、その Web サイトは JavaScript で構築されている可能性が高くなります。
実際、Google Analytics (およびその他の追跡ツール) を使用するサイト、またはインタラクティブな要素や Web アプリケーションを特徴とするサイトはすべて、 また は、ほぼ遍在するコーディング言語である JavaScript を使用します。可能性は無限大です。
欠点は？間違ったやり方をすると、SEO に悪影響を及ぼす可能性があります。では、JavaScript SEO をどのように活用して検索パフォーマンスを向上させることができるのでしょうか?飛び込んでみましょう。
JavaScript SEOとは何ですか？
JavaScript SEO を定義する前に、JavaScript の最も一般的な使用例について話しましょう。ウェブサイト開発以外にも、 JavaScriptを ゲームやコンピューター プログラムなどに最適なオプションです。
Web 開発では、主にインタラクティブな Web サイト、Web アプリとモバイル アプリ、動的コンテンツに使用されます。
プログラミング言語の使用方法がわかれば、JavaScript SEO は、検索エンジンが JavaScript で構築されたサイトを簡単に見つけられるようにすることを目的としています。
SEO の理解が主にキーワードの最適化に限定されているとしても、あなたは決して孤独ではありません。 SEO には最終的に、オンページ、オフページ、テクニカルの 3 つのタイプがあります。
オンページ SEO は、サイト上のコンテンツに焦点を当てます (キーワードの最適化)。オフページ SEO はサイトの評判、人気、有用性に関係しており、主に制御できません。
JavaScript SEO は 3 番目のカテゴリに分類されます。 技術的なSEO — サイトが検索可能、インデックス可能、クロール可能であることを保証し、ユーザーが提供する情報を検索できるようにすることに重点を置いています。 それを見つけることができます。
On Page とテクニカル SEO について詳しく知りたいですか? ここから無料のチュートリアルを入手してください!
JavaScript を SEO フレンドリーにする方法
Web サイトで使用される JavaScript のほとんどは、 あなたも含めて、そして 鉱山、SEOに大きな影響を与えることはありません。最大の課題は、開発者が JavaScript を使用して、多くの重要な情報を含むセクションまたはページ全体を構築するときに発生します。
理由は簡単です。JavaScript により、検索エンジンがサイトを読みにくくなる可能性があるからです。
1. 回避策として、動的レンダリングを (控えめに) 使用します。
JavaScript SEO とインデックス作成に関する最も重要な問題の 1 つは、コードがどのようにレンダリングされるか、つまり Google がサイトをインデックスに登録する (またはインデックスを登録しない) 方法に関連しています。
つまり、サイトがどのようにレンダリングされるか (サーバー側レンダリング、クライアント側レンダリング、動的レンダリング) を理解する必要があります。
サーバー側レンダリング（SSR）
それは何ですか： JavaScript がブラウザまたは Google のクローラーに表示される前にサーバー上でレンダリングされる場合。
SEOへの影響: ページの最も重要なコンテンツの読み込み時間が短縮され、SEO パフォーマンスが向上します。
SSRのデメリット: SSR では、ユーザー入力が必要な場合に必要な時間が大幅に増加する可能性があります。
クライアントサイド レンダリング (CSR)
それは何ですか： CSR とは、JavaScript がブラウザ上で HTML の基本バージョンのみを使用してレンダリングされ、残りのコンテンツが JavaScript を介して配信される場合です。
SEOへの影響: コンテンツのほとんどは JavaScript 経由で配信されるため、インデックス可能性が低下します。
CSR のマイナス面: レンダリングは高速になりますが、検索パフォーマンスは大幅に低下するため、コンテンツを適切にインデックスできるように、Google にできるだけ多くの情報を提供することに重点を置く必要があります。
専門家のヒント： クリスティーナ・アザレンコSEOの第一人者技術専門家はこう言います。 「クライアント側レンダリングを使用すると、Googlebot はコンテンツにアクセスできなくなります。
より優れており、より成功しているアプローチは、サーバー側レンダリングを使用することであり、Googlebot はサーバーからコンテンツも提供します。」
動的レンダリング
それは何ですか： 動的レンダリングは、JavaScript をレンダリングできないボットを特定し、SSR バージョンを配信します。
SEOへの影響: ボットがコンテンツのバージョンにインデックスを付けることができるため、コンテンツが見つけやすくなります。
ダイナミック レンダリングの欠点: 結局のところ、動的レンダリングは回避策であり、Google は「追加の複雑さとリソース要件が発生する」ため、長期的な解決策にはすべきではないと述べています。
動的レンダリングは、コンテンツが急速に変更されるサイト、またはブラウザと互換性のない JavaScript を使用するコンテンツが含まれるサイトで使用できます。これはほとんどのサイトに最適ではないため、サイトのすべてのページで使用する必要はありません。
2. 独自の説明的なメタ コンテンツを使用します。
Google が各ページに何が含まれているかを簡単に見つけられるようにしてください。 メタコンテンツ、ページのタイトルとメタディスクリプション。これも
- タイトルタグ。
- メタディスクリプション。
- 画像の代替テキストと属性。
メタ コンテンツを追加すると、Google がサイトやページの内容を把握できるようになり、サイトやページのインデックス作成がより簡単かつ正確になります。
3. 遅延読み込みを実装します。
レイジーローディング 必要な場合、または読み取られようとしている場合にのみコンテンツを提供することで、ページの読み込みを高速化します。これは、大量のリソースを必要とする大きな画像やコンテンツを読み込む場合に特に役立ちます。
画像やリソースを大量に使用するコンテンツや要素は、ページ上部の残りのコンテンツと一緒には読み込まれませんが、ユーザーがコンテンツを読み進めると読み込まれます。
また、ユーザーがページの最後まで読まなければ、不必要な画像を読み込むことはありません。
欠点は、素早くスクロールしている人がいると、画像が読み込まれるまで待たされる可能性があることです。さらに、Google による Web ページの見方に影響を与える可能性があります。したがって、この習慣に従う場合は、慎重に行ってください。
4. JavaScript が Google と互換性があることを確認してください。
あなたの中に入ってください 検索コンソール 特定のページの URL を URL検査 ツールを使用して、Google がどのようにレンダリングするかを確認します。
別のツールをテストしたいですか? Google リッチリザルト テストと Google モバイル フレンドリー テストを使用して、レンダリングされた HTML を確認することもできます。
専門家のヒント： デビッド・ジマーマン of Reliable Acorn は、Google スパイダーが何を認識しているかを示すため、Google モバイル フレンドリー テストなどのツールの使用を推奨しています。
Zimmerman 氏は、「開発者が Google が JavaScript を読めると『どこかで読んだ』からといって、彼らが SEO に適した JavaScript Web サイトの書き方を理解しているわけではない」と付け加えています。
ここでの結論は何でしょうか？物事を常に把握しておくことは良い考えです.
5. 検索関連のエラーを修正します。
Google がページをインデックスに登録したことを確認したら、テストしたページをプレビューできます。 Google は表示できるコンテンツのみをレンダリングするため、テストされたページが正しく表示されない場合、Google はそのページをインデックスに登録できません。
何よりも、何が起こっているのか、なぜ起こっているのかを発見し、問題を解決するための措置を講じることができます。
6. 修正して再テストします。
JavaScript のレンダリングと互換性に関連するエラーを修正したら、URL 検査ツールを使用して、JavaScript がライブ モードで正しく動作することを確認し、更新されたコードのインデックスを Google にリクエストすることができます。
JavaScript SEO のベスト プラクティス
私は数人の JavaScript SEO 専門家に話を聞いてベスト プラクティスについて学びました。それについては後ほど説明します。ただし、何よりもまず、最新の情報に基づいて操作していることを確認してください。
1. JavaScript SEO の入門書を入手します。
JavaScript SEO には多くのことが関係しており、ブラウザは定期的に更新されるため、しばらく JavaScript SEO を行っていない場合は、入門書が必要になるかもしれません。
JavaScript に関して検索エンジンが何を求めているかを再確認する必要がある場合、または何を修正するか、どのように修正するかについての詳細な手順を取得する必要がある場合は、Google が知っておくべきことをすべて分析して説明します。 Google検索セントラル.
これは、Web サイトを SEO フレンドリーにする方法を正確に示しており、JavaScript に特化したセクション全体が含まれているため、Web サイトを持っている人にとっては秘密兵器です。
2. 重要な内容をすべてソース コードに含めます。
Google は表示できるものだけをインデックスに登録できると述べたことを覚えていますか?サイトがインデックス可能であることを確認するには、次の手順に従ってください。 アザレンコさんのアドバイスと、「JavaScript の問題によって SEO の取り組みが妨げられないように注意してください。」
彼女は、「非常に重要なコンテンツがソース コード内 (つまり JavaScript が実行される前) で利用可能であることを確認すること」を推奨しています。これにより、Google は JavaScript に依存せずに情報を「読み取る」ことができます。
すべてのメタデータ (タイトル、メタロボット、正規タグなど)、本文コピー、および構造化データを含めます。」
3. サイトが JavaScript SEO に適しているかどうかを定期的にテストします。
JavaScript コードやコンテンツを少し編集するだけでも、Google によるサイトの見方が変わる可能性があります。これは JavaScript に限定されるものではありません。Google Search Console などのツールを使用してページのパフォーマンスを監視すると、サイトが検索結果の上位に表示されるようになります。
専門家のヒント： トリスタン・ハリス は、Google PageSpeed Insights や Lighthouse などのツールを使用して SEO パフォーマンスをテストし、改善点を特定することを推奨しています。
ベストプラクティス #4。 Google のガイドラインを常に把握してください。
Google はアルゴリズムを定期的に更新し、したがってベスト プラクティスも更新します。それを念頭に置いて、Google の更新ページに注意を払うことをお勧めします。
ジマーマン Hexomatic などのページ モニターを使用して最新情報を把握することをお勧めします。 Google の JavaScript SEO ガイドライン, 「ページ モニターで Google がアップデートを行ったことが示されたら、それをチェックしてプロセスを何らかの方法で変更する必要があるかどうかを確認します。」
ベストプラクティス #5。ページ上の SEO のベストプラクティスに従ってください。
確かに、ここでは特に JavaScript SEO に焦点を当てていますが、 SEO の重要な原則 まだ適用されます。 JavaScript は検索エンジンが参照するコンテンツの量を減らすことができますが、コンテンツが SEO のベスト プラクティスに合わせて最適化されていることを確認することは依然として重要です。
エキスパートのヒント: デイブ・バー・ミーア JavaScriptを無効にすることをお勧めします。
「これは、より大きな問題の範囲を特定する最も簡単な方法です。サイト上のページにアクセスすると、ページが読み込まれる前にコンテンツが表示されなかったり、一部のリンクが機能しないためにコンテンツが欠落しているなどの危険信号が見つかることがあります。」 ヴァー・メール氏は言う。
試してみる
比較的（完全に）安全な環境で自分の新しいスキルをテストするために、私は時には友人、時には宿敵である ChatGPT に行きました。
私のプロンプト: 「見込み客を収集するための Javascript コード フォームを作成したいです。名前、メールアドレス、予算、メッセージには楽しいプレースホルダーを使用してください。」
GPT の返答は次のとおりです。以下は、潜在顧客を収集する JavaScript フォームの簡単な例です。このフォームには、名前、電子メール、予算、メッセージのフィールドが含まれています。ご要望に応じて、楽しいプレースホルダーを追加しました。
このフォームには、名前、電子メール、メッセージのフィールドが空のままになっていないことを確認するための基本的な検証も含まれています。」
フォームの HTML は次のとおりです。
楽しいプレースホルダーについてはどうでしょうか？ GPT はアイアンマンは面白いだろうと考えていました。 HTML の完全なコードは次のようになります。
そして、JavaScript は次のとおりです。
もちろん、ChatGPT には次のような免責事項がありました。
ここからは楽しい部分です。 ChatGPT がこの JavaScript を SEO のためにどのように最適化するかを見てみましょう。
当然のことながら、HTML バージョンのコードはかなり堅牢でした。違いを比較できるように 2 つのセクションに分けました。 (以下に詳しく説明します。)
本文は非常に似ていますが、ほとんどの変更は仮想のリード獲得ページのコンテンツに関連しています。
次に、更新された JavaScript を見てみましょう。
見覚えがあるでしょうか？コードを並べて比較してみましょう。
それらは同一です。驚いた？
理由は次のとおりです。
私の真新しい JavaScript コードは、私の真新しい見込み客獲得フォームの機能を担当します。
そして機能性だけ。
構造や「ページ」コンテンツについては責任を負いません。そこで HTML が登場します。また、SEO 最適化の推奨事項もここに適用されます。
ChatGPT を使用して JavaScript SEO を最適化した方法
JavaScript SEO を最適化するために ChatGPT が推奨する具体的な変更について知りたいですか?
変更1. ページのタイトルとメタディスクリプションを追加します。
変更2. 見出しタグを使用します。
変更3. SEO とアクセシビリティのためにフォームフィールドにラベルを付けます。
変更4. 画像に代替テキストを追加します。
変更5. レスポンシブ デザインを使用してページをモバイル対応にします。
変更6. スキーマ マークアップを追加して、検索エンジンがページのコンテンツを理解しやすくします。
JavaScript SEO の要点
Web サイトで JavaScript を使用することを決定するには、SEO への影響を理解し、サイトが SEO フレンドリーであること、つまり検索エンジンによって検索可能、クロール可能、インデックス付け可能であり続けるように計画する必要があります。
これは JavaScript に対して警告するものではありません。逆に、インタラクティブな機能を最大限に活用するには、JavaScript と SEO を理解し、見つけてもらいながら目立つように支援できる開発者を見つけて雇用する必要があります。
最大の収穫は? JavaScript を SEO に適したものにするためにできる最も重要なことは、JavaScript が正しくレンダリングされ、ページのコンテンツについてできる限り多くの情報を提供するようにページの HTML が構造化されていることを確認することです。
おそらく驚くべきことですが (そうでないかもしれませんが)、オンページ SEO のルールは JavaScript SEO にも適用されます。鍵となるのは、検索エンジンがコンテンツを「認識」できるようにすることです。
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- PlatoData.Network 垂直生成 Ai。 自分自身に力を与えましょう。 こちらからアクセスしてください。
- プラトアイストリーム。 Web3 インテリジェンス。 知識増幅。 こちらからアクセスしてください。
- プラトンESG。 カーボン、 クリーンテック、 エネルギー、 環境、 太陽、 廃棄物管理。 こちらからアクセスしてください。
- プラトンヘルス。 バイオテクノロジーと臨床試験のインテリジェンス。 こちらからアクセスしてください。
- 情報源： https://blog.hubspot.com/marketing/javascript-seo
