次のような見出しタグを持つサイトがあります。
<h1><span class="initial">H</span>andyman <span class="initial">S</span>ervices</h1>
これは、各Wordの最初の文字に大きなフォントサイズを適用できるようにするためです。ただし、ウェブマスターツールでは、[最適化]> [コンテンツキーワード]の下にキーワード 'andyman'が表示されます
とにかく、単語を検出するウェブクローラーの機能に影響を与えずに、最初の文字のフォントサイズを大きくすることはできますか?
更新:
単純にtext-transform: capitalize
を使用することはできません。問題の要素には既にtext-transform: uppercase;
が含まれているため、ほとんどのフォントの大文字で提供される効果よりも劇的な効果を望んでいます。
CSSと :first-letter
psuedo-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>
JQueryを使用して最初の文字を選択し、オンザフライで変更すると、クローラーがスパンを見ることができなくなります。
参照 https://stackoverflow.com/questions/3039397/jquery-select-first-letter
更新:この機能用のプラグインもあります: http://812studio.com/initial-letter-a-jquery- plugin-for-making-drop-caps-and-more /
より良い方法は、CSSを使用することです。次のようにtext-transform
を使用できます。
text-transform: capitalize;
Googleはspan
タグにより、レンダリングされたHTMLを明確に読み取り、Wordを分離しています。ページ上で他のキーワードよりも重要なキーワードをGoogleに伝えるにはヘッダーが非常に重要なので、意味的に正しいコードを再検討することができます。 Googleがandyman
の代わりにHandyman
を見つけたら、見栄えの良いヘッダーを取得する価値があります