Hi everybody. I'm trying to incoporate some code into the main image on my home page for SEO purposes. Basically I have the following code for my logo on the home page:

<div id="pagecell1">
<img class="logo" src="newhome/images/logo2.jpg" alt="Philly Sports from Phillypurge.com" />

What I would like to do is somehow incorporate H1 and H2 tags with an a href tag, so that my website title is seen by the engine as an H1 tag.

I noticed one of my competitors utilized a banner for their main image and used this code. Therefore, when I looked at the cached text of their site the first thing google saw was their title, but as a header.

<h1 id="banner-header"><a href="http://www.suchandsuchsite.com/" accesskey="1">Their title</a></h1>
<h2 id="banner-description"></h2>

How can I do something similar to this by staying within the same format of a "pagecell"? Any help would be greatly appreciated! And, the website url of my site is www.phillypurge.com so you see where the logo is in relation to everything else. Thanks!

Dennis

Put your logo image in as the background to the pagecell1 div

so you'd have:
#pagecell1{
background: url(newhome/images/logo2.jpg) no-repeat;
width: xxpx;
height: xxpx;
}
Then, you can set your headings in the div in the html:

<div id="pagecell1">
<h1>Philly Purge</h1> /*position as needed with css*/
<h2>etc, etc.</h2> /*position as needed*/
</div>

Your headings are accessible w/o needed any 'tricks' to do it AND you retain your logo where you want it.

I use a similar method where as the image on my site is actaully a H1 tag and used CSS to format it.

Right now in the css file I have the following:

#pagecell1{
position:absolute;
top: 208px;
left: 20px;
right: 2%;
width:95.6%;
background-color: #ffffff;
height: 2860px;

Would I take out the "background-color: #ffffff" and replace it with the background: url(newhome/images/logo2.jpg) no-repeat; code?

I must mention that I'm by no means an expert at this. I run the site and maintain it and had somebody else design it. I am learning new things everyday, but still have a ways to go.

Thanks for your help!

off topic slightly, but is that menu bar at the top of your page off a free template with Dreamweaver 8. It looks the spitting image of it and it has the same rollover effect?

Would I take out the "background-color: #ffffff" and replace it with the background: url(newhome/images/logo2.jpg) no-repeat; code?

No, you would just write it as:
background: #fff url(newhome/images/logo2.jpg) no-repeat;

Forget the position: absolute, you don't need it. It's the first thing on your page, it WILL be at the top and to the left. Use the normal document flow and use margins/padding to push it to where you want it.

No, the homepage was designed from scratch.

Originally Posted by vkw91

off topic slightly, but is that menu bar at the top of your page off a free template with Dreamweaver 8. It looks the spitting image of it and it has the same rollover effect?

Great. Thanks for your help once again!

Originally Posted by LadynRed

No, you would just write it as:
background: #fff url(newhome/images/logo2.jpg) no-repeat;

Forget the position: absolute, you don't need it. It's the first thing on your page, it WILL be at the top and to the left. Use the normal document flow and use margins/padding to push it to where you want it.

Here is the code I use for Paramiliar

<h1 id="logo"><a href="<? echo $websiteurl;?>index.html">Paramiliar Design Studios Redefining Innovation and Excellence <? echo $meta_keywords;?></a></h1>

and the CSS

#logo {
    margin: 0px 0px 0px;
    padding:0px;
    float:left;
}
#logo a {
    display:block;
    background:url(images/paramiliar_logo.jpg);
    width:242px;
    height:80px;
    text-indent: -900em;
    text-decoration:none;
    line-height:100%;
}

Originally Posted by phillypurge

No, the homepage was designed from scratch.

OK, no problem. I just thought that it looked very similar to the "HALO" template in DW8. it has the same mark-up and everything.

It bugs me when i recogise something but don't know where from. Maybe i clicked your site before.

One more question LadynRed, when you say to "position as needed with css" for the headers, how will I go about doing that? Not sure how to proceed with that.

[quote=Then, you can set your headings in the div in the html:

<div id="pagecell1">
<h1>Philly Purge</h1> /*position as needed with css*/
<h2>etc, etc.</h2> /*position as needed*/
</div>[/quote]

You would 'position' the headings with margins and/or padding until you push them to where you want them.

I tried my hand at what you suggested, but things got really screwed up so I changed it back to how it was.

Is there a way I could just attach an H1 heading to the image and make the heading invisible?

Originally Posted by phillypurge

Is there a way I could just attach an H1 heading to the image and make the heading invisible?

<H1 style="visibility:hidden;">Your H1 Tag</H1>

Originally Posted by phillypurge

I tried my hand at what you suggested, but things got really screwed up so I changed it back to how it was.

Is there a way I could just attach an H1 heading to the image and make the heading invisible?

Yes look at my code posted a few posts up that is exactly how you would set an H1 tag so that the text is hidden and an image is shown in its place.