How are you including videos on your website?  Are you still using flash to embed them or have you switched to html5?

With the state of the internet today it makes sense to use the video playback features already included in modern web browsers and revert to flash playback only when necessary.  This is true for several reasons.

First, people watching flash videos must have a flash plugin installed to watch videos, but html5 does not require users to install any browser plugins to watch videos.  Removing additional requirements of video playback not only streamlines the process, it also lessens the workload on your CPU.

Secondly, and probably the most important, millions of mobile devices are blocked from using flash in any form.  This means that anyone using a device such as the iPad will never see a video if it is in flash format.  But html5 videos are viewable without a hitch on these devices.  Mobile internet devices are one of the fastest growing industries, so content providers are going to need to adapt to this arena as well as the normal desktop territory.

While html5 video has its advantages, there are still weaknesses to this new way of doing things.

The main drawback to using html5 video is the lack of a viable fullscreen option.  Watching an online flash video in fullscreen is nothing out of the ordinary, but not an option yet in html5.  Well, you can watch html5 video in fullscreen with the latest version of Firefox, but the framerate is remarkably reduced which results in a very “choppy” video.

So if you can handle the lack of fullscreen playback, then there really is no reason to use flash for videos except as a fallback method for browsers that don’t yet support html5 video.

If you don’t use html5 video on your site, what is holding you back?

I don’t spend a lot of time worrying about whether or not my website’s code is valid or not.  And by valid, I mean if it conforms to the W3C standards or not.

Sure, I try to always use the proper markup when creating sites, but even if I slip up a time or two, it probably won’t make a difference in the final product.  And if it does, then it is quickly fixed and I move on.

I have met people who are pretty fanatical about insisting that their website contain no validation errors.  I have heard some of them say that websites rank better in the search engine if they validate properly.  I partially disagree.

Having a 100% W3C compliant website will not improve your search rankings.  And most of the time having a website with validation errors will not hurt your search rankings either.  The only time a validation error will harm your website is if that error keeps the search engines from indexing your content.

Let me say that again, because it is a point worth driving home:

The only time a validation error will harm your website is if that error keeps the search engines from indexing your content.

Most coding errors in a website are really minor things.  You never notice them because most modern browsers are able to auto-correct most of them.  Search engines will not penalize your site because of these minor mistakes; they drop the hammer only on more serious slip-ups.

Let me provide a good example of what I’m talking about.  Two of the top websites relating to SEO are seomoz.org and seobook.com.  You can search Google for “SEO” and you will find both sites in the top 10 results.  Now let’s check to see how compliant they are (according to the W3C Validator):

• Seomoz.org contains 40 errors and 5 warnings
• Seobook.com contains 183 errors and 67 warnings

If W3C validation was crucial to search engine ranking, don’t you think these titans of the SEO industry would be on the forefront of perfection?

My suggestion would be to worry less on things that really don’t matter and focus more of your time on things that do.

I was approached by Mohammed from msafi.com and he thought that this article he wrote might be of use to readers of this blog. I agreed with him and decided to republish it here. You can find the original publication here

Most people just accept the default, out-of-box layout of blogs even though they know it is not optimal for the nature of their blog. I’m not the first to say that blog navigation is a nightmare.

Why is that?

The main problem with blog navigation is that the content is not interlinked properly. That’s especially true for generic blogs that aren’t about one single topic.

When a visitor lands on your generic blog, they’re probably interested in only one of the topics that you cover. Say that topic is dogs. Even though all of your dog posts are grouped by “tags” and “categories”, your blog sidebar is probably distracting the visitor with links to other unrelated content about cycling, rock climbing or whatever else you write about.

Don’t distract your readers.

Give your readers only what they’re interested in at that moment and help them find more of it. Doing that will make your visitors stick around longer, browse more pages, and even improve your SEO!

Here’s how you can achieve that.

Clean Up Your Sidebars

On your post pages, you don’t have to tell the reader about all the categories and tags that you write about. Why would you clutter your sidebar with such information?

A list of categories and a tag cloud are useful information on the homepage because they give your reader an overview of the things that you write about. So, you can put those on the sidebar of the homepage, but not the sidebar of posts pages.

