128 replies to this topic

[Scottie]

Lovely forums, by the way.

Thanks Richard! Good to have you here- excellent points. :thumbsup:

[jvanv8]

Back to the DIV tag thing...
"Hidden" DIV tags aren't really hidden. You can make them invisible in the tag definition or with css.

You can also place one layer on top of another and swap them when the user clicks on a button, for example, using the z-index

If you mark the DIV as hidden in the CSS file, then use robots.txt to block the spider from the CSS folder... how is the spider going to know that the layer is hidden???

Plus you can alway keep the layer visible and place it under another layer.
Flash (and any embedding objects) also always come up to the top layer. You cannot place a layer on top of a flash movie. Therefore, even if you did place a DIV on the top layer, with the flash layer on the bottom, the Flash would always be shown on top.

Stuff like DIV tags being used to present your text ahead of the nav bar to the search engine - the SE s will be able to work that out, and though they might not call it spam, they'll know it's not the page the user sees.

No. The SE cannot "work that out" when you place the DIV absolutely with CSS in an external file. And since when does the VERY TOP of the page automatically imply the most importand info? Using a DIV to place the MAIN CONTENT right below the body tag makes total sense.

I have been using DIV tags under Flash movies and our content (which is basically a mirror of the flash movie) is indexed nicely. Also, SE have no trouble indexing DIV tags for who-ever thought that SE did not index them. I made an entire 200 page+ site that didn't use 1 table.

DIVs are good for webpages and SEO
TABLES are good for Excel, Balance Sheets, and columnized data
Use DIVs under Flash until the SE finally program their spiders to index swf files.

- John

[Jill]

If you mark the DIV as hidden in the CSS file, then use robots.txt to block the spider from the CSS folder... how is the spider going to know that the layer is hidden???

Why does it matter whether the search engine can figure out that the layer is hidden?

Bottom line is that if you're hiding text, it's considered spam.

If you don't mind spamming, then that's fine. You may want to try a technique like that. If you prefer not to spam the search engines, then you would want to avoid it.

Jill

[Mel]

Using a div tag with a hidden attribute does not automatically equate to spam.

The hidden attribute can be, and often is, changed to visible when using it for rollovers, or dynamic menus, or for varying the content on a page according to what a user wants to see. For instance mousing over a series of links can display a different picture each one of which is pertinent to the link being moused over.

Thus the content is visible to the user and to the search engine and in no way could be considered spam.

Where it is spam IMO is when the layer with the hidden tag is never visible to the viewer.

[SEO-Richard]

<No. The SE cannot "work that out" when you place the DIV absolutely with CSS in an external file. And since when does the VERY TOP of the page automatically imply the most importand info? Using a DIV to place the MAIN CONTENT right below the body tag makes total sense.>

Hiya John,
I'm not quite sure I understand this. Why can't a SE work it out? It's processing all the page information contained in the code - would it be that difficult to figure out what goes where? After all, that's it's job - to mimic what the human eye sees and to place the same values on that information that a human places on that information ( he said, possibly controversially, inviting comments)

