web-dev-qa-db-ja.com

画像とSEOを含むヘッダータグ

これはSEOにとって悪いことですか？デザイナーはそれを思いついた。基本的に、各ヘッダーテキストの横にアイコンがあります。そのため、各ページとそれぞれのヘッダーには、ページに関連付けられたアイコンがあります。

マークアップ：

<h1>
<span class="span"><img class="spanImg" src="../img/pageIcon.png"></span>
<span class="text">Header Title Text Here</span>
</h1>

CSS：

.span, .text {
vertical-align: middle;
display: table-cell;
color: #CCC;
}

.spanImg {
width: 40px;
height: 40px;
margin-right: 8px;
}

ヘッダータグにもCSSマークアップがあります。

これがSEOヘッダータグの悪い習慣かどうかに興味があるだけです。

seohtmlh1
2
Cool Shape

このコードないかもしれないは害を引き起こしますが、画像やテキスト以外のものを聞き手タグに入れないことを強くお勧めします。その理由は簡単です。ヘッダータグは、検索エンジンにとって非常に重要な意味上の手がかりです。これはコンテンツタグであり、フォーマットタグではありません。このため、ヘッダータグはテキストコンテンツのみにする必要があります。たとえば、イメージbeforeヘッダータグを持つことができるため、これを行う理由はありません。

0
closetnoc

技術的には画像はヘッダーではなく、ヘッダーは本の章のようにテキストベースのコンテンツ用に設計されていますが、これにより、Googleや他の検索エンジンはダッキングアヒルを与えません！

ただし、他の場所で入手したコードを使用したり、現在のコードを変更する手間をかけられないため、この方法を使用するようです。 vertical-alignが必要な場合は、上部のコンテナを使用して、たとえば次のようにします。

<div class="example-container>
    <img src="example.jpg" alt="example">
    <h1>Example</h1>
</div>

そして、子ではなく、親コンテナでvertical-alignを使用します。使用できます：

.example-container {
    vertical-align: middle;
    display: table-cell;
    color: #CCC;
}

.example-container img {
    margin: 0 auto;
    display: block;
}    

.example-container h1 {
    text-align: center;
}

また、サンプルコードでは使用していないため、ALTタグを使用することを忘れないでください。これはSEOに役立ちます。

1
Simon Hayter