Are hiding H1 tags bad for SEO?

scott — Thu, 12 Nov 2009 21:56:11 +0000

This is one of those questions that I have seen over and over. I have come up with my own methodologies of doing this, in fact, I did it on this blog at one time, however I have always found that if you are trying to hide something, Google and the other big engines will look at it as hidden. Google may also penalize you for this, since this is something that could likely be considered Black Hat. Don’t get me wrong, I wish that we could do this, especially since the Word Press H1 tag is in the header. This is a situation in my opinion where you need to use H1 as what it is designed for TEXT. This is one of the most important attributes in organic SEO, so why would we want to trick a browser that could black list you in some way, drop your rankings. My suggestion is to position the H1 text in a way that it looks like your brand instead of fighting against it. Use relative position to move your text so that it lays on top of a background image and looks as if it seamlessly sits in the design.

So, I want to know what YOU think!

Questions View Results

Cropping an image on the web using CSS

scott — Mon, 20 Apr 2009 18:03:41 +0000

Ever had an image that you could not re-size, or did not want to re-size, however wanted to crop? Maybe the image was too large for your page or, you just wanted to show a small portion of the image. Using this technique you can also position text on top of the image, like a caption, without having to edit the image. This a very cool method to use, if for SEO purposed or to be reference the text in the HTML.

The intention is for you to use the CSS in the header of your document or in a linked Cascading Style Sheet (.css)

First lets start with an image as illustrated below:

I need to crop this image and I want to give it a caption directly on the photograph. For this particular instance I just need to show the front of the vehicle.

First I will start by creating a DIV contain for this:

Above is a line of code that creates just a simple container. Next we need to create a class for the image for the CSS. You will actually use the class tag within the image tag to call to the CSS. The CSS class beloow will be added to your stylesheet.

.image {
border-width: 1px;
border-color: #ffffff;
border-style: solid;
width:225px;
height:70px;
background-position:50% 95%;
background-repeat:no-repeat;
}

In the CSS code above, I have created an image class with a 1 px border and and an area much small than the image. I have also told the background not to repeat itself.

Pontiac G6

Above you will see my cropped image with a title at the top in black. To make the image appear you HAVE to put in some kind of text for the image to show.This is what I used for the code:

background-image:url(http://myserver/mycar.jpg)”>
Pontiac G6

Notice that I had to use a little in-line CSS to make the image appear (background-image). This way, you do not have to put the background-image URL in your style sheet, in the case if you want to have several images cropped with a specific size using the .image tag as a reference. Also make sure to have the break behind the last DIV.

Now, how would I make the text in visible in a different position and in a different color? Start by creating a “title” class like we previously created the “image” class.

.title {
font-family: Arial, Gadget, sans-serif;
font-size: 14px;
font-weight: bold;
color:yellow;
position: relative;
top: 25px;
left: 30px;

}

Pontiac G6

Above you will see that I have positioned the text and have styled it to be a different font, color, and weight. By setting the position to Relative and adjusting the top and left, you can position your text to be anywhere within this DIV container.

Again, this is a case where we created a style with the CSS file so that we could create a “template” of sorts that we could reference again. The other method is to put all of the styling within a “style=” tag within the DIV.

Scott Lassiter Design » SEO

Are hiding H1 tags bad for SEO?

Cropping an image on the web using CSS