SEOに適切に使用されるWeb要素

公開: 2019-01-12

最終更新日：2019年1月16日

ほとんどのWebページは、HTML、CSS、JavaScriptの3つの基本要素で構成されています。これらのビルディングブロックは、レンダリングに何を使用するかに関係なく、すべてのWebページを構成します。各Web要素には適切な場所があります。いくつかの重複がある可能性がありますが、それらを意図的に使用すると、SEO最適化ページを作成するのに役立ちます。では、これらの要素をどのように使用する必要があり、それらを誤用する可能性のあるいくつかの方法は何ですか？

基本的なWeb要素の機能

ウェブページを家と比較してみましょう。家にはいくつかの部分があり、それぞれがその場所にあり、その目的を果たしています。私たちのウェブページハウスでは、HTMLは構造的なウェブ要素、トラス、壁、基礎に似ています。 HTMLは、重要なページコンテンツのレイアウトを提供し、その順序とどの要素がどこに表示されるかを概説します。

スタイリングにはCSSを使用する必要があります。家のイラストにこだわると、これは壁の色、キャビネット、フローリングの種類などになります。ページの色、フォントサイズ、ページの実際のレイアウトもCSSで定義できます。しかし、待ってください、レイアウトはHTMLにすべきではありませんか？良い質問。 HTMLはページに表示される要素をレイアウトする必要がありますが、CSSはそれらの要素がそのページに表示される方法を制御する必要があります。 CSSは、Webの応答性の多くを担っています。

世界中の代理店に世界をリードするホワイトラベルプロバイダーとして、私たちはクライアントに優れたSEO結果を提供するお手伝いをします。 お手伝いできますか？ ホワイトラベルSEOサービスの詳細を確認し、探している結果の達成を支援する方法を学びましょう。

家が建てられたので、電気や水道などのユーティリティの時間です。 JavaScriptは、クリック時に要素を変更したり、データを表示したりするなど、ページのインタラクティブな要素に使用する必要があります。 JavaScriptを使用して、ページのルックアンドフィール全体を変更できます。これは、特定のオーディエンスまたはユースケースに合わせてページを調整する場合にうまく機能します。

なぜそれらを分離するのですか？

では、レイアウトにHTMLとCSSの両方を使用でき、スタイル設定にJavaScriptとCSSを使用できるのであれば、なぜそれらを分離するのでしょうか。 Googleがページのインデックスを作成するとき、ページの内容と機能に関する重要な指標を探します。要素の1つを不適切に使用すると、間違ったシグナルを送信してランキングを損なう可能性があります。これは、要素のプリセットを使用してスタイルを設定するCMSエディターを使用する場合や、CSSで実行できることを実行するためにページの速度を低下させる不要なJavaScriptを実行する場合によく発生します。

それでは、ありふれた誤用のいくつかを確認しましょう。

見出しタグの誤用

最も一般的な誤用の1つは、見出しタグを使用してWeb要素のスタイルを設定することです。見出しタグは、最も重要なH1タグ（すべてのページに必要）からH6まで、ページの主要なトピックの概要を示します。要素のスタイルを設定するために使用する場合、それらの単語がページの内容であることをGoogleに伝えています。または、間違った見出しタグを使用している可能性があります（フォントサイズの方が好きなため、h2の代わりにh3を使用するなど）。いずれの場合も、間違ったメッセージを送信しています。代わりに、CSSを使用して、必要な適切なサイズまたはフォントに要素のスタイルを設定する必要があります。

ダブルH1タグ

もう1つの一般的な問題は、ページに2つ以上のH1タグがあることです。 H1タグがページの主なアイデアである必要があります。ページにアクセスするすべての人（およびすべてのクロールボット）に、そのページの内容を伝える必要があります。そのため、1つだけにする必要があります。 2つのH1タグを持つことは、ページ上で2つの異なる信号を送信するようなものです。一部の人々やプロのテーマでさえ、H1タグにロゴを入れる傾向があります。したがって、ページごとに1つしかないことを確認してください。

That! Company White Label Services

すべての画像は背景画像です。

画像の背景があることには何の問題もありません。画像は人目を引くものであり、サイトに多くの価値をもたらし、ユーザーに製品やサービスを購入させることができます。ただし、すべての画像を背景画像にする必要はありません。最近サイトで作業していると、CMSがすべての画像を背景画像に変換していることがわかりました。ここでの目的は、それらをより簡単にスタイル設定およびサイズ変更することです。見栄えが良くなるかもしれませんが、ページ上の画像の利点の重要な部分である代替テキストを失うことになります。代替テキストは、画像の内容を説明し、スクリーンリーダーが画像の内容を識別するために使用します。すべての画像を背景画像にすることで、ページのアクセシビリティを低下させ、障害を持つ人々にとってより困難になり、ランキングでGoogleからヒットする可能性があります。

JavaScriptを使用したCSSのレンダリング

JavaScriptを介してCSSを不必要に提供すると、ページの読み込み時間が長くなります。余分な手順を踏むよりも、ヘッダーでCSSファイルをリンクする方がはるかに優れています。また、単純なアニメーションやホバー効果にJavaScriptを使用すると、CSSを介してはるかに高速に実行できるため、読み込み時間が長くなります。不要なときにJavaScriptフレームワークを追加するだけでも、読み込み時間が長くなる可能性があります。ボタンをアニメーション化するためにjQueryをロードするようなものです。バニラJavaScriptを作成する代わりに、またはさらに優れた方法として、CSSのアニメーション要素またはCSSアニメーションスタイルシートを使用すると、読み込みがはるかに速くなります。

HTMLでのWeb要素のスタイリング

HTMLファイル内の要素を直接スタイリングすることは物議を醸すトピックです。 WordPressやその他のCMSの多くのテーマやプラグインは、スタイルシートやその他のプラグインの上書きに継続的に依存しています。これは通常、悪い習慣と見なされます。一部のコンテンツ作成者は、テーマスタイルを変更したいため、コンテンツに直接スタイルを書き込みます。これの問題は何ですか？ HTML要素に直接書き込まれたスタイルがCSSファイルのスタイルを上書きすると、CSSの問題が発生することがよくあります。これを回避するには、HTMLに直接書き込む代わりに、Web要素にクラスを割り当て、スタイルを追加する新しいスタイルシートを追加します。これにより、サイトを誤って壊したりスタイルを設定したりする可能性のある競合するシートの問題を回避できます。

レイアウトのスタイル設定にHTMLを使用する

テーマはCSSセレクターとHTML構造を組み合わせることが多いため、これは少し注意が必要です。これにより、ページを読みやすく機能的にする重要なスタイルを壊さずにHTML構造を変更することが難しくなります。例えば：

この例では、前者のHTMLの構造を変更すると、その要素は構造に依存していたため、その要素のすべてのスタイルが失われます。代わりに、後のクラスでのように、スタイルを構造から切り離すと、HTML構造を変更した場合でもCSSを再利用できます。

適切にフォーマットされたページは、十分に最適化されたページです。

あなたのページの内容はランキングの大きな要因です。したがって、Webページの要素を適切に利用しています。具体的には、HTML、CSS、JavaScriptは、ページのSEOを最適化する上で同様に大きな役割を果たします。各Web要素の役割を知り、それを適切な方法で使用することにより、ランキングを上げることができます。機能的で魅力的なページを作成するだけです。 CMSのテーマを切り替えたり、カスタムCSSまたはJavaScriptをページに追加したりすることを検討している場合は、もう一度調べて、Web要素を正しく使用していることを確認してください。