: SEO effect with different font for some characters? I have a different font for some characters in my website, so the code is like this: <h1>L<span style="letter-spacing: -5px">a </span><span

@Margaret670

There is no hard evidence on this. Although it is conceivable that search engines and other programs treat span (and other inline elements) as breaking words, such behavior a) has no grounds in HTML specifications, b) has not been demonstrably detected, c) would break a large part of pages in identifying words, since such markup is common and the only way in general to style letters of a word differently (except in the sense that you could add the elements in client-side JavaScript).

However, in this case, it is possible to avoid the use of single-character markup. You might consider doing so for clarity (which affects maintainability), but you would also avoid the potential SEO risk mentioned. Example:

<style>
.special:first-letter { color: red; }
.special { display: inline-block; }
</style>
<h1><span style="word-spacing: -10px">La </span><span
class="special">Charte</span> qualité mes <span
class="special">Rideaux</span></h1>


So instead of styling specific letters (here styled red, for definiteness) wrapped in span, this would style the first letters of some words, so that span contains an entire word, not a letter. Since span by default is an inline element and :first-letter would not apply to it, I have set it to an inline block. Similarly, to remove spacing between words, this code sets negative word spacing, instead of character spacing. Note that in the original code, the span actually contains two characters, a letter and a space, and to get the same amount of spacing with word-spacing, I use a value twice as large.

Vote Up Vote Down

@Harper822

I can't tell for sure but I don't think it's great for SEO as your HTML is only used for style, not for meaning. Google might be smart enough to figure out there are words but I personally would avoid adding spans around letters on sites where I care about SEO.

Instead you should use ::first-letter and ::nth-letter() to avoid putting HTML tags around specific letters.

Vote Up Vote Down