: Do span elements in the middle of a word affect a crawler's ability to detect content? I have a site with a heading tag like this: <h1><span class="initial">H</span>andyman <span

@Si4351233

Google is clearly reading the rendered HTML and separating the word because of the span tag. Since headers are pretty important to tell Google what keywords are a little more important on your page than others you may re-consider your code to be semantically correct. While you get a nice looking header is it worth it if google sees andyman instead of Handyman

Vote Up Vote Down

@Pierce454

You can also use CSS and the :first-letter psuedo-element like this
jsbin.com/acagop/2/edit#html,live
Edit to demonstrate multiple words: jsbin.com/acagop/4/edit#html,live
Edit to demonstrate Raffael Luthiger's idea to wrap entire words: jsbin.com/acagop/6/edit#html,live
<style>
h1:first-letter {
font-size:300%;
color:red;
}
</style>

<h1>Welcome</h1>

Vote Up Vote Down

@Cooney921

You could use jQuery to select the first character and change it on the fly, so crawlers wouldn't see the span.

Refer stackoverflow.com/questions/3039397/jquery-select-first-letter
Update:
There is a plugin for this feature as well: 812studio.com/initial-letter-a-jquery-plugin-for-making-drop-caps-and-more/

Vote Up Vote Down

@Bryan171

The better way would be to use CSS. You can use text-transform like:

text-transform: capitalize;

Vote Up Vote Down