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!
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
-
Images are Blocked Resources in webmasters. Anything wrong?
Hi all, The images in our sub directory are hosted from a sub domain. This sub domain is blocked to robots. So, I can see all these images are shown as "Blocked Resources" in webmasters. Is anything wrong with this? If so, we also usually block robots to image files location in our website. What's the difference? Thanks
Web Design | | vtmoz0 -
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 -
H1 for users or SEO in this case
Hello, A client of mine has an online store with a pre-made cart. In this cart the name below the product in the category pages and the H1 tag on the product pages themselves are the same textbox entry (they have to be the same thing) We want to add two product features to the product name, but this will make the H1 longer and diluted. Let me give you a fictional example, A category page for cross-trainer shoes would have products in it. Below each product it says things like "Nike Sports One Shoes" and "Adidas Action Series Shoes". We want to make it "Nike Sports Shoes size 7 through 12 for running and walking" and "Adidas Action Series Shoes size 5 through 10 for running, walking, and hiking". The reason for the change is that we want users to know about size and one more important feature before they visit the product page in our case to save them time. But this changes the H1 on the product page (a pre-made cart problem) from "Adidas Action Series Shoes" which is the direct search term to "Adidas Action Series Shoes size 5 through 10 for running, walking, and hiking" which is not a direct search term. This dilutes the keyword in the H1 but will save users time. We will put a tag inside the H1 just so you know, so that we can bold the name of the product to still be seen clearly, I hope that's not an HTML SEO problem. **What do you think, for users with diluted SEO or better SEO in this case? Our product pages are our most important pages in this industry. Thanks**
Web Design | | BobGW0 -
How to make my site title H1?
Hi In my Header.php I have the following php code for my title: <title><br /><?php<br />// Generate Page Title dynamically<br />if (is_home()) {<br /> bloginfo('name'); ?> - <?php bloginfo('description');<br />} elseif (is_category()) {<br /> single_cat_title(); ?> - <?php bloginfo('name');<br />} elseif (is_single()) {<br /> single_post_title();<br />} elseif (is_page()) {<br /> bloginfo('name'); ?>: <?php single_post_title();<br />} elseif (is_404()) {<br /> bloginfo('name'); ?> - <?php _e("Page not found", "fungames");<br />} elseif (is_search()) {<br /> bloginfo('name'); ?> - <?php _e("Search results for", "fungames"); echo esc_html($s, 1);<br />}<br />?><br /></title> This generates a good title different for every page/post I have on my site. But is now H1. I want the same code if, but with H1 tag somewhere in it. Cant figure it out how to do it! Can u help please?
Web Design | | Catinas970 -
What is the best slideshow pluggin for seo in order to show alt of the images
what is the best slideshow pluggin for seo in order to show alt of the images
Web Design | | maestrosonrisas0 -
Why can't I ask this question - It is not too short
I tried to post a question which was at least 15 words long and received an error saying the question was less than 5 characters QrXcp
Web Design | | FFTCOUK0 -
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 -
SEO ethical practice in question
A family friend asked me to take a look at her website. www.designsbymaida.com First thing i noticed is what seemed a 301 redirect or a forward to http://funktionaldesignstudios.com/dbm-old/ So her site is hosted with what it looks like, in his site(funktonaldesigns). What does this means in terms of how google sees her site and in terms of SEO. My thought is that he is boosting his domain name. He is getting the link juice. Thanks for the insight and help.
Web Design | | QualityHosting1