Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have a site with a heading tag like this:

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

I've done this so that I can apply a bigger font size to the first letter of each word. However, in webmaster tools I see the keyword 'andyman' under Optimization > Content Keywords

Is that anyway to acheive a bigger font size for first letter) without effecting a webcrawlers ability to detect the word?

Update:

I can't simply use text-transform: capitalize as the element in question already has text-transform: uppercase; and I would like the effect to more dramatic than that provided by the uppercase letters of most fonts.

share|improve this question
    
nice question! javascript is the answer –  skyline26 Jul 28 '12 at 17:07
    
@toPeerOrNotToPeer: In light of Google's increasing ability to index JavaScript generated content, I'm not sure that JavaScript is necessarily the answer. –  w3d Jul 30 '12 at 16:14
add comment

4 Answers 4

up vote 4 down vote accepted

You can also use CSS and the :first-letter psuedo-element like this

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

Edit to demonstrate multiple words:
http://jsbin.com/acagop/4/edit#html,live

Edit to demonstrate Raffael Luthiger's idea to wrap entire words: http://jsbin.com/acagop/6/edit#html,live

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

<h1>Welcome</h1>
share|improve this answer
    
He has multiple words within his header <h1> tag that will only work with the first letter of the first word it's not doing what he wants at all. –  Anagio Jul 28 '12 at 21:31
    
Incorrect it will work for the first letter only. Does not apply to each word and works in all modern browsers jsbin.com/acagop/4/edit#html,live –  Anthony Hatzopoulos Jul 28 '12 at 21:36
    
It's not capitalizing and styling the first letter of each word –  Anagio Jul 28 '12 at 22:28
2  
@Raffael : That makes sense, css would need to be adjusted since it doesn't work on inline elements. I've updated my answer to include the new idea. –  Anthony Hatzopoulos Jul 29 '12 at 0:58
1  
The OP is already doing a hack job with the <span class="initial">. Doing this in php or javascript is a moot point to argue about. Both would have performance issues, php would slightly effect backend (fixed with caching) and javascript solution would be a bit worse and also slow down client side performance and make FOUC effect. I wouldn't do either personally. CSS Capatalize should have the same effect and be proper English. And maybe the OP can just use an already Capatalized webfont, but again slowness which I don't like personally. –  Anthony Hatzopoulos Jul 30 '12 at 12:33
show 5 more comments

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

Refer http://stackoverflow.com/questions/3039397/jquery-select-first-letter

Update: There is a plugin for this feature as well: http://812studio.com/initial-letter-a-jquery-plugin-for-making-drop-caps-and-more/

share|improve this answer
add comment

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

text-transform: capitalize;
share|improve this answer
    
I should have mentioned, I have already applied text-transform: uppercase; –  pgraham Jul 27 '12 at 22:18
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.