Search Engine Optimization (SEO) Study Course
Frames-based sites are sites designed so that different areas of a page load
within their own designated part of the screen. While this was considered a
useful design technique a few years ago, frames-based sites are gradually being
phased out across the web as more intuitive design techniques are introduced.
According to Shari Thurow, usability experts dislike frames-based sites:
“Usability experts do not recommend the use of frames because people are not
able to properly bookmark a framed page and because the URL appearing in the
browser does not match the content”.
Search Engines and Frames
Although most Internet browsers support frames-based web sites, many search
engines still have trouble indexing them. Search engine spiders generally only
see the master frame-set (the page pulling all the frames together), not the
individual frames. Consequently, there is no content for the search engine to
index, apart from the content of the NoFrames element.
Because search engine spiders index sites by following links and because there
are usually no links within the frame-set HTML code, search engines are usually
unable to index frames-based sites beyond the home page. Unless, of course,
links to the rest of the site are included in the NoFrames element.
The NoFrames Element
According to the W3 Organization, “the NoFrames element specifies content that
should be displayed only by user agents that do not support frames or are configured
not to display frames”.
The NoFrames element was originally designed for browsers that can’t read frames.
If a browser has the ability to read frames, it is delivered theframeset content
as intended. If a browser is a older version that doesn’t have the ability to
read frames, it is delivered the content of the NoFrames element or tag. Within
HTML code, the NoFrames tag looks like this:
<HTML>
<HEAD>
<TITLE>A frameset document with NOFRAMES</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
<FRAME src="main.html">
<FRAME src="table_of_contents.html">
<NOFRAMES>
<body>
Sorry! You need a frames-browser to view this site.
</body>
</NOFRAMES>
</FRAMESET>
</HTML>
Unfortunately, most webmasters only include a short message about upgrading
to a frames-compatible browser in the NoFrames tag, not realizing that search
engines index the content of that tag. This explains the description of some
sites in search engine results.
Danny Sullivan of Search Engine Watch fame wrote an excellent tutorial for optimizing frames based sites called Search Engines and Frames.3 In it he explains why search engines have such a difficult time indexing frames-based sites:
“Search engines have a tough time with frames. Using frames either prevents
them from finding pages within a web site, or it causes them to send visitors
into a site without the proper frame ‘context’ being established. Both problems
can be corrected, with a little foresight by webmasters.”4
Danny goes on to explain how to optimize a frames-based site for search engine
compatibility. This mainly involves optimizing the NoFrames tag.
Ideally, a short description of the site should be included in the NoFrames
element, as well as a link to the site map or main links page, which acts like
a signpost for search engines so they know where to find and index further site
content.
Within HTML code An optimized NoFrames tag looks like this:
<HTML>
<HEAD>
<TITLE>A frameset document with NOFRAMES</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
<FRAME src="main.html">
<FRAME src="table_of_contents.html">
<NOFRAMES>
<body>
<h1>
Welcome to Widget World
</h1>
Looking for widgets? You’ve come to the right place. Here at Widget World we
stock the world’s largest supply of specialty widgets. Whether you are seeking
red widgets, blue widgets or even the rare green widget, we have them all!
<p>
If you are viewing this text, your browser lacks the ability to read
frames. Don't worry, you can still enjoy our site. All the pages can
be viewed from our site map via the link below.
Danny Sullivan of Search Engine Watch fame wrote an excellent tutorial for optimizing frames based sites called Search Engines and Frames.3 In it he explains why search engines have such a difficult time indexing frames-based sites:
“Search engines have a tough time with frames. Using frames either prevents
them from finding pages within a web site, or it causes them to send visitors
into a site without the proper frame ‘context’ being established. Both problems
can be corrected, with a little foresight by webmasters.”4
Danny goes on to explain how to optimize a frames-based site for search engine
compatibility. This mainly involves optimizing the NoFrames tag.
Ideally, a short description of the site should be included in the NoFrames
element, as well as a link to the site map or main links page, which acts like
a signpost for search engines so they know where to find and index further site
content.
Within HTML code An optimized NoFrames tag looks like this:
<HTML>
<HEAD>
<TITLE>A frameset document with NOFRAMES</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
<FRAME src="main.html">
<FRAME src="table_of_contents.html">
<NOFRAMES>
<body>
<h1>
Welcome to Widget World
</h1>
Looking for widgets? You’ve come to the right place. Here at Widget World we
stock the world’s largest supply of specialty widgets. Whether you are seeking
red widgets, blue widgets or even the rare green widget, we have them all!
<p>
If you are viewing this text, your browser lacks the ability to read
frames. Don't worry, you can still enjoy our site. All the pages can
be viewed from our site map via the link below.
The simplest design option to satisfy both users and search engines is to provide a non-frames version of your site (or simply ditch the frames altogether!)
To Sum Up
If possible, try to avoid frames-based sites, because some search engines still
have trouble indexing them and site visitors tend not to like them.
If you must use frames, make sure you:
.. Use a NoFrames tag
.. Offer visitors a NoFrames version of your site (if possible)
.. Include META tags and title tag in all frames pages
.. Include links to the rest of your site from the NoFrames tag
.. Use a paragraph of descriptive keyword-rich text in the NoFrames tag
.. Use text links on every page
.. Re-establish the frameset context using JavaScript
Tables
According to the W3 Organization, “The HTML table model allows authors to arrange
data -- text, preformatted text, images, links, forms, form fields, other tables,
etc. -- into rows and columns of cells”.
The use of tables for web page layouts has been popular with web designers because
of their ability to position text and images in specific cell locations on a
page, similar to type-setting a newspaper.
Tables are handy for page layouts, but they must be used with caution, particularly
nested tables. Nested tables (tables within tables) can cause all sorts of display
problems if the code is viewed in different browser versions.
The other big problem with tables is that the most important page content for search engine indexing is generally pushed to the bottom of your HTML code, under the table layout code.
When a web page is created using tables, the main text of the page is generally
pushed to the bottom right cell in terms of layout. Naturally, a search engine
robot indexing the page will travel left to right, top to bottom, having to
wade through a lot of table code before finding this important content.
To avoid this issue, make sure your most important content is indexed first
by placing it in the cells towards the top of your code. Designers often place
the site navigation menu on the right hand side of the page as a quick way to
push page content higher up in the HTML code. However there is a way to retain
your navigation menu on the left and still have your main text content indexed
first by ensuring it is in the top left hand table cell. You can use the Table
Trick7 to achieve this.
Tables and Spam
Don’t fall into the “accidental spamming” dilemma by using text that is the
same color as your page background on a different color table background. Search
engines may penalize you!
For example, the page below has a white background, but contains a table cell
that has a blue background with white text.
If your page or body background is white #ffffff and you have text that is
white against a different color table or cell background, you might be seen
as using white text on a white page background which is considered “hidden text”
(a common spam technique) in the eyes of the search engines.
if you want the reverse heading effect, use #efefef instead of #ffffff. It is
less likely to trip the spam filters.
Alternatives to Tables
As discussed in Lesson 2, Cascading Style Sheets (CSS) are a simple mechanism
for adding style (e.g. fonts, colors, spacing) to Web documents.
They enable designers to create tailored style templates for their web sites
without causing “code bloat” – excessive HTML code that can be difficult and
time consuming for search engines to index.
With CSS, you can create very attractive pages that look as though they are
in table format, without the search engine indexing restrictions that table
code creates.
The CSS code producing the page template is served from an external file that search engines don’t need to index, meaning more of your important page content is indexed instead. The use of style sheets also ensures that your web pages, fonts and layout look EXACTLY the way you intended them to look, regardless of the platform or browser version your site visitor is using. More information on Cascading Style Sheets can be found here.
To Sum Up
.. If possible, try to avoid using tables
.. Use external CSS files to reduce code-bloat
.. Use the “table trick” if you must use tables
.. Avoid white text on a white background