Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Images Insted Of Header Tags

This is a discussion on Images Insted Of Header Tags, within the HTML/XHTML section. This forum and the thread "Images Insted Of Header Tags" are both part of the Designing Your Website category.

 
 Reply to this topicStart new topic
> Images Insted Of Header Tags, SEO pitching a fit...
Popje
post Mar 17 2008, 04:22 PM
Post #1


Rapid Squeezer
****

Group: Members
Posts: 199
Joined: 15-February 08
From: Plymouth
Member No.: 153
Heya

I've had to use an image instead of a header tag on two of my pages, the alt="" is all filled in with same text that would have been used for the <h1> anyway. However, the SEO is now not a happy chappy. Any ideas what I should do now?

Cheers
Popje


--------------------
QUOTE
I'm challenged enough without any extra weirdness in my life!
Go to the top of the page
 
+Quote Post
Vanessa
post Mar 17 2008, 04:41 PM
Post #2


Rapid Squeezer
****

Group: Members
Posts: 182
Joined: 14-February 08
From: England
Member No.: 108
Another way I've seen of doing it is rather than have the wording you want within the alt, you put the actual wording you want within the <h1>, but then specify that you don't display it, you display the image instead, so for example, in your code you have:

CODE
<div id="heading">
<h1><span>Heading Words</span></h1>
</div>


Then in your CSS you have:

CODE
span {
      display:none;
}

#heading h1 {
      background-image:url('images/headinggraphic.jpg');
}


This post has been edited by Marc: Mar 18 2008, 11:55 AM


--------------------
Vanessa

There are 10 types of people in the world - those that understand binary and those that don't.
Go to the top of the page
 
+Quote Post
Popje
post Mar 17 2008, 05:29 PM
Post #3


Rapid Squeezer
****

Group: Members
Posts: 199
Joined: 15-February 08
From: Plymouth
Member No.: 153
QUOTE (Vanessa @ Mar 17 2008, 09:41 PM) *
Another way I've seen of doing it is rather than have the wording you want within the alt, you put the actual wording you want within the <h1>, but then specify that you don't display it, you display the image instead, so for example, in your code you have:

CODE
<div id="heading">
   <h1><span>Heading Words</span></h1>
  </div>


Then in your CSS you have:

CODE
span {
        display:none;
   }
  
   #heading h1 {
        background-image:url('images/headinggraphic.jpg');
   }

Oh thank you so much! I'll do that now. BTW - I love your sig file. It made me laugh so loudly, the dog jumped!!

Erm, it didn't work. I'm not sure what I've doen wrong. I copied the code but now the image won't show.

Page - no image

This post has been edited by Marc: Mar 18 2008, 11:55 AM


--------------------
QUOTE
I'm challenged enough without any extra weirdness in my life!
Go to the top of the page
 
+Quote Post
Popje
post Mar 17 2008, 06:29 PM
Post #4


Rapid Squeezer
****

Group: Members
Posts: 199
Joined: 15-February 08
From: Plymouth
Member No.: 153
I've done this and it appears (pardon the pun) to have worked:

CODE
<h1 style="display:none">Jersey Micro Breaks to the Channel Islands</h1>
<img src="images/banners/new/jerseymicrobreaktopimage89.jpg" alt="Jersey Micro Breaks to the Channel Islands" width="549" height="90" />


But I'd really prefer it if I could get the recommended way to work.

Cheers
Popje
Reason for edit: Fixing the [code] tags... (Site Update!)


--------------------
QUOTE
I'm challenged enough without any extra weirdness in my life!
Go to the top of the page
 
+Quote Post
JustinStudios
post Mar 17 2008, 06:38 PM
Post #5


Rapid Squeezer
****

Group: Members
Posts: 156
Joined: 15-February 08
From: US of A
Member No.: 150
I'm sure Vanessa's way works just fine however I do it slightly different.
CODE
the html
<h1 id="hideme">Text here</h1>

and the css
#hideme {margin-left: -4000px;}


Enjoy
Reason for edit: Same as Above edit notice.


--------------------
Currently Available for work: - XTHML, CSS, Flash, Actionscript, PHP, ASP, Ajax -
interested in movies? Read some of my reviews on my blog
Go to the top of the page
 
+Quote Post
Popje
post Mar 17 2008, 07:32 PM
Post #6


Rapid Squeezer
****

Group: Members
Posts: 199
Joined: 15-February 08
From: Plymouth
Member No.: 153
QUOTE (JustinStudios @ Mar 17 2008, 11:38 PM) *
I'm sure Vanessa's way works just fine however I do it slightly different.
CODE
the html
  <h1 id="hideme">Text here</h1>
  
  and the css
  #hideme {margin-left: -4000px;}


Enjoy

Quick question - Is this 'better' than display: none; ? I ask this as some of the pages I have to do need to 'pre-load' images, but I can't put them in the body OnLoad tag as the <body> tag is part of a template and if I listed every single image that was needed for the entire site on the template it'd take about 3 hours to load the index page alone! unsure.gif

Cheers
Popje

This post has been edited by Marc: Mar 18 2008, 11:56 AM
Reason for edit: Same as above edit.


--------------------
QUOTE
I'm challenged enough without any extra weirdness in my life!
Go to the top of the page
 
