How to Hide headers and instead use images in CSS


We nowadays have a bunch of search engines like google, Yahoo!, Bing. What these search engines do is they have a look at the HTML of the written webpage and rank it accordingly as they can’t see or are blind to CSS. Now, in today’s post, we’ll look at how we can hide an tag using CSS. We want to use our logo, but not miss out on SEO.

So, the technique applied here isn’t too much hard work nor very easy. It requires some work, with some knowledge provided here.

THE HTML

The HTML here is quite simple, we just make an <h1> tag here as well as an tag :

<h1 class="title">WDA
<img class="logo" alt="" src="path">

So, as you can see, we just made a header in the webpage. And then we made an image with a class of logo. We will get the SEO juice but with an image.

THE “OLD” CSS METHOD

I’ve written old in here because this method has been used in the web since, like, 2003! So, accordingly, it’s really old. However, here it is:

h1
{
  text-indent: -9999px;
}

The code is quite simple here. It pushes the text -9999px off the screen. Though, it does not cause much problem issue, this could be a problem in some olden browsers.

We aren’t there yet, folks. We also have a newer solution to tackle the problem

THE “NEW” CSS METHOD

This isn’t really like the “awesome, unknown, cool, modern” method, but a simpler one, which will cause lesser problems in the near future. Here it is:-

.title span
{
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

So as you can see, what this technique does it is it makes the after the h1 in which the title is stored, of width and height 0 and overflow: hidden. This is the new technique which will have a much lesser chance of performance issues.

DEMO HERE →

So, what did you learn today ? Tell me in the comments.

Enter your email address to follow this blog and receive notifications of new posts by email.

2 thoughts on “How to Hide headers and instead use images in CSS

  1. Hey nice trick , It help me out in my website. Thanks for sharing 🙂 . Well keep sharing & i have one question about your website .. So, when you got free time then please contact me on given email id.

    Thanks again.
    Have a nice day

    Like

Add your Awesome voice. Let's have a meaningful conversation. And remember, don't be a spammer (We hate 'em).

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s