web-dev-qa-db-ja.com

<h1>タグを非表示にし、Googleから禁止されない正しい方法は何ですか？

私が取り組んでいるWebサイトでは、メインのロゴとしてCSSで定義された画像を使用しています。 HTMLコードは次のようになります。

<h1>Something.com | The best something ever</h1>

CSSで定義された画像のみを表示し、h1タグからの情報を検索エンジンのみに渡したいと思います。

これを行う正しい方法は何ですか？グーグルはこれについて非常に厳しいです、私はdisplay：noneは間違っていることを知っています、可視性はどうですか：hidden？

前もって感謝します！

htmlcssseo
22
Martin Zahuta

visibility: hiddenで大丈夫です。

つまり、画像がcontentの一部であり（そして、会社のロゴはプレゼンテーションではなくコンテンツであることを敢えて言います）、アクセシブルなhtmlに関心がある場合は、コードを次のように変更することを検討してください。 css background-imageではなく、imgおよびtitleernateテキストを含むalt要素として画像を含めます。

さらに、<h1>要素内のキーワードに検索エンジンを引き付けたい場合は、それらの単語をページに2回以上含めることをお勧めします。たとえば、ページタイトルはh1要素よりもはるかに関連性の高い場所です。

24
hpique

最も簡単で、誰にでもできる、SEOソリューションに最適なソリューションは、

<h1><img src=logo.png alt="Something.com | The best something ever"></h1>
20
Ms2ger

画像をh1の背景として設定し（幅/高さが収まるように設定）、テキストインデントを-9999pxのようなクレイジーなものに設定します。これにより、CSSが無効になっている（クロールされているなど）と、ボットは背景ではなくヘッダーのテキストを表示します。

例：

CSS

#myHeader {
width:200px;
height:50px;
background: url('lcoation/of/the/image.jpg') top left no-repeat;
text-indent:-9999px;
}

HTML

<body>
...
<h1 id='myHeader'>HELLO WORLD</h1>
...
</body>
3
cdutson
<h1 style="font-size: 2px; margin: 0px;">Something goes here</h1>

魅力のように動作します。..;-)スクリーンリーダーはそれを解釈し、SEOに影響を与えません。

3
user3633421

最初にh1を非表示にし、2番目にh1内で一般的な語句を使用すると、良いSEO結果が得られません。

サイズ設定にh1を使用するだけでなく、クラスを使用してスタイルを設定できます。

H1タグには、次のようなキーワードの豊富な情報を含める必要があります。

自動車修理

自動車修理は、私が理論的に取り組んでいる特定のページに関連するキーワードです。

それが理にかなっていると思います。

2
talkingD0G

これを行う「正しい」方法は、テキストをタイトルバーまたはページのメタテキス​​トに含めることです。

2
me_and

私はその可視性を考えています。うまくいきます。もう試しましたか？

1
user282835

ブロックのサイズを変更するとうまくいきます：

h1 {
    overflow: hidden;
    width: 1px;
    height: 1px;
}
0
Chikiro

この問題の完全な記事はここで説明されています https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/ だから、私はこのコードを使用してスクリーンリーダーをサポートするだけでなく、一部のh1を非表示にし、代わりに（ロゴ）のような画像を使用します

.offscreen{
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

もっと見つけるためにリンクに従ってください

0
Motaz Homsi

あなたのウェブサイトはたった１つのページで構成されていますか？

それ以外の場合は、各ページの見出しをh1タグ。サイトのキャッチフレーズではありません。すべてのページで同じ見出しを繰り返すと、ほとんど役に立たなくなります。

0
Guffa