Make Your WordPress Blog W3C Valid

One of my favorite thing about WordPress is that you can customize every bit of it, that’s the beauty of WordPress and its license, GPL. But sometimes customizations can lead to a slow loading blog and return some results that you surely didn’t wanted. One of them is xHTML invalid codes.

How? Because some of the HTML4.0 tags are no longer valid in HTML5 also WordPress, by default, adds some tags that are not xHTML valid, but somewhat useful in telling search engines about your page. W3C Validator is a nice tool to check the validity of the output of your blog.

Why Do We Need A Valid HTML Page?

The short answer is, “Search Engine Ranking”. Modern search engines like Google and Bing takes the validity of the source code into account (along with many others) while ranking a page into search results.

A valid HTML also renders more quickly in browsers than anything else making your blog load faster than having an invalid source code. While it is no secret that Google now takes the site speed factor into ranking, having a valid HTML will help you in many ways.

What Makes My Blog’s HTML Invalid?

Since the Themes control the main output of the blog, in most cases the main culprit of an invalid HTML is the theme. It might be using some tags that are invalid or no longer valid in HTML5. Some plugins can too throw invalid markups into the output of your blog’s HTML. In some cases, WordPress itself adds some HTML tags that are completely invalid. The best way to perform a validity check and get help is analyzing your blog using W3C Validator.

w3c valid html

So, How Do I Make My Blog’s HTML Valid?

It’s up to your knowledge in HTML and PHP. Some tweaks are very easy to implement and you’ll need no assistance doing that. Only follow the guidance you’ll get while checking your blog using W3C Validator. But some tweaks needs expert hands you better leave it to them.

Here are my tips to deal with some common things that makes an invalid HTML in WordPress Blogs.

1. Character Set: Some charsets can produce weird characters in your blog’s HTML making it invalid. In most cases, the WordPress default settings (WTF8) is fine and you should keep it that way. If your blog language is different from English or has Non-Latin characters, use DB_COLLATE to define it. So, if you are seeing weird characters in your blog, make sure your wp-config.php files has these two lines.

define('DB_CHARSET', 'utf8');
define('DB_COLLATE', 'utf8_spanish_ci');

Change the DB_COLLATE value with the language code you are using. Also, don’t forget to back up your existing wp-config file before making any changes to it. You can always revert back to operational settings if any error appears.

2. HTML5 Document Type: By default W3C analyzes your page as HTML5 and if any deprecated tags are present, it will return errors and warnings. Make sure you have the HTML5 Doctype in your blog’s theme file.

Edit your theme’s header.php file and look at the very first line of it. If you are using a HTML4 doctype, it should read like this;


You should change the line to this


to tell W3C Validator and Search Engines that you have HTML5 Doctype.

3. Social Sharing Buttons: Well, we can’t deny the importance of having the social sharing buttons on our blogs, but that comes with its own price. Most of the button codes are not compatible with HTML5, but you can make them compatible by making some changes to the code. For example, if the code is using & operator to include the values, you can safely change the & to & amp; which is a valid HTML.

So, if you are using Facebook Like button, the modified code will be;

4. WordPress Default Tags: By default WordPress adds some tags that can make invalid HTML. For example, it adds rel="category tag" in category links. So, if you are displaying the list of the categories you have or just displaying the category a post belongs to, it will produce an invalid HTML.

You can use a filter to remove the rel=”category tag” from category URLs since modifying core WordPress files is a very very bad idea. Here is what I am using on my blogs.

/* Remove The rel="category" from Category Links */
function wpstores_remove_category_rel( $output ) {
    // Remove rel attribute from the category list
    return str_replace( ' rel="category tag"', ' rel="tag"', $output );
}
add_filter( 'wp_list_categories', 'wpstores_remove_category_rel' );
add_filter( 'the_category', 'wpstores_remove_category_rel' );

That code goes into the functions.php file of your theme.

If you are not being able to make your blog fully valid, link me your W3C analysis page in comments, I’ll be happy to help you out.

Get Updates In Your Inbox

Get the WordPress Tips and latst Internet Marketing ideas delivered directly to your email inbox, plus access to our FREE Pro Blogging Model blogging guide.

You need to confirm your email once. Don't worry, we hate SPAMs as much as you do

Comments

  1. says

    I don’t think it is possible to make blog post page completely W3C valid because we normally have the links for user comments to open in new window using target=”_blank” in anchor text and this is not a valid W3C property.

Speak Your Mind

Your email address will not be published. Required fields are marked *

You may use these HTML Tags and Attributes

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>