September 25, 2006

WordPress SEO Themes Update

Filed under: Site News, Blogging — guido @ 7:39 am

This one has been long overdue. I have just updated my SEO themes for WordPress and uploaded the new versions, so they are now available for download.

These are the improvements:

1. Different templates for different pages: Now there are slightly different templates for the different types of pages: homepage (index.php), category index page (category.php), monthly archives (archive.php), single posts (single.php) and pages (page.php).

This gives you more flexibility. For instance, if you don´t want users to post comments on your pages, you can simply remove the “comments” code from the template “page.php”.

2. Hierarchy of the Headings: There is now only one H1 heading on an index page (homepage, category, archive) and the post titles that are linked to the full articles are now H2 headings (formerly H1). Subheadings in the sidebar are now H3 (formerly H2).

However, on individual pages, the post / page titles are written as H1 headings.

3. Title Tag: I´ve changed the most simple template tag for the HTML <title> to a better one. Now, your blog´s title is used as HTML title on the homepage, on category and archive pages there are also the category names respectively dates (month / year) added to your blog´s title and on single pages, the post/page title is used in addition to your blog´s title to form the HTML title tag.

If you want to update your current theme like this, use the following code inside your theme´s header.php template:

<title><?php bloginfo(’name’); wp_title(); ?></title>

There are quite a few different - more sophisticated - possibilities to form the HTML title tag of your blog pages, but I´m going to write another post tomorrow and give you the different codes, so you can choose the one that you like best.

August 10, 2006

Website layout with HTML tables versus CSS

Filed under: Site News — guido @ 5:38 am

For a long time it´s been a common practice to use HTML tables to design a website´s layout. But in a HTML purist´s view, this technique is deprecated (and always has been), because HTML tables are meant to organize content in a tabular format ( see calendar in the right column, for example ) and today, CSS (cascading style sheets) give web authors the possibility to create sophisticated website layouts.

I agree that most of the styles on a webpage should be done in CSS, defining the style rules in an external style sheet. This way, your webpages won´t be cluttered with lots of recurring font tags and style attributes and you will get a higher percentage of real content in the source code of your webpages, which is beneficial for your webpages´ rankings. Another advantage of CSS is that you can easily change the styles on all pages of your website by modifying only a single file - the style sheet.

In theory, a website layout can be well done purely with CSS, but there are certain limitations and problems, most of them caused by browser incompatibilities. I´m not an expert in CSS, but I´ve seen lots of website layouts done with CSS, where the content breaks the layout and boxes overlap each other, making certain parts of the content unreadable.

Eric Costello has some nice basic CSS website layouts that you can copy and play around with. But until today, I haven´t found an example for a website layout which does what can be done with the famous “table trick”.

Using the HTML table trick ( see templates in my html tutorial, I can create a search engine optimized website layout with 3 columns (2 sidebars and the center column with the main content). Usually, using a pure CSS layout, the content of the left column would come first in the source code, then the main content and finally the right column. But with the HTML table trick, I can move the main content to the top in the source code.

That´s why I´m still using HTML tables to create the main boxes in those website layouts where SEO is the most important way to generate traffic. Hint: not all websites need to be laid out to rank well in the search engines in order to get traffic. There are quite a lot of other techniques to attract visitors to your websites. But that´s a different topic.

August 9, 2006

Webpage optimization - the HTML table trick

Filed under: Web Design, HTML — guido @ 5:29 am

To rank slightly better in the search engines, one thing you can do is to optimize the source code of your webpages in such a way that your most important keyword focused content is placed as high as possible inside the source code.

If your website layout uses a sidebar on the left, you will usually find the content of this sidebar above the main content inside the source code. Here is where the HTML table trick comes into play. Let´s take a look at a very simple example.

title trick scratch 1

The scratch on the left shows you a simple website layout with a header box, a left sidebar (menu) box, the main content box and finally a footer box, designed purely in CSS.

In the two boxes below, you see the CSS stylesheet and the relevant part of the HTML source code which both together form this website layout. As you can easily see in the source code, the sidebar content comes first and the more important keyword focused main content of the page is moved downwards.


Stylesheet (styles.css)

#wrapper {
width: 700px;
margin: 0 auto;
border: 2px solid #369;
}

#header {
width: 100%;
border-bottom: 1px solid #369;
margin: 0;
padding: 0;
}

#menu {
width: 200px;
float: left;
border-right: 1px solid #369;
margin: 0;
padding: 5px;
}

#content {
width: 500px;
border: none;
margin: 0;
padding: 5px;
}

#footer {
width: 100%;
border-top: 1px solid #369;
margin: 0;
padding: 5px;
}

HTML source code

<hmtl>
<title>webpage title</title>
<link rel="stylesheet" type="text/css" href="styles.css">

<body>

<div id="wrapper">

<div id="header">
Your Website Header Goes Here.
</div>

<div id="menu">
This is the sidebar ( menu ) of your webpage. As you can see, it comes before the main content inside the source code of your webpage. And this could be quite a lof of stuff if you have many links and ads in your sidebar.
</div>

<div id="content">
This is the box for the main content of your webpage, starting with the H1 heading.
</div>

<div id="footer">
Your Website Footer Goes Here.
</div>

</div>
</body>
&l6;/html>


title trick scratch 2

In order to move the main content above the left sidebar inside the source code, you can use the following layout trick using a HTML table with two rows and two columns like illustrated in the scratch on the left.

The first table cell in the first table row has the same width as the sidebar but it remains empty, so it´s only a few pixels in height and can´t be seen by your visitors. The second table cell in the first row spans over two rows and forms the largest box which contains your main content.

Only in the second row, you will find the sidebar content inside the first table cell. Take a look at the source code below and you will see how the main content is moved towards the top while the visible layout remains almost the same.

Stylesheet (styles.css)

#wrapper {
width: 98%;
margin: 0 auto;
border: 2px solid #369;
}

#header {
width: 100%;
border-bottom: 1px solid #369;
margin: 0;
padding: 0;
}

#table {
width: 100%;
border-collapse: collapse;
border: none;
}

#empty {
width; 200px;
border-right: 1px solid #369;
margin: 0;
padding: 0;
}

#menu {
width: 200px;
border-right: 1px solid #369;
margin: 0;
padding: 5px;
vertical-align: top;
}

#content {
width: 500px;
border: none;
margin: 0;
padding: 5px;
vertical-align: top;
}

#footer {
width: 100%;
border-top: 1px solid #369;
margin: 0;
padding: 5px;
}

HTML source code

<hmtl>
<title>webpage title</title>
<link rel="stylesheet" type="text/css" href="styles.css">

<body>

<div id="wrapper">

<div id="header">
Your Website Header Goes Here.
</div>

<table id="table">
<tr>
<td id="empty"></td>

<td colspan="2" id="content">

This is the second table data cell in the first row and contains the main content of your webpage. Notice how it spans two rows and inside the source code, it now stands above the sidebar content.

</td>

</tr>

<tr>
<td id="menu">
That´s the table data cell which contains the sidebar (menu) content.
</td>
</tr>

</table>

<div id="footer">
Your Website Footer Goes Here.
</div>

</div>
</body>
</html>


Feel free to copy the codes from the boxes above, experiment with them and modify and use them for your websites. Get my HTML video tutorial if you want to learn html with ease.

Next Page »