This SEO tutorial is designed to show you how to optimize WP e-Commerce for maximum traffic from the search engines. There are four major changes that need to be made to your wordpress theme files as well as WP e-Commerce.
SEO Tutorial Overview
- Some SEO basics.
- Remove Wordpress headline from “products-page”.
- Add h1 to item/product page.
- Add h1 element to Category/Group pages.
- Title tags and meta descriptions
SEO Basics
For those of you just getting your feet wet when it comes to SEO, there are a few basic on-site optimization fundamentals that should never be overlooked, especially if you plan on driving traffic from the search engines in a competitive market. There are three main factors, the title tag, the h1 tag and the inbound anchor text to your page.
It is important that each page have a unique title tag and h1 tag that closely match (contain the targeted keyword phrase). The h1 tag is often and mistakenly used in the logo and is not unique to each page. In Google’s algorithm, any content in the h1 element is more important than any other content on the page. For more on the H1 tag you can read Scott Hendison’s explanation or checkout this SEO basics article (third step).
Removing The Products Page Headline Title
WP e-Commerce uses the page template in order to display all products. For example, the products-page will contain a list of products that you choose in the setup. When you click on a category/group, that category or group will be displayed inside of the wordpress products-page. It will send a string to the URL so it may look something like: site.com/products-page/test-category
Since the wordpress products-page is always present, the title (headline) for the page will remain no matter what category or product you are viewing and will say “Products Page”. Lets get rid of the page title for the products page so we can use h1 tags that are related to our products.
The Page/Post title is featured above the content and is displayed in the page.php template with something like this (this is your general wordpress theme, not the WP e-Commerce theme):
-
<?php while (have_posts()) : the_post(); ?>
-
<h1><a href=“<?php the_permalink() ?>” rel=“bookmark” title=“Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h1>
Lets tell wordpress to display the page title as long as the page is not the “Products Page”.
-
<?php while (have_posts()) : the_post(); ?>
-
<?php if (get_the_title
() !=
‘Products Page’) { ?><h1><a href=
“<?php the_permalink() ?>” rel=
“bookmark” title=
“Permanent Link to <?php the_title_attribute(); ?>”><?php the_title
(); ?></a></h1><?php
} ?>
Add H1 Element To Items Page
Not to be confused with what Wordpress calls the “Products Page”, this is the page where your individual products are for sale. For example the page would be:
site.com/products-page/example-category/another-test-product/
In products_display_functions.php on line 645 you will find the following code.
-
$output .=
“<h2 class=”prodtitles
“>$special” .
stripslashes($product[‘name’]).
“</h2>\n\r“;
Change the h2 elements to h1 elements.
-
$output .=
“<h1 class=”prodtitles
“>$special” .
stripslashes($product[‘name’]).
“</h1> \n\r“;
You will need to play around with the stylesheet to get the look you want, I am not going to go to in depth into the design process here. But, In the iShop.css, look for h2.prodtitles and create another style with h1.prodtitles. If you use the same attributes, will get the same look as the h2 elements.
H1 Element On The Categories/Groups Page
You will need to edit the core WP e-Commerce files in order to get the h1 element included at the top of the categories pages. The category pages are sometimes referred to as group pages. It is important to name them with the proper keyword that you are targeting.
Open products_page.php in your favorite text editor. You will find the following code starting at line 63.
-
if($_GET[‘product_search’] != null) {
-
-
<strong class=’cattitles’>”.TXT_WPSC_SEARCH_FOR.
” : “.
stripslashes($_GET[‘product_search’]).
“</strong>”;
-
} else {
-
$category_image = ”;
-
if((get_option(’show_category_thumbnails’) == 1) && ($category_data[‘image’] != null)) {
-
$category_image = “<img src=’”.WPSC_CATEGORY_URL.$category_data[‘image’].“’ class=’category_image’ alt=” title=” />”;
-
}
-
echo “”.
$category_image.
“<strong class=’cattitles’>”.
stripslashes($category_data[‘name’]).
“</strong>”;
On line 64 replace the strong element with the h1 tag. Remember to replace the closing tag with it is well and leave the class=”cattitles” the same. Do the same thing on line 70 since it is an if/else statement.
This is how the code should look after you are done (you could just copy and paste if you like).
-
if($_GET[‘product_search’] != null) {
-
-
<h1 class=’cattitles’>”.TXT_WPSC_SEARCH_FOR.
” : “.
stripslashes($_GET[‘product_search’]).
“</h1>”;
-
} else {
-
$category_image = ”;
-
if((get_option(’show_category_thumbnails’) == 1) && ($category_data[‘image’] != null)) {
-
$category_image = “<img src=’”.WPSC_CATEGORY_URL.$category_data[‘image’].“’ class=’category_image’ alt=” title=” />”;
-
}
-
echo “”.
$category_image.
“<h1 class=’cattitles’>”.
stripslashes($category_data[‘name’]).
“</h1>”;
Title Tags And Meta Descriptions
The title tags and meta description hack was a little bit more involved. Most of it, actually all of it, is done outside of the WP-e-Commerce plugin. First of all, before you can test the description tag, make sure that your categories/groups have a description added to them, since this fix uses that content as the description tag for the category pages.
I built this script based on this one, I modified it to include a title tag for the products page itself. I also added the meta description capabilities.
The category pages function determines that it is indeed a category page, queries the database for the category name and puts it into the title tag. It also takes the first 150 characters of the category description and puts it into the meta description tag
The item (actual product) pages function does the same thing as the category pages function, except that it makes sure you are on the product page. It replaces the title tag with the product name and blog info (you need to edit script to put your blog info in). It also includes the first 150 characters of the first description in the meta description tag.
The title tag and meta description for the main products page(products-page) is added manually when you install the script. Simply, replace, “My Products Page Title” with the appropriate title tag.
I normally use a plugin to add the meta description tag, but that plugin conflicted with WP e-Commerce. So I am using SEO Title Tag and wrote the next part of the script to add the description tag. Basically, it simply adds the description tag to every page that is not on the products page by adding the first 150 characters of the post.
This goes into the main Wordpress header template where your normal title tag would go.
-
<?php
-
//////// Function to find product name for product title tag /////
-
function oGetProductName( $meta ){
-
-
$query = “SELECT product_id
-
FROM “.$table_prefix.“wpsc_productmeta
-
WHERE meta_value = ‘”.$meta.“’”;
-
-
-
$productid = $row[0];
-
$query = “SELECT name, description
-
FROM “.$table_prefix.“product_list
-
WHERE id = “.$productid;
-
-
-
$productname = $row[‘name’];
-
$description = $row[‘description’];
-
//title tag and meta tags for the products page
-
return “<title>”.$productname.” | Enter Your Blog Name Here</title>
-
<meta name=\”description\” content=\”“.
strip_tags($description).
“\” />”;
-
}
-
///////// Function to Find Category Name /////////////
-
function oGetCategoryName( $nicename ){
-
-
$query = “SELECT name, description
-
FROM “.$table_prefix.“product_categories
-
WHERE `nice-name` = ‘”.$nicename.“’”;
-
-
-
$name = $row[‘name’];
-
$description = $row[‘description’];
-
//Category Title Tag and Description — Change the name below to reflect your site
-
return “<title>”.$name.” | Enter name of site</title>
-
<meta name=\”description\” content=\”“.
strip_tags($description).
“\” />”;
-
}
-
//this if state will determine if we are on the products page, the category page or the actual products page (item page) and call the appropriate function
-
if(get_the_title() == ‘Products Page’ ){
-
$pparts =
explode(‘/’,
trim($_SERVER[‘REQUEST_URI’],
‘/’) );
-
if( $pparts[2] != ” ){
-
echo oGetProductName
( $pparts[2] );
-
}
-
else if( $pparts[1] != ” ){
-
echo oGetCategoryName
( $pparts[1] );
-
}
-
//if we make it this far in the if statement, than we know that we are on the main products-page listing what you have for sale, manually edit this to reflect what you want the title tag to be and what description you want to use.
-
else {
-
?> <title>Enter The Products-Page Title Tag Here</title>
-
<meta name=“description” content=“Enter The Products-Page description here” />
-
<?php
-
}
-
}
-
//this else statement is executed if we are not on the products page, but on the other parts of the site, such as posts, pages and uses the normal title tag function. I included the SEO Title tag requirements.
-
else{ ?> <title>
-
<?php if (function_exists(’seo_title_tag’)) { seo_title_tag
();
} else { bloginfo
(‘name’); wp_title
();
}
-
?></title>
-
<?php
-
//this is the script tests to see if you are on a page or a post, and than executes. I did not write anything for categories or archive pages because I am not using those right now.
-
if (is_page() || is_single() ) {
-
-
$query = “SELECT post_content
-
FROM “.$table_prefix.“posts
-
WHERE `post_title` = ‘”.get_the_title().“’”;
-
-
-
$description = $row[‘post_content’];
-
-
}
-
} ?>
Original post here WP E-Commerce SEO Tutorial
. However, it’s worth the effort – once you’ve completed this guide and started putting into practice what you’ve learned, you’ll be able to optimize your sites for the search engines and have several tricks up your sleeve that you can use to drive lots of new visitors to your site.
Recent Comments