web-dev-qa-db-ja.com

JavaScriptでHTMLを変更することはSEOにとって悪いことですか?

Webアプリの構築バックエンドのSEOについてあまり心配する必要はないので、HTMLを動的に変更することは問題ではありません。

私は、構築中のフロントエンドサイトでbackbone.jsを使用しています。このサイトは、スクロールフロー内のいくつかのセクションを除くツアーベースのサイトです。

そのため、ページが読み込まれると、元のHTMLを変数origHtmlに格納し、HTMLをthis.$el.find('.section-one').html('<h1>Welcome</h1>');のようなものに変更するように設定します

これは私が取り組んでいるアニメーションの一部であり、いくつかのアニメーションが発生した後、そのブロックは見えなくなり、そのHTMLを元のブロックにリセットします。

絶対にそのようにする必要はありませんが、backbone.js/javascriptで遊ぶのが好きで、これが問題かどうか興味があります。必要に応じて余分なセクションとhide/display:noneを作成するだけでしたが、hide/display:noneの使用を避けようとしているためです http:// css -tricks.com/places-its-tempting-to-use-display-none-but-dont/ (しばらく前に読んだ記事)。

つまり、これは私にとって実験/学習であり、フロントエンドWebサイトのHTMLを操作するための最適な方法は何ですか?

PS:JavaScriptを使用していないユーザーにフォールバックを提供する必要があると言う人がいるかもしれませんが、いいえ、JavaScriptをサポートするブラウザーを使用していないか、JavaScriptを有効にしていないユーザーは私のサイトにいるべきではありません。 2%未満(間違っている可能性があります)ですが、非常に低い値です。

追加:これがSEOにとって悪い場合は、position:absoluteを使用してopacity:0を設定しても大丈夫だと思います要素を非表示にするか、margin-right: -9999を使用するか、display:noneを使用します。JavaScriptの方法は好きではありませんが、最高のものを理解したいと思います。

4
Mike

検索エンジンは、開始時に指定したHTMLを調べます。それ以降はすべて無視されます。ただし、Googleは現在、スクリプトの初歩的な調査を行っていると述べています。彼らがその試験で変更されたHTMLを考慮するかどうか、私たちは知りません。

したがって、最初のダウンロード後に追加または変更したHTMLはおそらく無視されます。良いことと悪いことのどちらを考えるかは、あなた次第です。

5
Rob

質問に答えるには:

JavaScriptでHTMLを変更することはSEOにとって悪いことですか?

あなたの場合、はい。 JavaScriptを使用して、H1、H2、タイトルタグ、img altテキストなどの重要なSEO要因を操作しないでください。 Googleに報酬を与えたい場合は、ハードコーディングされたコアSEO要因が必要です。

私はこれを難しい方法で学びました。実際のユーザー(ボットではない)には見た目が最高の1位のウェブサイトがありましたが、Googleにとっては見た目が悪い(つまり、テキスト/コンテンツがない)ように見えました。それはあなたが説明しているものに似ていて、JavaScriptに大きく依存していました。最終的に、Googleがよりスマートになると、私のWebサイトはドロップし、現在は最初の10ページにすらありません。

Googleがどのようにあなたのページを見るかを確実に知るには、キャッシュされたバージョンを見てください。ウェブサイトをGoogleで検索する場合、リンクの横にある小さなドロップダウンで[キャッシュを表示]をクリックすると、Googleがそれをどのように表示するかが表示され、質問に直接答えます。

GoogleがJavaScriptをレンダリングするより優れたGoogleボット(つまり、統合されたヘッドレスブラウザー)を作成するために一見無限のリソースを使用していないのは残念ですが、それまで(もしあれば)、重要なことのハードコーディングを開始する必要があります。

1
de Raad

2018年現在、上記の答えはおそらく間違っています。 Googleボットはコンテンツが動的であることを期待し、それに応じて作業を行うという十分な証拠があります。結局のところ、圧倒的多数のWebコンテンツは、最近はある程度動的であり、Googleがそれを無視した場合、Googleは非常に有用または価値のある検索結果を提供しません。

https://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

https://medium.freecodecamp.org/seo-vs-react-is-it-neccessary-to-render-react-pages-in-the-backend-74ce5015c0c9

https://medium.com/@l.mugnaini/spa-and-seo-is-googlebot-able-to-render-a-single-page-application-1f74e706ab11

https://stackoverflow.com/questions/13499040/how-do-search-engines-deal-with-angularjs-applications?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

0
abalter