They should adapt to us, not the other way around. He's also being dishonest in his answer. CSS hiding works great for SEO purposes and if they have images turned off they'll see the text.
Does the same apply for CSS Spriting? Correct me if I'm wrong but the question is directed at doing this for just one image. Recently many sites around the internet use CSS Sprites to improve web loading speed and it seems the only two ways to get any sort of SEO benefit from these is by doing a text-indent to hide original text or a transparent gif with alt tag on top of the sprited image.
It would be better to have quicker pages than worry about Google penalising us. Apple.com does this also
He said do not use CSS to 'Hide' text. I interpret using text-indent, display:none as 'hiding' but using css to position an image over text that is still inside of the viewport is not hiding...
Though I love the vids, this time its not accurate. The ALT tag is made to place an ALTernate text for images that are not displayed (ie text-readers for blind people). Their browser needs to see the alternate tag and read out its contents. For HTML Strict, the alt IS mandatory, but its better to user the title= tag for text. Soo.. I have logo and add alt=Company name title=Click for the Company name homepage" to the code. Good for SEO, user friendly and the best coding.
How come sites like google analytics and youtube don't have img's with alt text if it is supposed to be best practice?
What I mean to say is - how come you are emphasizing images with alt tags over css solutions when you dont have images + alts for your own logos and implement css to display them the way they are now. Or are you just saying that if we are going to have text there with the logo it is preferable to do it with img + alt rather than negative indentation?
I agree with Matt, but think it's also an issue of semantics. It makes sense to have your logo be an img tag. It's an important image to the document (opposed to images used for your background textures/gradients etc).
If someone turns off CSS on the page, they'll still see the logo.. the rest of the page will just look like a poorly "styled" Word Doc. But it's all "important" content.
Hmmm wouldn't it make more sense to wrap something that is so major as logo text (which is either company name or company slogan) in a header tag? Also it's arguable from a semantic sense that it is a header (h#) more so than an image (img)
That's what he's talking about, unfortunately. Many people use a h1, with a css image replacement technique. This is extremely common in Wordpress and Joomla template sites, as it's oftentimes easier than messing with the other bits of code.
I don't agree on wasting an H# tag on your logo... definately not an H1 or H2. Typically you're URL is going to give you some strength for your logo anyway. Spend the h1 and h2's on important stuff related to that particular document.
matt, i know that in theory this is the best practice. but wouldn´t my results be better if I hide my text with CSS? I know that I could be punished for that, but if it there was no punishment for this?
Had a friend ask me this question earlier this week. I raised an eyebrow at the idea of using CSS to hide anything - alt text has always been the only way to go.
The idea of css image replacement is often for screen readers, which is why text-indent is used instead of display or visibility. You can turn off the reading of alt-text for some screen readers (apparently) and this can create accessibility issues.
I use javascript to hide headings and replace it by a Flash to have antialiased text. I made this change recently and seen a drop in my rankings... does it have something to do with it?
Very good advice. I think I can apply it on my page.
agapitoflores001 2 months ago
They should adapt to us, not the other way around. He's also being dishonest in his answer. CSS hiding works great for SEO purposes and if they have images turned off they'll see the text.
texxs01 2 months ago
What if we do both? Add the Logo text in the alt tag and use CSS to hide the h1 text to the side?
omurphy27 3 months ago
Do I apply the alt-tag on the link or the div containing the logo?
sexntuna 5 months ago
@sexntuna to the image itself
smkrew 4 months ago
People use Over Nine Thousands Pixels!
HQExperience 6 months ago
Does the same apply for CSS Spriting? Correct me if I'm wrong but the question is directed at doing this for just one image. Recently many sites around the internet use CSS Sprites to improve web loading speed and it seems the only two ways to get any sort of SEO benefit from these is by doing a text-indent to hide original text or a transparent gif with alt tag on top of the sprited image.
It would be better to have quicker pages than worry about Google penalising us. Apple.com does this also
konorokingdom 1 year ago
this isnt counter strike..
One777oto72ide 1 year ago
He said do not use CSS to 'Hide' text. I interpret using text-indent, display:none as 'hiding' but using css to position an image over text that is still inside of the viewport is not hiding...
jwxap0p 2 years ago
Though I love the vids, this time its not accurate. The ALT tag is made to place an ALTernate text for images that are not displayed (ie text-readers for blind people). Their browser needs to see the alternate tag and read out its contents. For HTML Strict, the alt IS mandatory, but its better to user the title= tag for text. Soo.. I have logo and add alt=Company name title=Click for the Company name homepage" to the code. Good for SEO, user friendly and the best coding.
(from a moderate CSSr)
TerminatorFiles 2 years ago 10
This comment has received too many negative votes show
sorry, but you dont know what you're talking about. we need to use sprites. as do you.
joejoey 2 years ago
do you even know who he is - lol
shardul2050 2 years ago 6
How come sites like google analytics and youtube don't have img's with alt text if it is supposed to be best practice?
What I mean to say is - how come you are emphasizing images with alt tags over css solutions when you dont have images + alts for your own logos and implement css to display them the way they are now. Or are you just saying that if we are going to have text there with the logo it is preferable to do it with img + alt rather than negative indentation?
xtinctkatz 2 years ago
I agree with Matt, but think it's also an issue of semantics. It makes sense to have your logo be an img tag. It's an important image to the document (opposed to images used for your background textures/gradients etc).
If someone turns off CSS on the page, they'll still see the logo.. the rest of the page will just look like a poorly "styled" Word Doc. But it's all "important" content.
Iodine74 2 years ago
Hmmm wouldn't it make more sense to wrap something that is so major as logo text (which is either company name or company slogan) in a header tag? Also it's arguable from a semantic sense that it is a header (h#) more so than an image (img)
andrew623 2 years ago
That's what he's talking about, unfortunately. Many people use a h1, with a css image replacement technique. This is extremely common in Wordpress and Joomla template sites, as it's oftentimes easier than messing with the other bits of code.
danaofthebells 2 years ago
Exactly why I'm pointed out that it's odd Google says "ignore correct semantics, just do it this way"
andrew623 2 years ago
I don't agree on wasting an H# tag on your logo... definately not an H1 or H2. Typically you're URL is going to give you some strength for your logo anyway. Spend the h1 and h2's on important stuff related to that particular document.
Iodine74 2 years ago
BTW... was referring to the fact that most URLs represent the same text (or a variation) presented in the logo.
Iodine74 2 years ago
matt, i know that in theory this is the best practice. but wouldn´t my results be better if I hide my text with CSS? I know that I could be punished for that, but if it there was no punishment for this?
vegetaway 2 years ago
Had a friend ask me this question earlier this week. I raised an eyebrow at the idea of using CSS to hide anything - alt text has always been the only way to go.
oandymcio 2 years ago 2
The idea of css image replacement is often for screen readers, which is why text-indent is used instead of display or visibility. You can turn off the reading of alt-text for some screen readers (apparently) and this can create accessibility issues.
danaofthebells 2 years ago 2
I use javascript to hide headings and replace it by a Flash to have antialiased text. I made this change recently and seen a drop in my rankings... does it have something to do with it?
quebecclimber 2 years ago
LOL... i'm glad u had the same answer i did.. YES!!! it makes a difference.
djpaisley 2 years ago 2