H1 in a graphic

[kaching]

hi folks,

i come a cross quite some pages who have their headings (H1) show in a graphic, instead of just typed on a page. But when i switch CSS off, i see the exact headings (H1) in text, so they we're probally hidden behind the graphic.

They probally do this because they are using a nice bought font that their visoters don't have.

does google allow this? (coze they use the same text in the graphic as in the H1) Or do they see this a hidden text and u risk a slap on the vingers with it?

if my question wasen't clear, i can show an example

thnx in advance !

[Bruno]

I don't know if is allowed or not, probably not but why you even think about it, just use h1 for what it is and you don't need to worry about anything. Allowed or not this can't make such a big diffrence in serps.

[kaching]

i wanna use H1 for what it is, notheing else.

for example, i have this favorite font, wich is a bought font, so there's a very small change that other people also have it in their font-list. I would like to use it for the style of my site (for the headings)
I saw this methode -graphic with the same text over the H1- and thought if this is an accept way, i could use it too.

but i never read anything about it so i thought i ask the experts it ..

[seo-ireland]

kaching -

I have never read that this would harm rankings and in my opinion I think it would be acceptable to the search engines. If you are just mirroring the text in the H1 tag inside the graphic there should be no problems.

If you're using the hidden H1 to perform keyword stuffing however prepare to be penalised.

[SEOJaimie]

I wrote the code for this. I wrote an article on "Magic Buttons," the anchor text -> button variation on this theme here:

http://www.rustybrick.com/seo_articles_12.php

Much of the code is the same for "magic text." I use it on Camera Repair dot Com (http://www.camerarepair.com)

There's also an article on alistapart. His code is easier to implement, but not as flexible.

Let me know if you're interested. I'll help you set it up if you're nice.

J.

[kaching]

thnx , i'm going to look into that :)

[md_doc]

Just be careful about speed. I know the stuff that SEOJaimie wrote does cache the images but none the less if you are still stuck in the world of tables then your users will see a second or two lag time as that image is loaded and the page is rendered.

I always suggest just using CSS to render your H# tags to look the way you want them. This way if google does start parsing javascript then they wont think you are trying to trick them.

[SEOJaimie]

I may attempt to fix this delay partially by allowing the user to specify images to cache before load. This could be integrated into the CMS. However, I do believe Matt is right that it waits until the page is loaded fully to render, which seems to lag. I'll revisit the problem soon.

[md_doc]

Well the issue is actually rather simple. The image has no width and height.

So when a browser goes to render it the browser actually needs to load the image before it knows the size. Some browsers handle this better than others and move things around as the pages load.

The problem is actually multiple things.

1. The browser does not know the size of the image.

2. The image cannot be cached in the web servers memory because it is a php file that actually pulls the image from the hard drive (after a logic check to see if it is already cached).

3. Most people that do SEO move things around on the page so the Hx tag is most likely very high on the page if not the highest element. (This leads to bigger issues related to rendering as it seems to slow down the entire page from showing).

4. The browser starts out displaying a Hx tag but then using javascript searches the entire page for the Hx tags and replaces them with the code needed to display the image.

So there are just a lot of steps to do something that can very easily be done by adding in a css class to the Hx.

Maybe I just like to keep things simple.

[SEOJaimie]

Well the issue is actually rather simple. The image has no width and height.

^ Not entirely true. I wrote it Matt. There is a partial solution to this. Set the class of the h1 to be approximately the proper size in px. It won't jump anymore.

So when a browser goes to render it the browser actually needs to load the image before it knows the size. Some browsers handle this better than others and move things around as the pages load.

^ That makes it jump, but it doesn't make it lag. What makes it lag is the loading of the image after .onload.

The problem is actually multiple things.

1. The browser does not know the size of the image.

^True, but not the problem.

2. The image cannot be cached in the web servers memory because it is a php file that actually pulls the image from the hard drive (after a logic check to see if it is already cached).

^ Minor problem. Who cares?

3. Most people that do SEO move things around on the page so the Hx tag is most likely very high on the page if not the highest element. (This leads to bigger issues related to rendering as it seems to slow down the entire page from showing).

^ I don't do this, but I agree here.

4. The browser starts out displaying a Hx tag but then using javascript searches the entire page for the Hx tags and replaces them with the code needed to display the image.

^ This should be fast. The lag is on the onLoad issue. A possible fix to this is using the name attribute and doing a getElementsByName(). That's indexed by the browser as it's parsed, so there's no parsing. I tested this. Both IE and Firefox seem to work quickly in this regard.

So there are just a lot of steps to do something that can very easily be done by adding in a css class to the Hx.

Maybe I just like to keep things simple.

You do. I like toys.

But most of the lag is the onLoad issue. I'm going to benchmark the parsing of the HTML and see if it merits a change to getElementsByName. I'll post a followup.

J.

[smik]

hi jaimie,

hope you get this post, unfortunately the email I sent to your rustybrick-accout didn't reach you, don't know why, so I try it this way.

I found your Script for the Magic Buttons on the web and find it very useful. But I got a few questions about it, due to I'm no programmer and only know little to none about PHP.

1. I wanted to use Stewart Rosenbergers Dynamic Text Replacement in a CMS, but didn't know how to make it work in that system, so I asked the forum-members of that CMS to help me. They said, that this script is evil because the replaced text is generated each time new the user opens the site, so it costs high CPU-times. Is it true, and does your script generate the buttons each time new, the site is opened, or does your script generate the peplacement-images once and stores them in a special folder from which the HTML-sites grab those images?

2. Could one define the button-style in a CSS-class, like e.g.:

.my_button {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
background-image: url(my_bkgimage.gif);
background-repeat: no-repeat;
background-position: center center;
}

so you didn't have to have 3-images for the background of the button as you solved it with the button-template, or is it impossible?

3. Would you be so gently to write an addition to Stewart Rosenbergers Dynamic Text Replacement in which the images are generated once and stored in an extra folder to which the HTML-Sites refer(if it's not arleady done with your Magic Button script). Only if you got time and the pleasure to do that. I tried to find a contact adress to Stewart himself, but didn't find one, and I can't write it myself unfortunately.

I'm looking forward hearing from you,

best regards

smik

[rustybrick]

Jaimie no longer works at RustyBrick. You can contact him via his blog at http://www.seoegghead.com/