6

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.

Improve this question
2
  • nice question! javascript is the answer
    – skyline26
    Jul 28, 2012 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.
    – MrWhite
    Jul 30, 2012 at 16:14

4 Answers 4

Reset to default
4

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>
Improve this answer
10
  • 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, 2012 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, 2012 at 21:36
  • It's not capitalizing and styling the first letter of each word
    – Anagio
    Jul 28, 2012 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, 2012 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, 2012 at 12:33
2

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

Refer https://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/

Improve this answer
0

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

text-transform: capitalize;
Improve this answer
1
  • I should have mentioned, I have already applied text-transform: uppercase;
    – pgraham
    Jul 27, 2012 at 22:18
0

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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