[HOW-TO] Make your Welcome Headers an image!

So, why change your welcome headers to an image?

The same exact text is being read on every single page by the spiders who see it. Because of it's prominent placement on forums, they are apt to use it to describe each of your page.

We started seeing blurbs from our welcome header messages show up in search engine "descriptions" of individual pages, and it said nothing about the content of the page to people who might find us.

It also dillutes the value of other keywords on each forumhome, or thread display, because they show up on every single page.

Spiders can not read the text in images (yet! ), so we should take advantage of that to keep content relevent keywords as important as we can.

================================================== ===============

STEP 1) Make an image with the text you want for your welcome headers.

I prefer Adobe Photoshop, but many image programs out there can do it.

Make it a gif, transparent background so that it fits on all your themes and you dont have to worry about color differences at all.

Make parts you want people to click on 'bold' so they stand out.

Use the same font if you want it to "blend in" to the rest of your page, or use something different to make it stand out even more!

Make sure that the width of the image is less than the width of your page. If fixed width, make sure it's less or equal to the width of the lowest image resolution you care about for your users.

IE: If people who use less than 800x600 don't matter much to you, then make it 800 or less.

When done, it should look something like this:


================================================== ===============

================================================== ===============



Once you're done, in Dreamweaver or Frontpage (or another program if you have it):

STEP 2) Create New: HTML

Insert -> Image

Put the tag attributes you want, if any

Click Okay

At the bottom, you should see something similar to this:



STEP 3) Select the square:



STEP 4) Select the text you want to be a link.

At the bottom, you want to add the link you want that text to go to, any alt text, as well as whether or not you want it to load into a new page.



Repeat this step for other areas you want to select, like is done on The Liberty Lounge Political Forums

Once done, you should see some code like this in the code part of your HTML editor:

Code:

<div align="center">

<img src="http://www.libertylounge.net/status/political-forums-welcome.gif" width="800" height="200" border="0" usemap="#Map" alt="Liberty Lounge Political Forums - Welcome" />
<map name="Map" id="Map"><area shape="rect" coords="23,96,193,116" href="http://www.libertylounge.net/forums/register.php" alt="Register today!" />
<area shape="rect" coords="504,136,587,160" href="http://www.libertylounge.net/forums/sendmessage.php" alt="Contact us!" />
</map>

</div>

STEP 5) AdminCP -> vBulletin Options -> Welcome Headers

You'll want to click on the "click here" link under the "Enable Guest Message" part of the Welcome Headers option, and paste the above code from your HTML editor in there.

Then, viola!

I only changed the guest one, because it's the only one spiders will see. The other ones can remain as text for your users, but now spiders wont index the same text on every. single. page.

I hope this helps some of you who've sent me a message asking how I did it.

Sticky?

**made sticky **

Thanks, I will start to use this technique as well. Excellent tip and it makes perfect sense when you mention it, tho I wouldn't have thought of it myself!

Thanks, this sure did make it easy for me to get this done.

interesting, I never thought about this text showing on all pages being bad but now that you say that it's very clear..
Thank you for bringing this up, I'll be working on this.

thanks, I'll get this done soon

Thanks alot I was looking for that

Look ma'! A map for XHTML Strict/Transitional!
Formatted Bytes
Mouse over the word Link.
Look at the code to see how easy it was to make it Valid XHTML 1.0 Strict.

This is the code I used to display the map:

Code:

<p id="map">
	<span><a id="register" href="map.php" title="This is my link :)"></a></span>
</p>

I really don't want to be rude. But I need to say this (please don't take it the wrong way):
Please start reading the news related to HTML, it's really important to stay updated with the latest information. Soon your old code you use on a regular bassis will not work anymore. You will be cut to work tons of hours recoding boring HTML.

Did you know that CENTER tag is already deprecated in XHTML 1.0 Transitional, not to talk about Strict (where everyone is moving)?

We use XHTML, not HTML, it's a big diference. XHTML is a family of current and future document types and modules that reproduce, subset, and extend HTML 4. XHTML family document types are XML based, and designed to work in conjunction with XML based user agents.

Originally Posted by TECK

Look ma'! A map for XHTML Strict/Transitional!
Formatted Bytes
Mouse over the word Link.
Look at the code to see how easy it was to make it Valid XHTML 1.0 Strict.

This is the code I used to display the map:

Code:

<p id="map">
    <span><a id="register" href="map.php" title="This is my link :)"></a></span>
</p>

I really don't want to be rude. But I need to say this (please don't take it the wrong way):
Please start reading the news related to HTML, it's really important to stay updated with the latest information. Soon your old code you use on a regular bassis will not work anymore. You will be cut to work tons of hours recoding boring HTML.

Did you know that CENTER tag is already deprecated in XHTML 1.0 Transitional, not to talk about Strict (where everyone is moving)?

We use XHTML, not HTML, it's a big diference. XHTML is a family of current and future document types and modules that reproduce, subset, and extend HTML 4. XHTML family document types are XML based, and designed to work in conjunction with XML based user agents.

So what's the point of the post? What/where/which code is wrong?

Technically, it's nothing wrong with what Liberty posted in the first post.
The current browsers support (for now) deprecated code.
I was simply trying to sensibilize the people, to start using new code techniques, that's all.
If we get used to code using the new guidelines, it will be a lot easier for us to adapt when the real change comes.

That's the reason I posted an example, just to see a different coding approach, compatible with future w3.org development.
A quick example:
Alignment, font styles, and horizontal rules in HTML documents
The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to "center". The CENTER element is deprecated.

Floren.

Thanks! This is a great tutorial! I've been meaning to do this, just haven't had much time!

You're welcome

Thanks for posting this libertylounge! Definitely a great way to improve my welcome headers plugin from an SEO perspective.

Thanks for this!

STEP 5) AdminCP -> vBulletin Options -> Welcome Headers

You'll want to click on the "click here" link under the "Enable Guest Message" part of the Welcome Headers option, and paste the above code from your HTML editor in there.



wheere can i find this?????

i dont have this