+Quote Post
JustinStudios
post Mar 17 2008, 10:14 PM
Post #7


Rapid Squeezer
****

Group: Members
Posts: 156
Joined: 15-February 08
From: US of A
Member No.: 150
I use the margin-left technique as I know it works and it prevents me from having to create another div. Also, I am not sure if hidden div's get indexed or not.. Never really tested that out. But i know the margin-left does get indexed.


--------------------
Currently Available for work: - XTHML, CSS, Flash, Actionscript, PHP, ASP, Ajax -
interested in movies? Read some of my reviews on my blog
Go to the top of the page
 
+Quote Post
Vanessa
post Mar 18 2008, 12:55 AM
Post #8


Rapid Squeezer
****

Group: Members
Posts: 182
Joined: 14-February 08
From: England
Member No.: 108
I'm pretty sure they do get indexed even if hidden - I don't think that the search engines care about what's in the style attributes, they only look at the main code don't they? So therefore wouldn't know if it's been hidden (I could be completely wrong on that though, I haven't seen it said anywhere, I'm just guessing really!). My way definitely works when I did it, so I'm not sure why the image didn't show when you tried it, but Justin's way sounds good too. Maybe someone else will come in with another suggestion, then you'll have your pick of several!

(Glad you like my sig, made me laugh a lot too when I heard it somewhere, so I wanted to share! I like your dog in the avatar girl_smile.gif ).

This post has been edited by Vanessa: Mar 18 2008, 12:58 AM


--------------------
Vanessa

There are 10 types of people in the world - those that understand binary and those that don't.
Go to the top of the page
 
+Quote Post
Jason
post Mar 18 2008, 05:11 AM
Post #9


Master of the Universe
******

Group: Mentor
Posts: 1,094
Joined: 15-February 08
From: London, England
Member No.: 141
QUOTE (Vanessa @ Mar 18 2008, 05:55 AM) *
I'm pretty sure they do get indexed even if hidden - I don't think that the search engines care about what's in the style attributes, they only look at the main code don't they? So therefore wouldn't know if it's been hidden (I could be completely wrong on that though, I haven't seen it said anywhere, I'm just guessing really!).



SEO bots don't like being cheated. Its like putting loads of key words in your content then hiding them. I just don't think it works.

There are many things you can do with your page.

Most obviously fix this.

CODE
<h3>Condorbreaks.com - Micro Breaks to Guernsey</h3>


to
CODE
<h1 class="contenttitle">Condorbreaks.com - Micro Breaks to Guernsey</h1>
h1.contenttitle {Insert styling here}


Same here
CODE
<li class="imatm"  style="width:100%;"><a href="/">Condorbreaks Home</a></li>


to

CODE
<li class="imatm"  style="width:100%;"><a href="/"><h1>Condorbreaks Home</h1></a></li>
li a h1 {syling}



h1 tags really help SEO.


What font are you using for your logo? It looks like it could be replaced by a h1 tag and maneuvered into position with css to sit on top of the image. Obviously it depends on the font though.


Finally, your content could do with some work, work out what your key words are then try to insert key words into it. For example instead of saying that the passengers will jump on a ferry it should always be a condor ferry. etc etc.
Reason for edit: Same as above edit.


--------------------
Go to the top of the page
 
+Quote Post
karinne
post Mar 18 2008, 06:54 AM
Post #10


Co-Founder
*******

Group: Co-Founders
Posts: 2,503
Joined: 13-February 08
From: Squeezin'
Member No.: 2
The proper way of "hiding" text is to use this method

CODE
#header h1 {
    position: absolute;
    left: -9999px;
}


The display: none; method also work, however you should be aware that text-browsers (like Lynx) won't show the text either.

hth


--------------------
The Squeeze Store is now OPEN! Come on in and grab something!

a web design portfolio | web non-sense
I'm also on: del.icio.us | flickr | virb | facebook | twitter
The Web Squeeze is also on: virb | facebook | stumbleupon - JOIN IN!
Go to the top of the page
 
+Quote Post
Popje
post Apr 4 2008, 10:07 PM
Post #11


Rapid Squeezer
****

Group: Members
Posts: 199
Joined: 15-February 08
From: Plymouth
Member No.: 153
QUOTE (Vanessa @ Mar 18 2008, 06:55 AM) *
(Glad you like my sig, made me laugh a lot too when I heard it somewhere, so I wanted to share! I like your dog in the avatar girl_smile.gif ).


That's Zak, he's a rescue dog - totally nuts and lovable! biggrin.gif


--------------------
QUOTE
I'm challenged enough without any extra weirdness in my life!
Go to the top of the page
 
+Quote Post
« Next Oldest · HTML/XHTML · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   3 unitedcraig 112 22nd February 2008 - 03:02 PM
Last post by: karinne
No New Posts   6 LivingDeadBeat 181 20th March 2008 - 11:15 AM
Last post by: JustinStudios
No New Posts   2 JustinStudios 115 20th March 2008 - 05:02 PM
Last post by: JustinStudios
No New Posts   11 jamesicus 303 12th April 2008 - 01:48 PM
Last post by: jamesicus
No New Posts   6 Jason 131 4th April 2008 - 08:04 AM
Last post by: Linda