And the other bit - the top of the page containing more important information than the bottom - in a book it wouldn't, but on the first page of the book - fiction - it does, because you want to grab the reader's attention and draw them in. A well crafted book, that is. A novel will have one 'high value' point (I'm making these words up) at the very beginning....

Actually, good point, I'm thinking this through as I write, a decent book is a 'page turner' - that is, you get to the bottom of the page, and then you want to turn to the next page. Very good point.

So a Web Site is either a lot of self-contained little 'short stories', each with their 'high value' beginning .... or it could be seen as a more linear 'novel', where the user follows the information around, compelled by the 'page turning' effect to go to the next page.

Which implies that there should be high value content on the top of the page, and high value content on the bottom of the page which is related to the NEXT page. That's interesting.

Anyhow - a few posts back I posited 'synonyms' on the page 'theming ' that page - guess what? That was a total guess, but in today's 'Search Day' newsletter there was this:

<What do you think remains largely unknown about Google?"

Brin answered, "The tilde operator," a new search command that enables users to search not only for a particular keyword, but also for its synonyms. This is accomplished by placing a ~ character directly in front of the keyword in the search box.>

That's not to say that it't the point I was making, but it's close. If you can search for synonyms, then it's not far off the SEs placing value on keywords and their synonyms. So a page with the keyword, and the synonyms surrounding that keyword, should be higher value than just the keywords themselves.

That might be old hat to you lot, but I've worked it out from basic principles, so I'm pleased!

Yours creatively,

Richard

[jvanv8]

If you don't mind spamming, then that's fine. You may want to try a technique like that. If you prefer not to spam the search engines, then you would want to avoid it.

It really isn't Spam if you ask me. Spam is placing unrelated terms inside your webpage to attract more visitors than should generally be interested in your main content. But don't make this into a "what is spam?" thread but feel free to comment if you think underlying divs are spam.

If you truely think its spamming, please tell that to our personal friends who use text readers such as JAWS and eReader. They are visually impaired an like search engine spiders, text readers are currently unable to parse the contents of swf files (Macromedia, Google and a handfull of others are currently addressing this problem. Currently, the FAST spider already parses flash sitesto some degree).

By creating a layer under a layer containing the Flash movie, text readers can parse the underlying layer of html, give the user an idea about the content of the site, and provide a link to the HTML version where the text reader will be better suited to function. The fact that search engine spiders index this content is a bonus to our users allowing the flash site to be indexed so we are at least on the search engine radar screen.

Richard -

I'm not quite sure I understand this. Why can't a SE work it out? It's processing all the page information contained in the code - would it be that difficult to figure out what goes where?

Yes, it is IMPOSSIBLE for the SE to figure this out. You can place two layers on the screen in a WYSIWYG program such as Dreamweaver - both visible - not overlapping - you can clearly see both with the human eye...

Now link a CSS file to the page (save it in a folder called /CSS for example) and make 2 classes - "Flash" and "NoFlash"
In the "NoFlash" CSS definition, set it with these settings
position: absolute;
z-index: 1;
visible:true;
top: 0;
left: 0;
width: 400px;
height: 400px;

Now in your "Flash" CSS class, set it with these settings
position: absolute;
z-index: 2;
visible:true;
top: 0;
left:0;
width:400px;
height:400px;

(the above is just pseudocode, so don't copy and paste this in without double checking )
Put a 400x400 Flash movie in the Flash layer and the text that is contained in the flash movie (html text) in the "NoFlash" layer. You can say that in order to view the page properly they need the latest flash player - include a link to macromedia. com/downloads ... say what the site is about, include a link to the HTML version if you have one.

If you set the CSS directory to NOALLOW (or whatever the syntax is) in your robots.txt page, the spider will not follow the href to the css page. It sees to layers, both on the same z-index, both visible, not overlapping, one with just a bunch of flash plug in garbage, one with the "NoFlash" content. Gets indexed. Your users find you. People with disabilities know what your site is about.
This isn't spam, this is a useful resource for many different web surfers. If you want to put Britney Spears XXX Pix in the "NoFlash" layer, great. I just hope that's what your flash movie is about.

Richard-
About putting layers in front, I could quite tell where you were coming from. What I meant was this... (remember that some search engines give presidence to content CLOSER to the BODY tag than stuff near the /BODY tag)
Consider this page (this is an actual page) Just skim this and notice the length and when the main content (the page title indicated an article about Portland Bicycling)

<body LEFTMARGIN="0" TOPMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" BGCOLOR="black" ONLOAD="if (dhtmlBrowser) dhtmlnav=1;" BACKGROUND="../../images/background_L4.gif">
<!-- Top Black Navigation 4 -->	

<div id="topnavdiv">
<table BORDER="0" CELLPADDING="0" CELLSPACING="0" width="780">
	<tr>
  <td>
 	 <img SRC="/images/tnav_left.gif" WIDTH="160" HEIGHT="51" BORDER="0" ALT="">
</td>
  <td>
 	 <a HREF="http://www.ci.portland.or.us/" LANGUAGE="javascript"
      ONMOUSEOVER="if (dhtmlnav) {swapImage('tnav_citypdx', 'on'); return true;}"
      ONMOUSEOUT="if (dhtmlnav) {swapImage('tnav_citypdx', 'off'); return true;}"
               TITLE="City of Portland" ACCESSKEY="C">
 	 <img NAME="tnav_citypdx" SRC="/images/tnav_citypdx.gif" WIDTH="89" HEIGHT="51"
 BORDER="0" ALT="City of Portland"></a></td>
  <td>
 	 <a HREF="/search.htm" LANGUAGE="javascript"
      ONMOUSEOVER="if (dhtmlnav) {swapImage('tnav_search', 'on'); return true;}"
      ONMOUSEOUT="if (dhtmlnav) {swapImage('tnav_search', 'off'); return true;}"
      TITLE="Search" ACCESSKEY="S">
 	 <img NAME="tnav_search" SRC="/images/tnav_search.gif" WIDTH="50" HEIGHT="51" 
BORDER="0" ALT="Search"></a></td>
  <td>
 	 <a HREF="/BusinessResources/" LANGUAGE="javascript"
      ONMOUSEOVER="if (dhtmlnav) {swapImage('tnav_business', 'on'); return true;}"
      ONMOUSEOUT="if (dhtmlnav) {swapImage('tnav_business', 'off'); return true;}"
      TITLE="Business Resources" ACCESSKEY="B">
 	 <img NAME="tnav_business" SRC="/images/tnav_business.gif" WIDTH="105" HEIGHT="51"
 BORDER="0" ALT="Business Resources"></a></td>
  <td>
 	 <a HREF="/mediacenter/" LANGUAGE="javascript"
      ONMOUSEOVER="if (dhtmlnav) {swapImage('tnav_newscenter', 'on'); return true;}"
      ONMOUSEOUT="if (dhtmlnav) {swapImage('tnav_newscenter', 'off'); return true;}"
      TITLE="News Media Center" ACCESSKEY="N">  
 	 <img NAME="tnav_newscenter" SRC="/images/tnav_newscenter.gif" WIDTH="106"
 HEIGHT="51" BORDER="0" ALT="News Media Center"></a></td>
  <td>
 	 <a HREF="/mediacenter/FAQindex.htm" LANGUAGE="javascript"
      ONMOUSEOVER="if (dhtmlnav) {swapImage('tnav_faq', 'on'); return true;}"
      ONMOUSEOUT="if (dhtmlnav) {swapImage('tnav_faq', 'off'); return true;}"
      TITLE="FAQ" ACCESSKEY="F"> 	 
 	 <img NAME="tnav_faq" SRC="/images/tnav_faq.gif" WIDTH="37" HEIGHT="51" BORDER="0" ALT="FAQ"></a></td>
  <td>
 	 <a HREF="/" LANGUAGE="javascript"
      ONMOUSEOVER="if (dhtmlnav) {swapImage('tnav_home', 'on'); return true;}"
      ONMOUSEOUT="if (dhtmlnav) {swapImage('tnav_home', 'off'); return true;}"
      TITLE="Home" ACCESSKEY="H"> 	 
 	 <img NAME="tnav_home" SRC="/images/tnav_home.gif" WIDTH="36" HEIGHT="51" BORDER="0" ALT="Home"></a></td>
  <td>
 	 <img SRC="/images/tnav_right.gif" WIDTH="197" HEIGHT="51" BORDER="0" ALT="">
</td>
	</tr>
</table>
</div>
<!-- /Top Black Navigation 4 -->	
<!----------------- NAV4 INCLUDE ----------------->
<!-- YELLOW NAVIGATION W/IMAGES -->
<div id="yellownavdiv">
<table BORDER="0" CELLPADDING="0" CELLSPACING="0" width="780">
	<tr>
  <td><img src="/images/home_left_image.jpg" width="145" height="34" 
border="0" alt="Bridge" TITLE="Bridge"></td>
  <td bgcolor="#FFCC33" width="2"><img SRC="/images/spacerFFCC33.gif"
 width="2" height="1" border="0" ALT=""></td>
  <td><a HREF="/getaround/" LANGUAGE="javascript"
               ONMOUSEOVER="if (dhtmlnav) {swapImage('navgetaround', 'ON'); return true;}"
               ONMOUSEOUT="if (dhtmlnav) {swapImage('navgetaround', 'OFF'); return true;}">
 	 <img NAME="navgetaround" SRC="/images/nav_getaround.gif" 
WIDTH="104" HEIGHT="34" BORDER="0" ALT="Getting Around Portland" TITLE="Getting Around Portland"></a></td>
  <td>
 	 <img NAME="nav_border1" SRC="/images/nav_border.gif" WIDTH="2" HEIGHT="34">
</td>
  <td><a HREF="/programs/" LANGUAGE="javascript"
      ONMOUSEOVER="if (dhtmlnav) {swapImage('navprograms', 'ON'); 
return true;}"
      ONMOUSEOUT="if (dhtmlnav) {swapImage('navprograms', 'OFF'); 
return true;}">
 	 <img NAME="navprograms" SRC="/images/nav_programs.gif" 
