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の方法は好きではありませんが、最高のものを理解したいと思います。
検索エンジンは、開始時に指定したHTMLを調べます。それ以降はすべて無視されます。ただし、Googleは現在、スクリプトの初歩的な調査を行っていると述べています。彼らがその試験で変更されたHTMLを考慮するかどうか、私たちは知りません。
したがって、最初のダウンロード後に追加または変更したHTMLはおそらく無視されます。良いことと悪いことのどちらを考えるかは、あなた次第です。
質問に答えるには:
JavaScriptでHTMLを変更することはSEOにとって悪いことですか?
あなたの場合、はい。 JavaScriptを使用して、H1、H2、タイトルタグ、img altテキストなどの重要なSEO要因を操作しないでください。 Googleに報酬を与えたい場合は、ハードコーディングされたコアSEO要因が必要です。
私はこれを難しい方法で学びました。実際のユーザー(ボットではない)には見た目が最高の1位のウェブサイトがありましたが、Googleにとっては見た目が悪い(つまり、テキスト/コンテンツがない)ように見えました。それはあなたが説明しているものに似ていて、JavaScriptに大きく依存していました。最終的に、Googleがよりスマートになると、私のWebサイトはドロップし、現在は最初の10ページにすらありません。
Googleがどのようにあなたのページを見るかを確実に知るには、キャッシュされたバージョンを見てください。ウェブサイトをGoogleで検索する場合、リンクの横にある小さなドロップダウンで[キャッシュを表示]をクリックすると、Googleがそれをどのように表示するかが表示され、質問に直接答えます。
GoogleがJavaScriptをレンダリングするより優れたGoogleボット(つまり、統合されたヘッドレスブラウザー)を作成するために一見無限のリソースを使用していないのは残念ですが、それまで(もしあれば)、重要なことのハードコーディングを開始する必要があります。
2018年現在、上記の答えはおそらく間違っています。 Googleボットはコンテンツが動的であることを期待し、それに応じて作業を行うという十分な証拠があります。結局のところ、圧倒的多数のWebコンテンツは、最近はある程度動的であり、Googleがそれを無視した場合、Googleは非常に有用または価値のある検索結果を提供しません。
https://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157