The problem is that most WordPress themes don’t separate the site-wide sidebar from the post sidebar. It is, however, essential to have a separate sidebar for posts if you’re serious about improving the navigation and layout of your blog. If your theme has a single sidebar for everything, read this post to learn how to give your posts their own sidebar.

Ideas for Relevant Content to Put on Your Posts Sidebar

The more a Web page is focused on a single topic and the more links to other related Web pages it has, the more search engine optimization weight it’ll carry for that topic. Making your sidebar relevant to the topic of the post itself will have huge benefits for your blog. Here are some ideas of the relevant content put on your sidebar:

• Related links to other posts on the same topic on your blog
• A list of categories that the post belongs to
• A list of tags that the post belongs to
• RSS feed for the categories and tags that the post belongs to

Use a Related Posts Plugin

Perhaps the best thing you could do to improve the navigation of your blog is to use a related posts plugin. The most popular plugin for this function is Yet Another Related Posts Plugin (YARPP).

Read this post to learn how you can put links to related posts on your sidebar using YARPP.

I hope you found these tips helpful. If you have any questions, comments, or suggestions on what else can be done to improve navigation, post them below!

Many times when you are designing and building a website you will want to use an image of text instead of actual text.  You do this because many times the fonts used for the web just don’t look the way you want them to.  This is a common and proper way of doing things but if you are going to replace text with a text image make sure you do it in a way so that search engines can “read” what your image says.

The problem with using images of text instead of the actual text is that it gives search engines less content to index.  Sure, you can use an “alt” tag in your replacement image that states what the image is about, but what if you could use an image and give the search engines the actual text to crawl as well?

This is easily done with a little HTML and CSS.  Let me give you two examples to show you what I’m talking about.

If you look at the header of this site you’ll see the title “Rob McGuire” in big, bold text.  As you can probably guess by now, it is an image file and not text.  Yet the search engines read that spot as actual text that says “Rob McGuire.

What I did is insert the following piece of code into the header section:

<div id="name">
<a href="http://www.robmcguire.net">Rob McGuire</a>
</div>

I created a div with the id of “name” and inside that div I entered the text “Rob McGuire” and linked it to my homepage.  When search engines crawl my site, they see the text and index it accordingly.  Sounds simple so far, right?

Now the CSS I applied to show an image instead of the text is simple enough as well.  The CSS code used is as follows:

#name {height: 103px; width: 390px;}
#name a {height: 103px; width: 390px; background: url(images/name.png) no-repeat; display: block; text-indent: -9999px;}

Now let me explain what this CSS code does.

First, I defined the height and width of the “name” div with the line of code starting with just “#name”.  The image replacement is actually done with the second line which defines what happens to hyperlinks in the div named “name”.  With “#name a” I defined the hyperlink’s height and width, gave it a background image to show (which is the Rob McGuire image) and also set the image to not repeat.  I then set it’s display attribute to “block” which basically creates a line break before and after the element.  If you don’t add in the “display: block” attribute for hyperlinks then the image won’t display.  Finally, to have the real text disappear I added the text-indent property to push it far off the left side of the screen.

That is the basic rundown on how to create a linkable text image that is also “readable” by the search engines.  Now if you wanted to use an image of text instead of real text that isn’t linked to anything the process is nearly identical.

Let’s say that I wanted to use the same “Rob McGuire” image in the header but this time I didn’t want to link it to the home page.  Then I would have entered this code in the header area instead:

<div id="name">
Rob McGuire
</div>

You’ll notice that the only difference between this code and the previous example is that the text isn’t linked to anything.

The CSS for this is only slightly different as well and it looks like this:

#name {height: 103px; width: 390px; background: url(images/name.png) no-repeat; text-indent: -9999px;}

That’s all there is to it in that instance.  Much of what was entered for the original “#name a” attribute is now in the “#name” one instead and you should notice that the “display: block” property is missing as it is not needed in this instance.

Sometimes while doing this you may find that your actual text is still showing up even after you put in the “text-indent” property.  Most of the time this is because either your current div or parent div has a text alignment property that aligns text to the right.  You can solve this problem by adding the following CSS property to your image replacement div:

text-align: left

Hopefully by entering this your text should magically disappear from view.

If you have images of text on your site that are “just” images, try changing the code up this way and give the search engines a little more information to index on your site!