WIDTH="84" HEIGHT="34" BORDER="0" ALT="Programs and Services" TITLE="Programs and Services"></a></td>
  <td>
 	 <img NAME="nav_border2" SRC="/images/nav_border.gif" WIDTH="2" HEIGHT="34"></td>
  <td><a HREF="/permits/" LANGUAGE="javascript"
      ONMOUSEOVER="if (dhtmlnav) {swapImage('navpermits', 'ON');
 return true;}"
      ONMOUSEOUT="if (dhtmlnav) {swapImage('navpermits', 'OFF'); 
return true;}">
 	 <img NAME="navpermits" SRC="/images/nav_permits.gif" WIDTH="86" 
HEIGHT="34" BORDER="0" ALT="Permits and Guidelines" 
TITLE="Permits and Guidelines"></a></td>
  <td>
 	 <img NAME="nav_border3" SRC="/images/nav_border.gif" WIDTH="2"
 HEIGHT="34"></td>
  <td><a HREF="/projects/" LANGUAGE="javascript"
      ONMOUSEOVER="if (dhtmlnav) {swapImage('navprojects', 'ON'); 
return true;}"
      ONMOUSEOUT="if (dhtmlnav) {swapImage('navprojects', 'OFF'); 
return true;}">
 	 <img NAME="navprojects" SRC="/images/nav_projects.gif" WIDTH="85" 
