H1 image replacement question
-
Working with content folks on a new section of our website. Developed a new logo for this section of the site, and they want to incorporate the style of it into all of the page headings. The only way to pull this off is to use images for H1's. (Without getting into unnecessary detail, they have to be images - too precise to try text over background images.)
I made everyone aware of the importance of H1 text for SEO purposes, but they really want these images.
When I first attempted SEO back in 2003, I recall doing a site using CSS image replacement along these lines:
Widget Page
#example {
background: url(../images/example.gif) no-repeat;
text-indent: -5000px;
}That was nearly 10 years ago, and they definitely ranked for the H1s at the time which led me to believe it worked.
Anyone know if this is considered an acceptable practice today? I read some other threads about enclosing the image in
tags and relying on the ALT text, but that doesn't seem to be a good option.
-
Yeah, and we have no idea what's at play. I mean, if we look around the net and see who is abusing with CSS hiding and who isn't my guess is that 95% of people abuse it...and if I'm Google I'm going to go ahead and put it an automatic point deduction somehow based on how many of those I see, then hope that people who manually rate these sites 'undo' the auto deduction. At least, that's what would make the most sense.
I wouldn't risk it, but that's just me. I'm sure the alt tag in the h1 would do just fine and doesn't 'hide' anything...Although...you could certainly abuse that as well since it's mostly hidden, lol. Just use a flippin google fonts or a cufon font replacement and make it as close to what you want as possible. The less images the better! My competitor could easily make their h1 image into text and it would probably look even better than the image they use.
-
Yeah, seems like either of these options would work. Yours seems like the safe route.
For my method, it's easy to see how someone could use it just to stuff the actual H1 with keywords that have nothing to do with the image and then move them off-screen. My content people's argument was that if we do it and our text in the image matches exactly what we're pushing off-screen, then we should have nothing to worry about.
My only fear would be that some algorithm sees a margin-left set to some large negative number and assumes it's black hat.
-
I get it, just not sure that it's 'ok' to do...anytime you're hiding something, it cant be good right? Anyway, I'd do something like:
<code># <img< span="">src="whatever.jpg" alt="whatever" /></img<></code>
That should work right? At least, I think it's your best bet. I will say that I do have competitors that do what you are wanting to do and some are higher than me in rankings, so...your call, but I wouldn't.
-
Why do they have to be H1?
Anyway...Matt Cutts says no CSS hiding!
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Best way to Load Responsive Images for Responsive Site?
Hello All, Can anyone suggest be best technique to load responsive images? We are developing responsive site so looking for good ideas from your side so that it load very fast. Thanks!
Web Design | | micey1230 -
Can Image File Names be Masked?
If we "mask" file names for our website but they are left their original name on the server, will Google notice this? Client wants to mask them in order to name them with keywords but not change on the actual server.
Web Design | | Atlanta-SMO0 -
Using H1 in a carousel
Hi, I have a homepage with a carousel rotator that has text in it. My question is what's the best practice in using H1 tags within the carousel. Will placing H1 tags in each be considered excessive H1 use and if so can this still cause SEO problems? Thank you
Web Design | | mirel0 -
Can white text over images hurt your SEO?
Hi everyone, I run a travel website that has about 30 pre-search city landing pages. In a redesign last year we added large "hero" images to the top of the page, and put our h1 headlines on top of them in white. The result is attractive, but I'm wondering if Google could be reading this page as "white text on white page", which is an obvious no-no, especially if it could seem that we're trying to hide text. Here's an example: http://www.eurocheapo.com/paris/ H1: Expert reviews of cheap hotels in Paris I should add that our SERPs for these city pages has dropped (for "Cheap hotels in X"), but it could obviously be related to other issues. Any advice would be appreciated. Many thanks! Tom
Web Design | | TomNYC0 -
Text in Images vs. Alt tags
Hi on my homepage i h ave multiple images They have the appropriate alt text for each image, but the text which the image displays is not written into the page and styled using CSS rather than placing text within an image. Is this a issue worth correcting, or is it sufficient to have just alt text for each image. Any major pros from having putting the text in the image into the CMS using appropriate CSS styling to achieve the same effect.
Web Design | | monster990 -
Linking to an image with the keyword in the title and alt tags.
Hi guys, Just thought I'd ask for opinions about an ecommerce catalog I'm working on. I don't know if it's even worth worrying about, but here's the scenario. Let's say I'm linking to a category called 'Sale' using an image, I have the title tag of the link as 'Sale', the image title is also 'Sale' as well as the alt tag. The HTML looks like this: Sale The page itself is: http://www.fashionbasicsonline.com/catDisplay So my question is, do you think I'm stuffing the keyword in too many times there? It's CMS driven so I could have the alt tag as 'Sale Products' or one of the titles as 'Sale Catalog' perhaps, do you think there would be a benefit in doing that? Maybe it's microoptimisation and I should be looking at other low hanging fruit, but I'm just trying to come up with the best scenario. Would love to hear what you think. Cheers, Bruce p.s. Looking forward to meeting as many people as possible at MozCon next week 🙂
Web Design | | bruce_werdschinski0 -
H1 Tags with Location
Hi Everyone, I have a question about trying to get location information into title tags without having it look spammy. What I've been trying is something like this: h1 { font-size:18px; } .h1_sub { font-size:10px; } Why Choose My Company Minnesota Website Design | Minneapolis Web Development I'm not sure if that is a good thing to do or not as everything is inside the h1 tag and visible to the engines however it makes it less prominent on the page and gives a better layout. You can see it at www.mltgroup.com/company.php Thanks
Web Design | | MLTGroup0 -
Java-script slider & H1 tags
If you have a java-script slider on the homepage, each slide has an H1 tag heading, which of the H1 tags would google most likely consider? all of them or just the first one?
Web Design | | GraphicMail0