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 -
Multiple H1 Tags for different section on one webpage in HTML5 Website? Should I have only one?
https://www.tcs.com website has multiple H1 tag on around 40 out of 1000 pages. Webpage has different section and each section is important that's why used multiple H1 tag (one h1 for each section) **I understand, google will not penalize for multiple H1. But having multiple H1, for site like tcs, is it good or should use only one H1 tag? **Pls check https://www.tcs.com to see heading tag(6 heading tag used).
Web Design | | JayprakashSEO0 -
To delete or not? That is the question..
In the case of an eCommerce store with a large catalogue of branded goods the inventory is constantly being adjusted as products become discontinued. Each year most fashion brands have 2 or 3 launches. At this same time they will delete some (not all) of previous years collections. Once we have sold through the remaining inventory of last season's products the question is how to proceed? a) delete products to avoid customers landing on page, then only to be disappointed when product is no longer available to purchase.. b) keep products however mark as discontinued / no longer available and show a link to a similar product if applicable.. I am coming around to the opinion that b) provides a better user experience. However will this growing catalogue of old products (pushed to bottom of category page) help keep content of site full and have SEO advantages? If this is the case then that helps confirm b) as best choice??
Web Design | | seanmccauley0 -
Google pagespeed / lazy image load
Hi, we are using the apache module of google pagespeed. It works really great, helps a lot. But today I've asked me one question: Does the "lazy load" feature for images harm the ranking? The module reworks the page to load the images only if the are visible at the screen. Is this behavior also triggered by the google bot? Or are the images invisible for google? Any expirience about that? Best wishes, Georg.
Web Design | | GeorgFranz0 -
Can someone suggest a good wordpress plugin for compressing images?
I am building a new website and it has 500+ photo images. I've got less than 100 in there at the moment and the page speed is already very slow. I'm trying to reduce the size of the images before uploading but without a photoshop application it is very difficult. Are there any great plugins for wordpress that can help?
Web Design | | skehoe0 -
Question About Site Redesign and Nav / Page Structure
Hey guys, i am currently redesigning our company's site, and have come across some things that I'm not quite sure of. We used to have individual service pages in our main navigation (design, video, marketing) before the redesign. In this new design, i had the idea of making just one "services" or "capabilities" page, where these three services would each be outlined, and each service would have a list of links to more specific landing pages. Obviously, breaking it up correctly with HTML5 using the andtags. What I'm wondering is that if i'm going to be penalized for having those three services that aren't necessarily related too closely on the same page as opposed to having the one page for each service (like we have now). Any help would be greatly appreciated, and let me know if i need to elaborate more. Thanks in advance!
Web Design | | RenderPerfect0 -
Live Text in Navigation Vs. Image - Does this affect SEO
I recently was asked the question if having live text in the navigation vs and image affect seo. For example, refer to this link http://markup.io/v/avsaenq856kw the navigation highlighted is seperate images. The html elements read : ![](</span><strong style=)/images/procedures.png"> Live text html reads like this: Breast » What is better for seo value, or does it now matter having live text or an image?
Web Design | | Red_Spot_Interactive0 -
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