HEIGHT="34" BORDER="0" ALT="Projects and Planning" TITLE="Projects and 
Planning"></a></td>
  <td>
 	 <img NAME="nav_border4" SRC="/images/nav_border.gif" WIDTH="2"
 HEIGHT="34"></td>

  <td><a HREF="/about/" LANGUAGE="javascript"
      ONMOUSEOVER="if (dhtmlnav) {swapImage('navabout', 'ON');
 return true;}"
      ONMOUSEOUT="if (dhtmlnav) {swapImage('navabout', 'OFF'); 
return true;}">
 	 <img NAME="navabout" SRC="/images/nav_about.gif" WIDTH="77" 
HEIGHT="34" BORDER="0" ALT="About Us" TITLE="About Us"></a></td>
  <td ROWSPAN="2" bgcolor="#FFCC33" width="2"><img SRC="/images/spacerFFCC33.gif" width="2" height="1" border="0" ALT=""></td>
  <td ROWSPAN="2" VALIGN="TOP"><img src="/images/home_right_image.jpg"
 width="187" height="34" border="0" alt="Taxi" TITLE="Taxi"></td>  
	</tr>
</table>
</div>
<!-- /NAVIGATION -->
<!----------------- /NAV4 INCLUDE ----------------->
<!-- MAIN MESSAGE IN CENTER COLUMN -->
<table CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="780">
<tr><td><img SRC="/images/spacer.gif" WIDTH="10" HEIGHT="1">
<td class="font">
<!-- Content Goes After Here -->
<h3><a HREF="/Projects/default.htm"><span CLASS="yellowhead">Projects</span>
<br><a HREF="default.htm"><span CLASS="font">It All Adds Up to Cleaner Air</a><br>Bicycling</span></h3>
  <img border="0" src="images/BIKEicon.gif" alt="Bike image" width="100" height="89">
      <table border="0" cellspacing="0" width="100%" cellpadding="5">
        <tr>
          <td width="73%">
           <p align="CENTER">Bike <font size="4">riding</font>
            is a great way to&nbsp;<br>
            get where you’re <font size="4">going</font>.</p>
            <p align="CENTER">Each bicyclist means <font size="4">one
            less car</font>, helping to reduce traffic congestion, air pollution
            and <font size="4">energy</font> consumption. Bicycles require less
            investment, less <font size="4">road space</font>, and are a great
            choice for short trips.</p>
          </td>
          <td width="28%"><img border="0" src="images/thwak.gif" alt="Bike saying" 
