ZENVERSE » SEO

How to Add/Integrate Google +1 Plus One Button into WordPress

Zen — Thu, 23 Jun 2011 12:13:11 +0000

Google recently introduced their own social button just like those we commonly see, such as Facebook Share, Tweet It, Digg It, etc. Just like Facebook and Twitter button that let you share content to your followers or friends, Google +1 button let people who love your content to recommend it on Google search. The pages that you plusone-d (+1′d) can then be useful to your friends and contacts in your Google Account. They can see what you recommended, thus their search results will be something like this:

This feature can be turned off though, if you don’t like this. You can go to Google Account Settings > Under “+1 on non-Google sites” > Click “Edit” > Select “Disable”.

Integrate Google +1 Button into WordPress Theme

First of all, Google has its own code generator for the button located at here. Now. decide the style and size then come back to here again.

Loading The Required Javascript

Open your theme’s header.php, paste this or similar codes from the generator, ONCE ONLY, into tag:

^?View Code JAVASCRIPT

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">script>

Adding The Button To Single Post / Page

If you want your button to appear in single post or page, first open single.php or page.php, identify The Loop. More information about The Loop at here. Next, paste this button render codes or the codes generated by google, after

^?View Code PHP

<g:plusone>g:plusone>

The code above should make the button nicely, your page URL will be auto detected so nothing we need to change here.

Adding The Button To Blog Index

If you want your button to appear in blog index for every post, first open index.php, identify The Loop and paste this button render codes or the codes generated by google, after or

We need to include a href=”" attribute here because every post has their own URL. like this:

^?View Code PHP

<g:plusone href="">g:plusone>

In other words, no matter how your generated render codes looks like, just add the following href attribute into the plusone tag.

^?View Code PHP

href=""

Google Plus One Button, Live

This is how my Google +1 Button for this page looks like:

Useful Links

More Info about Google +1 Button
Google +1 Button Code Generator
Google +1 Button API for developer

URL Canonicalization (Canonization) Using PHP

Zen — Sun, 13 Feb 2011 15:45:46 +0000

When your website can be accessed via several URLs, such as http://www.example.com & http://example.com, you might want to decide a best URL and use only that URL whenever you link back to your site, because this helps your site in terms of SEO.

What is URL Canonicalization?

According to Matt Cutt’s blog:

Q: What is a canonical url? Do you have to use such a weird word, anyway?
A: Sorry that it’s a strange word; that’s what we call it around Google. Canonicalization is the process of picking the best url when there are several choices, and it usually refers to home pages.

The Main Idea

Assume that a googlebot visited your website via http://example.com but you want your default URL to be http://www.example.com. First, what you need to do is, detect this situation, let the robots know which URL you want and set 301 (permanent) redirect to that URL.

Performing URL Canonicalization using PHP

One very important variable we will need in the codes is the $_SERVER which is a predefined variable. We will need $_SERVER['HTTP_HOST'] and $_SERVER['REQUEST_URI'] here.

$_SERVER['HTTP_HOST']
This variable returns the domain name of your website ONLY, without trailing slash and it includes www if your current address has it.

If your current page is:

http://example.com – it returns example.com

http://example.com/ – it returns example.com

http://www.example.com – it returns www.example.com

http://www.example.com/ – it returns www.example.com

http://example.com/wordpress/ – it returns example.com

http://example.com/faq.php – it returns example.com

http://example.com/?p=9 – it returns example.com

$_SERVER['REQUEST_URI']
This variable returns URI which was given in order to access the page, a slash is always included.

If your current page is:

http://example.com – it returns /

http://example.com/ – it returns /

http://www.example.com – it returns /

http://example.com/wordpress/ – it returns /wordpress/

http://example.com/wordpress/a-blog-post/ – it returns /wordpress/a-blog-post/

http://example.com/faq.php – it returns /faq.php

http://example.com/?p=9 – it returns /?p=9

Here I have 2 examples of codes, from www to non www and vice versa.

1. From Non-WWW to WWW

This is the codes you should use if you want to do a permanent redirection from http://example.com to http://www.example.com

^?View Code PHP


