Hiding Text Behind an Image using Visibility Hidden CSS Code

Comment on WordPress Header Images by SEO Dave.

SEO wise it’s in the greyhat area, all depends on your intentions and implementation.

The SEO test should always be if a Google reviewer looked at your site would they have a problem understanding what you are doing AND will that person consider it acceptable.

For example if you took a screenshot of your home page header area as it is now and cut out the text Amish America and made a Stallion Header image from it, turned off the title via the Stallion options (so “Amish America” text at the top would be gone) it would for all intense and purposes look exactly the same as it does now, but you’ve lost the H1 header on the home page.

Would you see a reasonable person having a problem with instead of turning off the header title (Amish America) instead you kept the text in a H1 header and hid it?

The justification for this is you want the text Amish America, but you want it in image format so you can make it pretty :-) and the image that will contain the pretty text is served as a background image via CSS : a background image is basically invisible to search engines, you can’t add relevance to the image by adding alt text as you would an image you’d add to a post.

SEO wise I think that’s acceptable as long as the rest of the site is SEO whitehat. If you run a site where you tip toe that fine line between whitehat SEO and blackhat SEO there’s a point where though each little SEO technique used separately shouldn’t cause a Google penalty, do enough and a Google manual review might decide as a whole it deserves a penalty (I don’t think you run your site that way, so not an issue IMO).

The Stallion theme is a reasonable step away from the blackhat SEO line, there’s the comment author links that look like text links, but aren’t (SEO wise same impact as having nofollow links without damaging the site by deleting link benefit) and I have sites that’s run that code for years with no problems (some of the sites have had manual Google reviews: one was even temporarily penalized when I added some thin affiliate content, the site recovered soon after removing the thin affiliate content).

If you want to make the change I’d advise the following, make sure the text Amish America is of reasonable font in the image, to be safe it really should include that text, you’d be pushing it if the image showed a stereotypical Amish family on a horse and cart near farm land.

Remove the home page link code from the header.php and header2.php files.

Change

<?php if(st_title_hide()==1){ ?><?php if (is_page("archives") || is_year() || is_month() || is_day() || is_home() || is_404() || is_author()) { ?><h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1><?php } ?>
<?php if (is_category() || is_single() || is_page() || is_search()) { ?><span><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></span><?php } ?>
<?php if ( function_exists('is_tag')){ ?><?php if (is_tag()) { ?><span><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></span><?php } ?>
<?php } ?><?php } ?>

to

<?php if(st_title_hide()==1){ ?><?php if (is_page("archives") || is_year() || is_month() || is_day() || is_home() || is_404() || is_author()) { ?><h1><?php bloginfo('name'); ?></h1><?php } ?>
<?php } ?><?php } ?>

edit the css file for the colour scheme you are using (ie style-simple.css)

Change

.h1disc h1, .h1disc span {
font-size: 1.3em;
font-weight: normal;
width: 640px;
margin: 0px;
padding: 0px;
}

to

.h1disc h1, .h1disc span {
font-size: 1.3em;
font-weight: normal;
width: 640px;
margin: 0px;
padding: 0px;
visibility:hidden;
}

These code changes will remove the link part of the blog title text link leaving only a H1 header with the blog name as the text. This H1 header will only show on the home page (and it’s archives) and the monthly archives (if you use them). On the rest of the site there will be nothing loaded in that area. The CSS change hide the whole H1 header.

This would be the safest way to achieve what you want, if you don’t use the monthly archive widget the H1 header with text Amish America (no longer a clickable link) would be hidden only on the home page and it’s paged archives.

You could only make the CSS code change, but it would mean the H1 header is still a clickable link and on the other pages you’d have a hidden link back to home, so not ideal.

David