web-dev-qa-db-ja.com

Wordの途中にあるスパン要素は、コンテンツを検出するクローラーの能力に影響しますか?

次のような見出しタグを持つサイトがあります。

<h1><span class="initial">H</span>andyman <span class="initial">S</span>ervices</h1>

これは、各Wordの最初の文字に大きなフォントサイズを適用できるようにするためです。ただし、ウェブマスターツールでは、[最適化]> [コンテンツキーワード]の下にキーワード 'andyman'が表示されます

とにかく、単語を検出するウェブクローラーの機能に影響を与えずに、最初の文字のフォントサイズを大きくすることはできますか?

更新:

単純にtext-transform: capitalizeを使用することはできません。問題の要素には既にtext-transform: uppercase;が含まれているため、ほとんどのフォントの大文字で提供される効果よりも劇的な効果を望んでいます。

6
pgraham

CSSと :first-letterpsuedo-element を使用することもできます

http://jsbin.com/acagop/2/edit#html,live

編集して複数の単語を示します:
http://jsbin.com/acagop/4/edit#html,live

編集して、単語全体をラップするというRaffael Luthigerのアイデアを示します。 http://jsbin.com/acagop/6/edit#html,live

<style>
h1:first-letter { 
  font-size:300%;
  color:red;
}
</style>

<h1>Welcome</h1>
4

JQueryを使用して最初の文字を選択し、オンザフライで変更すると、クローラーがスパンを見ることができなくなります。

参照 https://stackoverflow.com/questions/3039397/jquery-select-first-letter

更新:この機能用のプラグインもあります: http://812studio.com/initial-letter-a-jquery- plugin-for-making-drop-caps-and-more /

2
Ellipsis

より良い方法は、CSSを使用することです。次のようにtext-transformを使用できます。

text-transform: capitalize;
0
Aurelio De Rosa

Googleはspanタグにより、レンダリングされたHTMLを明確に読み取り、Wordを分離しています。ページ上で他のキーワードよりも重要なキーワードをGoogleに伝えるにはヘッダーが非常に重要なので、意味的に正しいコードを再検討することができます。 Googleがandymanの代わりにHandymanを見つけたら、見栄えの良いヘッダーを取得する価値があります

0
Anagio