width="179" height="170"></td>
        </tr>
      </table>
      <p>Consider this. Over 65 percent of Portland area
      adults own a bicycle.

Wow - that took a long time to get to the main content and the key search term of Bicycling and Portland. Think if you were using a text reader and every page had to speak all of that garbage everytime you clicked on an article -- the links, alt text, headings... before you got to the main content! Heres a better approach if you ask me:

<body onload="MM_preloadImages('images/nav_btn_ovr.gif','images/nav_btn_up.gif')">
<div id="content" style="position:absolute; width:750px; height:824px; z-index:1">
  <div id="firsttitle" class="toptitle"> 
    Portland Selected by National Bicycling Magazine  </div>
  <div id="article" class="scrollinglayer"> 
    PORTLAND (AP) - About 50 Portland-area residents received bicycles Monday that they will use for free for three months 
as part of a test to see how the bikes will affect their lives, health and daily routines.......

The second example doesn't omit naviagation or graphics, but since they are secondary to the main content of the article, they are pushed down closer to the /BODY tag. Infact, this method allows the designer to put the advertisements, banners, dislaimers, and copyright info at the bottom of the code even if it physically resided at the TOP of the page.

Gets right to the point - good for your users. If spiders put more weight on the content close to the BODY tag, than this will also help for search engine purposes. If I'm mistaken about that, PLEASE let me know - I'm really new at SEO stuff - you guys have WAY more experience than I do. (still learning though)


Wow, that was long. Hopefully some good stuff(?) in there though.
- John

Edited by jvanv8, 20 October 2003 - 12:59 PM.

[Jill]

Thus the content is visible to the user and to the search engine and in no way could be considered spam.

I stand corrected! I'm definitely not up on the latest design, html, and css codes.

Jill

[qwerty]

John, I'd be interested in your opinion on whether (and why) the method you describe is better or worse than using a <noembed> tag. Is it just a question of having greater control over positioning, or do you think your method serves users and/or spiders better?

[SEO-Richard]

John,

<If you set the CSS directory to NOALLOW (or whatever the syntax is) in your robots.txt page, the spider will not follow the href to the css page. It sees to layers, both on the same z-index, both visible, not overlapping, one with just a bunch of flash plug in garbage, one with the "NoFlash" content. Gets indexed. Your users find you. People with disabilities know what your site is about.>

Just trying to get to grips with this. You say two layers, both on the same index, but in your example you refer to index 1, and index 2. I suspect you mean what you say, which is, not overlapping, both index 1 or both index 2.

So there's a CSS file - the spider isn't meant to index it (content ="noindex" stops the page being indexed, though I understand it will still be spidered; content="nofollow" stops links on pages being followed). So the spider sees two layers - I wasn't quite sure whether the z-index was in the CSS file or whether it was being kept on the page so that the spider could see it.

I can see there's something there, and clearly other people can, but I've missed whatever it is. Somehow. No need to go through everything again, I'll spare you that - point out to me in big letters where I'm going off course.

In fact, the little bit I've just posted here - clarify it for me, and then I'll start again with that clarification in my head and work my way through it again. I'm one of these people who, if the car's not working, starts out with: 'It's not the battery. It's not the spark plug. Therefore it must be.....(the fuel)' If there's a logical step missing I just give up because there's too many variables.

Sorry to bring cars into the discussion