if (substr($_SERVER['HTTP_HOST'],0,4) != 'www.') {
header('HTTP/1.1 301 Moved Permanently');
header('Location: http://www.'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
}
?>

It simply check if the first 4 characters are not “www.”, then it set a permanent redirection to the www version.

2. From WWW to Non-WWW

This is the codes you should use if you want to do a permanent redirection from http://www.example.com to http://example.com

^?View Code PHP


if (substr($_SERVER['HTTP_HOST'],0,4) == 'www.') {
header('HTTP/1.1 301 Moved Permanently');
header('Location: http://'. substr($_SERVER['HTTP_HOST'], 4).$_SERVER['REQUEST_URI']);
}
?>

It simply check if the first 4 characters are “www.”, then it set a permanent redirection to the non-www version.

5 Common xHTML Validation Errors

Zen — Thu, 14 Jan 2010 02:37:44 +0000

You can validate your website using this validation service. If you are using Opera, validating a website is just one click away : Right Click -> Validate.

Recently I have updated all my free wordpress themes to be 100% xhtml valid. After validating each of them, I found that there were some common errors, which can be solved by:

1. Adding alternate text to tags

This is also known for improving your site’s SEO. Whenever you use tags you have to add an alternate text. If you do not have alernate text to add, at least leave it empty like this alt=""

Invalid

^?View Code HTML

Valid

^?View Code HTML

2. Closing self-closing tags

Tags like ,
, need to be self-closed.

Some other self-closing tags are:

3. Do not use uppercase in tags

One example, the meta verification tag given by Yahoo! Site Explorer (Yahoo webmaster tool) is always in uppercase and not self-closed, which make my page invalid.

You have to manually change the word “meta” to lowercase and self-close the meta tag.

Given by Yahoo! – invalid

^?View Code HTML

Edited to make it valid

^?View Code HTML

4. Validating inline javascript

If you have javascript codes in your page, you have to make it valid as follow:

Invalid

^?View Code HTML

I will output "Hello world!" using javascript.

Valid

^?View Code HTML

I will output "Hello world!" using javascript.

By adding cdata tag, you can make your inline javascript codes to be valid. If your javascript loaded from external js file, it will not make your page invalid so you do not have to worry about that.

5. Validating video/embed codes such as youtube video

By default, the embed codes given by youtube are not xhtml valid.

To make it valid, you can refer to the guide I wrote on last month.

Embedding Youtube Videos – Tips and Passing xHTML Validation

Zen — Fri, 04 Dec 2009 06:22:39 +0000

If you use the default code given by youtube to embed a video, you will notice that it failed to pass xHTML validation. This is because was deprecated in favor of the element.

Embed Youtube Video and Pass xHTML Validation at the same time

This is the codes given by youtube:

^?View Code HTML

After some changes, it is now xHTML validated codes:

^?View Code HTML

What has changed:

tag has been removed
Added type=”application/x-shockwave-flash” to tag
Added data=”" attribute to tag
All & in the URL has been changed to &
tag is now self-closed

Tips and Tricks When Embedding Youtube Video

There are some built-in parameters that you can add to change the behaviour/style of embedded video.

Disable Related Videos
I don’t like to see related videos when I mouseover the video container. You can add &rel=0 to the two video urls in the code. Based on the xHTML validated codes above, now it would look like:

^?View Code HTML

Disable Search
To disable the search box from displaying when the video is minimized, add &showsearch=0 to the two URLs

Auto Play
By default, auto play is off. To enable it, add &autoplay=1 to the two URLs

Custom Start Time
You can change the start time of the video, thus embeding only part of a video.
For example, if you want the video to start from 30th second, add &start=30 to the two URLs

More
There are more options you can change, such as:

Loop (replay video)
Border/colour
Enable HD playback
Disable the keyboard controls

For the full list and info, please refer to this page.

Create SEO Friendly URLs With Htaccess Mod Rewrite in 3 Easy Steps

Zen — Wed, 18 Nov 2009 09:43:27 +0000

What is SEO Friendly URL and Why?

An example of SEO friendly URL can be seen in this page. Compare it with urls like http://mysite.com/?t=34 , you will find it easier to remember and the it also clearly tells you what this page is about. Furthermore, the words in the URL might match the search keywords, bringing more traffic from search engines.

Make SEO friendly URL yourself

I don’t have to worry about SEO friendly URL in WordPress since its already built-in. However, I need it for my premium wordpress themes website, which is not based on WordPress. So I started to look into this matter.

Using htaccess and mod rewrite, you can make SEO friendly yourself in 3 easy steps.

1. Creating .htaccess file

Open NotePad (yes, the windows notepad) > File > Save As > Change the “Save as Type” to “All Files” > enter “.htaccess” as the name and press Save. You’ve created a htacces file.

Now paste this codes below into it.

^?View Code TEXT

Options +FollowSymLinks
 
RewriteEngine On

The first line Options +FollowSymLinks is required for some server configurations.

2. Create your own rewrite rule

Example 1
For example, if you want to change links like http://mysite.com/index.php?topic=rules to http://mysite.com/topic/rules/, here’s the rewrite rule.

^?View Code HTACCESS

Options +FollowSymLinks
 
RewriteEngine On
RewriteRule ^topic/([a-zA-Z0-9]+)/$ index.php?topic=$1

• Like regular expressions, the [a-zA-Z0-9] matches lower and uppercase of alphabets and numbers.
• The asterisk inside the brackets + is a quantifier that match 1 occurence to infinite occurences.
• Combining them, ([a-zA-Z0-9]+) matches alphanumerics of at least 1 character.
• The caret ^ means “start with”, meaning the URL starts with the word “topic”.
• The dollar sign $ means “end”, meaning the URL ends with a slash.
• The $1 is backreference, it carries the content of the first group of brackets.

In other words, when user enters http://mysite.com/topic/faqs/ , the page being called and run would be http://mysite.com/index.php?topic=faqs

Example 2
If you want to change URLs like http://mysite.com/index.php?product=productname&price=30 to http://mysite.com/products/productname/30/. Basically its similar to above.

^?View Code HTACCESS

Options +FollowSymLinks
 
RewriteEngine On
RewriteRule ^products/([a-zA-Z]+)/([0-9]+)/$ index.php?product=$1&price=$2

• The [0-9] in matches numbers only.
• The plus sign is a quantifier that match 1 or more occurences.
• Combining them, ([0-9]+) means 1 or more numbers.
• Similarly, $1 will be the first brackets : product name and $2 would be the second brackets : price.

Example 3
If you want to change URLs like http://mysite.com/article.php?id=45 to http://mysite.com/article-45.html, here’s how:

^?View Code HTACCESS

Options +FollowSymLinks
 
RewriteEngine On
RewriteRule ^article-([0-9]+)\.html$ article.php?id=$1

• The new thing here is the \. (backslash followed by a dot).
• The backslash here “escapes” the dot, so that the dot means a real dot instead of “anything”.

3. Extra Stuff

Custom 404 error page

Put this in your htaccess if you would like to have a custom 404 error page instead of the default one.

^?View Code HTACCESS

ErrorDocument 404 /404.php

Change the 404.php to your page.

Disable directory browsing

For security purpose, its best to disable directory browsing so that people won’t know what files you have. Use this :

^?View Code HTACCESS

Options All -Indexes

Protect .htaccess files

This should disallow other to access your .htaccess file, just like disallowing others to access your wordpress’s wp-config.php

^?View Code HTACCESS


order allow,deny
deny from all

Others references you might need

Mod Rewrite Syntax

SEO for PHPBB3 – Site Title, Meta Keywords and Meta Descriptions

Zen — Thu, 12 Nov 2009 16:33:18 +0000

No offence, but the fact is phpBB has a lot of weaknesses, not seo-friendly being one of them. However, with some simple steps you can improve the SEO of your phpBB. Here in this guide, we will add some basic SEO features to your phpBB by using a better Site Title, adding Meta Keywords and Meta Descriptions. I am using phpBB 3.0.5 for this guide.

A Better Site Title

This is the default site title for phpBB subSilver2 theme.

^?View Code HTML

{SITENAME} • <!-- IF S_IN_MCP -->{L_MCP} • <!-- ELSEIF S_IN_UCP -->{L_UCP} • <!-- ENDIF -->{PAGE_TITLE}

According to the codes above, no matter where you are, your site name would be shown first. This is recommended for your main forum index, but not for viewforum and viewtopic. For better SEO, your forum title or topic title should appear first. That can be achieved by the following codes.

Open your template’s overall_header.php, look for tags (like above) and replace it with the following :

^?View Code HTML

<!-- IF S_IN_MCP -->{L_MCP} • <!-- ELSEIF S_IN_UCP -->{L_UCP} • <!-- ENDIF -->
   <!-- IF SCRIPT_NAME == "index" -->{SITENAME} - {SITE_DESCRIPTION}
   <!-- ELSEIF SCRIPT_NAME == "viewforum" -->{FORUM_NAME} | {SITENAME}
   <!-- ELSEIF SCRIPT_NAME == "viewtopic" -->{TOPIC_TITLE} | {SITENAME}
   <!-- ELSEIF SCRIPT_NAME == "posting" --><!-- IF S_USER_LOGGED_IN --><!-- IF TOPIC_TITLE -->{L_TOPIC} - {TOPIC_TITLE}<!-- ELSE -->{L_FORUM}<!-- IF FORUM_NAME --> - {FORUM_NAME}<!-- ENDIF --><!-- ENDIF --><!-- ELSE -->{SITENAME}<!-- ENDIF -->
   <!-- ELSEIF SCRIPT_NAME == "ucp" -->{L_VIEWING_UCP} - {PAGE_TITLE}<!-- IF CUR_FOLDER_NAME -->{CUR_FOLDER_NAME}<!-- ENDIF -->
   <!-- ELSEIF SCRIPT_NAME == "mcp" -->{L_VIEWING_MCP}<!-- IF PAGE_TITLE --> - {PAGE_TITLE}<!-- ENDIF --><!-- IF L_TITLE --> - {L_TITLE}<!-- ENDIF -->
   <!-- ELSEIF SCRIPT_NAME == "faq" -->{L_VIEWING_FAQ} - {L_FAQ_TITLE}
    <!-- ELSEIF SCRIPT_NAME == "search" -->{L_SEARCH} <!-- IF SEARCH_TITLE --> - {SEARCH_TITLE}<!-- ENDIF --><!-- IF SEARCH_MATCHES --> - {SEARCH_MATCHES}<!-- ENDIF --> | {SITENAME}
   <!-- ELSEIF SCRIPT_NAME == "memberlist" --><!-- IF S_USER_LOGGED_IN -->{PAGE_TITLE}
    <!-- IF S_SHOW_GROUP --> - {GROUP_NAME}<!-- ENDIF --> | {SITENAME}<!-- ELSE -->{SITENAME}<!-- ENDIF -->
   <!-- ELSEIF SCRIPT_NAME == "chat" -->{L_VIEWING_CHAT}
   <!-- ELSE -->Viewing Undefined page<!-- ENDIF -->

This is an edited version of codes taken from another website (I forgot). I found this site title suits me well. Change things around to suit your need.

Now here’s how your site title looks like:

Forum index : Site Name – Forum Description
View Forum : Forum Title | Site Name
View Topic : Topic Title | Site Name

Adding Meta Descriptions

Also in overall_header.php, add this at anywhere in the tag.

^?View Code HTML

{FORUM_DESC}
{MESSAGE_TRIMMED}YOUR DEFAULT META CONTENT" />

Replace the “YOUR DEFAULT META CONTENT” with the meta description of your site. It will be used on pages when its not viewforum or viewtopic.

MESSAGE_TRIMMED is undefined, yet.

As you can see the template tag {MESSAGE_TRIMMED} is undefined. {MESSAGE_TRIMMED} is a new template tag that should carry not more than 150 characters of the content of first post because most search engines use a maximum of 160 characters for the description.

Open your_phpbb_root/viewtopic.php, look for:

^?View Code PHP

define('IN_PHPBB', true);

Replace with:

^?View Code PHP

$zvloop = 0;
define('IN_PHPBB', true);

Next, look for:

^?View Code PHP

if (isset($cp_row['row']) && sizeof($cp_row['row']))

If you can’t find the line, stop finding and paste the codes below after the big $postrow array. if you found it, paste this codes below before the line:

^?View Code PHP

  if ($zvloop == 0) {
    $zv_topic_trimmed = substr(strip_tags($postrow['MESSAGE']),0,150);
  $zvloop++;
  }

Lastly, look for:

^?View Code PHP

// Output the page
page_header($user->lang['VIEW_TOPIC'] . ' - ' . $topic_data['topic_title']);

Replace it with:

^?View Code PHP

$template->assign_vars(array(
	'MESSAGE_TRIMMED' => $zv_topic_trimmed
));
 
// Output the page
page_header($user->lang['VIEW_TOPIC'] . ' - ' . $topic_data['topic_title']);

That’s it for meta description.

Adding Meta Keywords

Although meta keywords is not important anymore, there’s no harm adding it.

Paste this after your meta description and change the keywords. It wll be used throughout your forum so use suitable keywords.

^?View Code HTML

Any comments or corrections are welcomed.