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
-
Does anyone have data on the effect of multiple H1 tags on a page?
One of my website's sub-domains is fed information from a job board master-template, thus my site (and hundreds of other sites) is just branded styling pulling from one external source. Because of the way this master template is set up (not very concerned with SEO best practices), I have found the need to hide the H1 coming from the master template, and display a new separate H1 in my styling. This is being done with user-experience in mind, but how will search engines respond to having two H1s (one hidden, one visible) on a page? I understand that a single H1 is usually ideal, and hidden page components are typically frowned upon because they don't add user value... but in this case, the hidden component is solely for the benefit of the user. I would like to find the best balance of SEO and UX, so I am very interested in any experimental data or case studies on a similar situation.
Web Design | | pbailey0 -
Above the Fold Content - Use of large images
Hi All, Our designers have come to the SEO team to ask if have a large image across the top of the page taking up a large majority of the above the fold real estate will impact our SEO. Our initial thoughts are no as long as we have an optimised H1 visibal to the user landing there which informs them what the page is about. Any thoughts would be appreciated.
Web Design | | J_Sinclair1 -
Booking Engine SEO Question
Hello, I am working on a travel site-mostly content based, but for the deals section of the site, we were thinking of being powered by expedia...if we go with a booking engine (Expedia) will that hurt us with regards to SEO? If Google is looking for content and not another booking engine how can we overcome this? Do you think this approach is positive? any thoughts or advice on this, thanks so much.
Web Design | | lanigreg0 -
Question & Answers Forum pluggin for wordpress
I am looking to install on my website a Question & Answers Forum pluggin for wordpress Like MOZ Q&A What pluggin do you recommend for questions and answers Would be to replace the one on this site that i don't like due to some problems i have on configuration. http://www.propdental.es/dentista/
Web Design | | maestrosonrisas0 -
Nav / Sitemap Question. Using a "services" page vs just linking directly to individual service page?
Okay, so our company offers video production, web design, and web marketing services. While we do offer these services individually, our goal is to get our clients to integrate these services together. Our nav is currently like so : home - about - video - web design - web marketing - blog - contact Now I've seen businesses and agencies also use a nav with a "services" button instead of listing out their service offerings (if they have more than 1, like us). The services button usually links to a category page or has a drop down with links to the company's individual services. I'm wondering if there is any benefit to having a main services page like this and linking to the individual pages off of it (video ,web design, marketing, etc). Or if we should just keep it the way we have it now (since we've already got some page authority on the individual service pages). I know this may not be the most important aspect of our site and we may be over-thinking it but any thoughts/ideas would be greatly appreciated, thanks!
Web Design | | RenderPerfect0 -
H1 tag optimization question
Hey folks, I've got a question about h1 coding. Our H1 tags are currently coded like this: [http://www.rapitup.com/mf-doom](<a href=)" class=" current">MF Doom Do you think this would be better? [http://www.rapitup.com/mf-doom](<a href=)" class=" current"> MF Doom My guess is that the second example would be better, and even if not better we know it's not worse. Thoughts? Thanks!
Web Design | | irvingw0 -
Negative Margins - Image Navigation
I created a good navigation but can't replicate it with html or css so I might have to stick to images. What would you recommend as a best practice for images in navigation? This site doesn't need to rank really high, it's mostly for a portfolio.
Web Design | | BeTheBoss0 -
What's the best SEO option for jQuery image carousels?
My client wants a fancy jquery carousel at the top of their home page, as is all the rage these days. I would like to add some nice SEO friendly text to that carousel, but I'm not sure how best to do that..I assume that by keeping the text which will appear in the carousel in divs on the page, which will be swapped out as the images cycle, it should still be easily picked up by search engines?
Web Design | | TroyCarlson1