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
-
Using WebP Image Alongside Existing Images
Is it worthwhile to add in WebP images alongside existing images? WebP Images can be three times smaller than PNGs and 25% smaller than JPGs, according to a plugin option I am looking at. The alternative WebP images are provided via CDN. Does anyone have any experience with this, and is it worth doing?
Web Design | | GrouchyKids0 -
Specifying image dimensions for site speed vs. responsive
I'm working on improving site speed from an SEO perspective, and one bit of advice I see often is to specify the dimensions of the images you're using so the browser knows the size of the image it needs to download. However, I am wondering what impact this may have if the site is responsive? If you specify the large dimensions suited for a desktop browser, would you be forcing a mobile browser to use that sized image? Has anyone seen dramatic improvements in site speed using the <picture>tag for responsive images?</picture> Thanks! Jannette
Web Design | | JannetteP1 -
To Genesis or not to Genesis that is the question
Hi everyone, i know this subject has been raised few times in the past, but i wanted to reach out to the community and find out what is your take on the advantages and disadvantage (if any) for using the Genesis Framework when building a new websites for Clients. I know for fact that many developers are complaining that they find it harder to manage the Genesis Framework, which i do appreciate has a bit more of comparability issues when it comes to plugins and modifications, but i always looked at it as a positive rather then a negative. My personal opinion is that Genesis framework is more of a stable Skeleton that is better read by Search Engine (from a technical SEO point view) and is harder for hackers to penetrate. Would have love to hear the community experts opinion pros and cons. Cheers. Dan
Web Design | | artdivision0 -
How to create this image effect for my home page
How do I make a wide, somewhat fast loading image effect like this home page has: 3dcart.com work on my website bobweikel.com I'm asking for how to create the effect (with small enough image kb to load) and what the image should be of in your opinion. Thanks!
Web Design | | BobGW0 -
Schema question
Caresma Building
Web Design | | esiow2013
Alamang St., Bel-Air,
Makati City,
Philippines
1209 (632) 890-0062
jane-doe@xyz.edu Question 1: What is the difference if i remove itemprop="address" after the Question 2: Do i need this line or should I remove it since "telephone" and "email" are also under "PostalAddress"? Thanks in advance! 🙂0 -
SEO Issues From Image Hotlinking?
I have a client who is hotlinking their images from one of their domains. I'm assuming the images were originally stored on the first domain (let's call it SiteA.com) and when they were putting together SiteB.com, they decided to just link to the images directly on SiteA.com instead of moving the images to Site B. Essentially hotlinking. Site A is not using the images in any way and in essence is just a gateway for their other sites and in this case a storage for their images. It doesn't use those images at all, so it really doesn't get any benefits of the images being referenced since I read that Google sometimes counts that hotlinking as a "vote" for the original image. But again, since ite A doesn't use the images that are being hotlinked at all, there's no benefit for Site A. My concern is that it's affecting their SEO for Site B because it makes it look like Site B is simply scraping data by hotlinking those images from Site A. Their programmer suggested creating a virtual directory so that it "looked" like it was coming from Site B. My guess is that Google can see this, so then not only will it look like Site B is scaping/hotlinking images, but also trying to hide it which may send up red flags to Google. My suggesstion to them was to just upload the images correctly into their own images directory on Site B. They own the images, so there's not any copyright issue, but that if they want proper SEO credit for that content, it all needs to be housed on the correct server and not hotlinked. Am I correct in this or will the virtual directory serve just as well?
Web Design | | GeorgiaSEOServices1 -
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 -
Another Panda question
Hi all, Yes, it's another Panda question.... Would Panda effect an entire site or just specific pages. Many people have said that it penalizes entire sites, however, some of the questions that Google is said to have asked Panda testers seem to be page specific. What's the general consensus?? Thanks
Web Design | | A_Q0