web-dev-qa-db-ja.com

巨大なスタイル属性はSEOに悪いですか?

私はワードプレスを使用してウェブサイトに取り組んでいます。 Chromeのコンソール(Ctrl + Maj + I)を開くと、HTMLドキュメントに直接書き込まれた膨大なスタイル属性と大量のスクリプトに気づかずにはいられませんでした。

Googleのグッドプラクティスによると、これはあなたがやりたいことではありません。しかし、テーマのクライアントサービスと話をするとき、彼らはSEOにはPHP生成ドキュメントであるため、SEOには影響がないと主張しました。

初心者の質問のように聞こえますが、本当ですか?

1
Florent

ページのコードの配信方法に関する技術的な詳細は、SEOにほとんど影響しません。 Googleは、開発がいかに美しいかではなく、ユーザーが見る要因に基づいてページをランク付けします。インラインCSSとスクリプトは、Googleのランキング要素ではありません。

SEOにとってコードが重要なのは、パフォーマンスに影響を与える場合だけです。 SEOの場合、ページのソースコードは7秒で完全にダウンロードする必要があります。 Googlebotの場合よりも遅い場合、Googleはランキングを悪化させます。また、3秒以内に最も完全にダウンロードしてユーザー向けにレンダリングします。それよりも遅い場合、ユーザーはその使用をやめます。 Googleはこのユーザーの行動に気付き、ランキングを悪化させます。

インラインCSSがあるということは、ページをロードするたびにキャッシュできないことを意味します。つまり、最初のページビューはより高速にレンダリングできますが、後続のページビューはより遅くなります。

スタイルをスタイル属性の外に保つための適切な開発プラクティスの理由があります。

  • スタイル属性のコードは、1つのタグのみに影響します。同じスタイルを複数のタグに適用する場合、CSSコードを複製する必要があります。これは、「自分自身を繰り返さない」(DRY)の優れた開発慣行に違反することになります。
  • すべてのCSSを.cssファイルに保存するということは、見つけやすいということです。あなたのコードベースを初めて見る人はそこでスタイルを探し始め、CSSを見つけるためにPHPとHTMLファイルを開く必要はないでしょう。
  • すべてのCSSを.cssファイルに保存すると、異なる開発者が作業する可能性が高いコードを分離するのに役立ちます。この「懸念の分離」は、フロントエンドデザイナーとバックエンドコーダーが互いの足指を踏む可能性が低く、互いに競合するコード変更を行う可能性が低いことを意味します。
2

はい、いいえ。推奨されませんが、考えられる理由のためではありません。

Googleと訪問者は高速Webサイトが好きです。多くのcssがある場合、ダウンロードが遅くなり、その結果、Webサイトが遅くなり、サイトのエクスペリエンスが少し滑らかになります。

また、使用するセレクタが多いほど、CSSが複雑になり、ブラウザがCSSの解析に費やす時間が長くなり、Webページの作成->低速->スムーズなエクスペリエンスが低下します。

はい、それはあなたがcssをずさんでいて、効果のないセレクターを使用しているときの問題です。
いいえ、意図したとおりに実際にスタイルシートを通常の方法で使用している場合は問題ありません。時には、多くのスタイリングが必要な場合があります。


あなたのCSSを改善するには?

訪問者向けに最適化、ボット用ではありません。それに固執すると、あなたは長期計画を立派にできます。
可能な限り再利用してみてください。これがグリッドシステムが一般的な理由です。これらの列の幅を再利用できます。 CascadingであるCssのCに依存します。
インラインスタイルを使用しないでください。ブラウザはDOMを通過するcssファイルをダウンロードして解析できるためです。インラインスタイルブロックはこれを逆にします。また、インラインスタイリングはキャッシュできません。
セレクターの改善、例: #idForAnUniqueElementの代わりに.classForItemYouUseOnceを使用します。可能でない場合は、制限するようにしてください。 p{}を使用する必要があります。セレクタとして#paragrapWrapElement p{}を試してください。
CSSを2つに分割。ロード時に必要なCSS(ルートナビゲーションアイテムなど)を含むヘッドのスタイルシートを提供して、ページをすばやく構築できるようにします。ボディの終わり近くにある2番目のスタイルシート。残りを埋めることができます(たとえば、サブナビゲーション。ホバーで表示されるため、後で解析できます)。

1
Martijn

非常に大きなスクリプトまたはスタイルをHTMLにインライン化すると、ページのダウンロードと実行が遅くなります。インライン化されたスクリプトとスタイルは、ブラウザーによってキャッシュされません。遅いページはSEOに悪影響を及ぼしますが、ページが非常に遅い場合を除き、おそらくそれほど強力ではありません。

PHP生成ドキュメントであるため、SEOに影響はありませんでした。

これは完全に偽のstatmenetです。何がHTMLを生成するかは問題ではありません。悪いhtmlは、php、nodejs、c ++で生成されたものでも、完全に手動で作成されたものでも同様に悪いものです。

サーバー側で生成されたページのバックエンド言語は、ページがかなり高速に生成される限り、何も変更しません。

0
Maadinsh