web-dev-qa-db-ja.com

代替テキストとCSSスプライト（SEOと速度）

JS、css、gzippingを連結し、LABjsを介してすべてのJSをロードし、以前に<img>タグを介して個別にロードされた画像にCSSスプライトを使用して、HTTPリクエストを減らし、リクエストをブロックするようにサイトを作り直しています。

これまでのところ、進歩は大きく、5倍のページ読み込みパフォーマンスの向上です。ただし、多くのターゲットを絞ったキーワードやフレーズについては、Googleのオーガニック検索ランキングでトップ5に入っています。 alt属性を持つ非常に多くのimgタグを削除すると、SEOが損なわれる可能性があります。

ALTタグのマニピュレーション/削除およびSEOポジションへの影響に関する経験はありますか？前のランクは「スティッキー」ですか？

seocsssprite
5
leeoniya

一般に、アイコンなどの非接線画像には画像スプライトのみを使用する必要があります。コンテンツに関連する画像は、imgタグのままにしてください。

そうは言っても、おそらくいくつかのキーワードを失うことについてあまり心配する必要はありません。ただし、アクセシビリティのためにタイトルタグを使用することをお勧めします。

5
DisgruntledGoat

1：代替テキストはGoogle SEOに必要ですが、Googleがさまざまな種類のブラウザーとユーザーの能力に合わせて設計されたWebサイトを好むためです。たとえば、テキスト専用ブラウザー、無効なjavascriptなど。オーガニック検索結果全体。

2：代替テキストでのキーワードの使用は問題ありませんが、代替テキストを使用して画像が何であるかを正確に説明している場合のみです。したがって、代替テキストの目的です。言い換えると、代替テキストの目的がキーワード密度のためではない場合。ヒント：品質が高く、関連性が高く、オリジナルのコンテンツがある場合、キーワード密度について心配する必要はありません。

3：ページ速度は、Googleのアルゴリズムのもう1つの要因です。これは、速度がユーザーエクスペリエンスを優先するためです。 CSSスプライトは、httpリクエストを減らすことでページ速度を下げるのに役立ちます。 Googleを含む多くの主要なWebサイトがそれらを使用しています。

そうは言っても、私はここでそれを探しているので、もっと情報を提供できたらと思います。

更新：

このトピックに関する詳細情報がある可能性があるため、以下の投稿を読んでください

この問題に関連する別の投稿はここをクリック

4
joe

alt属性を使用して、テキストのみのブラウザー、スクリーンリーダー、検索エンジンなどに置換テキストを提供する代わりに、CSSスプライトの表示と非表示に使用している要素内に通常のテキストコンテンツを置くことができます。 CSSを使用します。

これを行う最も簡単な方法の1つは、次のようなものを使用することです。

.Sprite {
    display: block;
    text-indent: -9999px;
    overflow: hidden;
}

他の可能な解決策には、Sprite要素内のspanでテキストをラップし、絶対位置を使用して画面領域の外に移動するか、visibility: hiddenを使用して不透明度を0または単純に設定します。

コンテンツの大部分がCSSで隠されている場合、検索エンジンはあなたがそれらをだまそうとしていると思うかもしれません。

また、ほぼすべてのHTML要素にtitle属性を設定できることを忘れないでください。ほとんどのブラウザーは、それらをホバーツールチップとして表示します。

2
Ilmari Karonen

Googleがクロールするキーワードを増やすためだけにコンテンツやキーワードを非表示にすることは、他のKaronenが提案したように良い考えではありません。コンテンツ内のキーワードを隠してGoogleをだまそうとしないでください。進歩が順調に進んでいる場合、続けてください。サイトの読み込み時間を改善していることは、Googleにとってプラスです。オーガニックランキングには、imgタグのalt属性よりも多くの役割があります。ランキングを下げることが心配な場合は、dofollowである関連性バックリンクをさらに取得するようにしてください

2
Anagio

これを解決するには、オプションを再考します。

<a>またはdisplay:block;で<div>で定義された領域を作成し、overflow hidden;を使用してオーバーフローとposition:relative;を非表示にします。

次に、<img>画像スプライトを絶対位置に配置します。これは、親を配置したため可能です。

次に、画像で:hoverを使用して位置を変更します。

これで、スプライトはimgタグに基づいているため、altテキストを使用できます。

次の例は、それぞれ50px x 50pxの2つのバージョンのアイコンを備えたFacebook Spriteに基づいています。画像の合計の高さは100pxです。

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
    display:block;
    position:relative;
    width:50px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}
#fb {
    position:absolute;
    top:0;
    left:0;
}
#fb:hover {
    position:absolute;
    top:-50px;
    left:0;
}
</style>
</head>

<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="Sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>
1
Paul