Videos are playing a bigger role than ever in search engines and social media sites. They tend to be a  more engageing experience for site visitors and much more useful than articles and how-tos. Getting Google to recognize and organize your videos is key to any site SEO strategy. Video sitemaps help make this possible.

What are video sitemaps? Sitemaps are a way for users to find content within a website, like a books table of contents. A video sitemap is the same thing, but includes rich video content. Not only is it good for users, but a great way for site administrators to let Google know about the great videos on your site. Technically speaking, they are simply a file stored in the root directory with code that describes and organizes your rich media content.

Why are they good for SEO? Search engines are getting better than ever at determining the structure and content on your site- but quality SEOs still don’t want to leave anything to chance. It is best to submit a file to Google that clearly outlines all the pages on your site, in one organized layout, helping search engines to index your content correctly.  A sitemap allows you to control what hierarchical flow of information is going to look like and often the creation of a sitemap will help to identify content that is not organized well as it help you to visualize the entire structure of your site.

How to build them? Video sitemaps are getting easier to create with many quality tools, but some webmasters prefer to create theirs by hand. Let’s go over some of the basics.

Option 1: Manually Create an XML file

Using a text editor you can easily create an XML sitemap with the necessary video elements. It takes some time, but the code is fairly straight forward. I’ve included an example XML File below with my clarifying [comments].

1   <url>

2   <loc>http://VideoExample.com/video-page/</loc> [tells Google about the landing page URL]

3   <video:video>

4    <video:title>Video Library</video:title>

5    <video:publication_date>

6      2011-07-07T18:00:00UTC

7     </video:publication_date>

8     <video:player_loc allow_embed=”yes”>

9

10    http://VideoExample.com/video-page/First-Video.swf

11

12    </video:player_loc>

13    <video:content_loc> [signal to Google about the video URL]

14

15    http://VideoExample.com/video-page/First-Vide.mp4

16

17    </video:content_loc>

18    <video:thumbnail_loc>

19

20   http://VideoExample.com/video-page/First-Vide.png

21

22   </video:thumbnail_loc>  [signal to Google to display thumbnail in search engine]

23   <video:description>

24    A really good description of video

25   </video:description>  [signal to Google to display a description]

26   <video:category>Good Keyword Category</video:category>

27    <video:tag>Descriptive Keyword Phrase</video:tag>

28    <video:tag>Another Descriptive Keyword Phrase</video:tag>

29    <video:tag>Yet Another Descriptive Keyword Phrase</video:tag>  [tells Google what your video is about]

30    <video:duration>180</video:duration>

31    </video:video>

32   </url>

Option 2: Use a Video Sitemap Generation Tools

Some like ultimate control by doing it manually, but I prefer to utilize software tools to do the dirty work for me. Also, they often help me include optional, but helpful, elements that I might otherwise forget. Some helpful tools include:

Google’s Sitemap Generator: Google’s free and slightly out of date tool- that they are no longer keeping up, but leaving to the open source community to update and maintain.

Video Sitemap Pro: Free tool for download on a PC or Mac with basic sitemap functionality.

EZS3 Sitemap Generator: Free web based tool helpful if you use EZS3 to host your videos.

XML Sitemaps.com: Auto detects videos on your page and creates an XML sitemap to be submitted to Google. Great for XML sitemaps, HTML sitemaps, video sitemaps and more. The free version allows up to 500 pages to be included, with the $19.99 standalone software allowing unlimited number of pages.

How to submit to Google? The best way to get your video sitemap submitted is to go to Google directly via your Webmaster Tools login. If you don’t have a Google Webmaster’s Tool account yet, get one asap! Once you done this, it’s fairly easy to submit your sitemap by simply…

1. Going to your Site Configuration option

2. Click on the Sitemaps link

3. Click on Submit a Sitemap to grab and submit your xml file

It’s great for normal sitemaps as well as video sitemaps.

Feedback: What other tools do you use to analyze or create quality video sitemaps? Any reviews for the sitemap generator options above?

- Big beach balls in the background to jazz things up and give the sense of tons of personality

- Guy drawing a funny-face picture on the invisible dry erase board when talking about their awesome culture (although I do loooove dry erase boards and markers)

At the end of the day, I’m so glad to see the world’s most influential company is filled with super smart people that are trying to solve the difficult problems. There Google! I redeemed myself- so please don’t fry my brain with a laser from a satellite that is probably watching me type this.

What are Frames? HTML Frames define one particular window or frame within a frameset. The <frame> tag allow the site creators to add documents or an independent window inside an normal site page.

Difference between Frames and iFrames? iFrames are simply Inline Frames, and all the formatting is contained within the iFrame tag. Normal HTML Frames are located within a Frameset, and the formatting is all placed within the Frameset tag.

What’s the problem with Frames? A lot of debate has gone on within the SEO community about the readability of Frames. Many claim that Frames are fully supported by Google- with no negative effects from their use. However, Google’s Webmaster Central Blog states the following:

“Google supports frames and iframes to the extent that it can. Frames can cause problems for search engines because they don’t correspond to the conceptual model of the web. In this model, one page displays only one URL. Pages that use frames or iframes display several URLs (one for each frame) within a single page. Google tries to associate framed content with the page containing the frames, but we don’t guarantee that we will.

If you’re concerned with how your site appears in the Google search results, please read Search Engines and Frames This document describes the use of the “NoFrames” tag to provide alternate content. If you use wording such as “This site requires the use of frames,” or “Upgrade your browser,” instead of providing alternate content on your site, then you’ll exclude both search engines and individuals who’ve disabled frames on their browsers. For example, audio web browsers, such as those used in automobiles and by the visually impaired, typically do not support frames.”

Although Google does their best to support Frames and iFrames, clearly the expectation should be that there will be problems.

Code Examples

Below is an example of an HTML Frame:

<frameset cols=”25%,50%,25%”>
<frame src=”independent-window.htm” />
<frame src=”separate-document.htm” />
<frame src=”another-for-good-measure.htm” />
</frameset>

Below is an example of an iFrame:

<iframe src=”window-not-in-a-frameset.asp” width=”100%” height=”300″>
<p>Your browser does not support iframes.</p>
</iframe>

What is an SEO to Do?

As mentioned in Google’s blog, the use of the NOFRAMES tag will greatly help non-frame users and search engines to know the content you are referring to in the frame.

For example:

<frameset cols=”25%,50%,25%”>
<frame src=”independent-window.htm” />
<frame src=”separate-document.htm” />
<frame src=”another-for-good-measure.htm” />
<noframes>
<p>The frameset contains:</p>
<ul>
<li>As much of the content in the frame that I can get in here, so search engines can read it.
<li>Also, it helps visitors in older browsers.
</ul>
</noframes>
</frameset>

Instead of putting phrases, such as, ‘Your browser does not support iframes.’ included actual content so users and search engines can more easily read it.

Helpful resources

- W3.org intro to Frames

- W3Schools.com- HTML iframe tag

- Search Engines and Frames- Search Engine Watch

Feedback: What are some good and bad uses you’ve seen of Frames? What resources have you found for using Frames effectively for SEO?

What is JavaScript? Used to create dynamic, interactive user experiences on websites, JavaScript is a programming language that runs on the site visitors computer, meaning it’s client side computing.  Support for JavaScript is built right into modern web browsers, as long as the visitor has JavaScript enabled.

Are JavScript and Java the same? No. They are not related, other than both being computer programming languages and their authors apparently loved coffee. “Java is to JavaScript what Car is to Carpet” is a common explanation of their relation- which is ‘not much’.

What’s the problem with JavaScript? As a internet programming language- it’s great. It creates interactive elements for web pages, such as: validating input values in web forms, opening windows with controls over size and position or images changing when a mouse hovers over them. JavaScript becomes problematic when applied to links. Links created in HTML are straightforward and easy for search engines to read, index and pass juice to and from. However, their is a lot of uncertainty in the SEO world about the link juice that gets passed from JavaScript links. We know that Google crawls and recognizes these for link discovery, but the amount of  link juice is another story. There are many different ways to create links with JavaScript and which is best for SEO is unknown- and should thus be avoided.

Code Examples

HTML Link

<a href=”clean-and-easy-url.html“>anchor text to click</a>

JavaScript Link

In the head of the document:

<head>
<script language=”JavaScript”>
function MyFunctionName()
{
// javascript code
}
</script>
</head>

The link in the body of the page is them created:

<a href=”javascript:MyFunctionName();“>anchor text to click</a>

Another option is to put the JavaScript in the link itself:

<a href=”/convoluted-url/?siteUrl=’ + escape($(“#id_siteUrl”).val() )+ ‘”>

What is an SEO to Do?

Whenever possible, use HTML for all links. There are just too many unknowns about the juice that is getting passed. If a JavaScript link is absolutetly mandetory, you may want to consider adding additional HTML links on the page to aid with the SEO. Whenever possible, implement standard <a href=”"></a> links.

Helpful resources

- Crawling the internet- Basics of search engine viewable content and links

- Can Google index and pass juice from JavaScript links?

- JavaScript and Links Q& A

- JavaScript Links and SEO Discussion

Feedback: What are some good and bad uses you’ve seen of JS? What resources have you found for using JS effectively for SEO?

What Makes for SEO Kryptonite?

Any type of site code technology that is difficult for Google to read may be considered SEO Kryptonite.  Google is getting better at reading all kinds of sloppy code and file types, but as an SEO it’s always better to take a more straight forward approach when creating websites or features within websites. The three candidates for most powerful Google Kryptonite would have to be Flash, JavaScript and Frames. Let’s take a look at each and see why Google can’t read them, or at least not effectively- making them a web element that should be avoided when possible and worked around when absolutely necessary. Part 1, below, introduces Flash and the SEO problems it creates.

Flash Kryptonite

What is Flash? I started using Macromedia Flash almost a decade ago- mostly for the creation of education material and fun little web animations. A rich multimedia platform, Macromedia was later purchased by Adobe, used for creating interactive animations and really engaging modules. Often used for advertising, video and game creation, Flash is a really fun program to develop in. The foundation of the user interface is the timeline. A user simply adds shapes, video, text and audio on different layers within the timeline, then they can easily create animated ‘tweens’, syncing them with audio, making a self playing movie type file. Additionally, developers can add interactive elements, button and quiz questions utilizing ActionScript, the language used within the interface. All this happens within the Flash (.fla) file.

All this is well and good, but the SEO problems arise after the animated piece is completed and its rendered and compiled. When this happens, the ActionScript, text, code and animations are compressed into a self-playing, self-contained .swf file. The .swf file is then often embedded in a website with the following code:

<object width=”575″ height=”400″>
<param name=”movie” value=”coolanimation.swf“>
<embed src=”coolanimation.swf” width=”575″ height=”400″>
</embed>
</object>

Google has becoming increasingly sophisticated with their reading and indexing of Flash, but it still causes major problems. For one, the code above is embed code, that means that a file is referenced on the page- but not accessible to the search engine spiders. The ‘coolanimation.swf‘ file often contains links to other content within the file itself. Likewise, any interactive navigation is hidden from view. The only thing search engines can read and index above is the name ‘coolanimation‘- that doesn’t give Google a lot to go by.  There are ways to add some text within the embed code, but you have to be careful here as it may send a spam signal to Google.

What’s an SEO to Do?

Let’s say you can’t avoid some Flash uses within your site. instead of making the entire page Flash, try just embedding a small header or banner. Then within the content of the page include that content in an index friendly way (complete with formatting tags and readable links). Also, their are several ways to help make flash content or pages more search engine friendly, here are a few:

-How to SEO the flash site

-Experiment with SEO friendly Flash techniques

-HTML 5 Instead of Flash- get the best of both worlds

Feedback: What are the worst uses you’ve seen of Flash? What are the best? How can they be used effectively, and still get some SEO benefits? Let us know what you think.

Custom Google Search Commands

Want to bend Google’s search results to your evil, maniacal ends? Or…just for some good SEO research? Either way, Google offers several helpful custom query options allowing searchers to tailor the results to their needs. I utilize several of these every single day, for competitive analysis, link building and when I’m trying to immerse myself into a new clients online industry to get myself up to speed about the landscape we are about to compete in. The following are some of my favorites along with my description of how I might use it in my day-t0-day SEO work.

site:

The ‘site:’ command allows me to limit the results page to just one specific website and lets me know how many pages for the site have been indexed by Google. Also, it’ll let me know the major sections of the site- particularly if there are sub-domains, blogs and the general layout of the site. I find it helpful to look into 2-3 of the competing sites to tell the same thing. It’s helpful to know what kind of footprint the competing sites have. How large of a site, with sub-domains included, are we competing against.

inurl:

The ‘inurl:’ command is helpful to analyze competitors use of URLs throughout their site. When I’m researching a competitor that I know is engaged in aggressive SEO, I can quickly see what main keywords they are going after by seeing the major keywords they have worked into their sub-page URLs.  Also, using this command to analyzing the site I’m working on to identify duplicate content issues or poor URL structure.

cache:

Although I usually use Google’s ‘Cached’ link beneath a search result, I occasionally do a direct ‘cache:’ search to quickly see the latest Google cached version of a site. Once here, I really enjoy looking into the ‘Text-only version’ link on the top right corner to see all the text that Google is able to identify. It offers a great ‘naked’ view of the content on the page.

intitle:

When I want to search just the title tags of sites, I’ll use the ‘intitle:’ command. It’s useful while link building, as I can find sites that are targeted towards the phrase (particularly long tail) I’m optimizing for. It’s a nice query for searching industry specific directories or blogs.

- (minus sign):

The ‘minus’ command is one I use every day. Both in normal searches and in Google’s Keyword Suggestion Tool. It removes from the search keywords I don’t want to include, helping to filter and refine the search.

| (pipe):

The ‘pipe’ command simply adds the ‘OR’ operator to the search. If I want to view an industries forums or blog, I’d search ‘forum | blog’. Obviously, I’d add a industry specific keyword to find forums or blogs specific to the client I’m working with.

Feedback: What other Custom Searches do you use? Either in everyday searches or for specific SEO tasks?

Site Navigation Approaches

When it comes to site navigation, there are lots of good, bad and ugly ways to help users and search engines find their way around your site. I’d like to show two bad approaches, with examples, and the optimal technique. I’m going to go in reverse order here in showing examples of each.

The Ugly

Tables: An antiquated approach to navigation is the use of tables and images. I’ll admit, early in my web-dev days, I’ve created a site or two using this method. Tables include a lot of extra code, right on the page, that can clutter things up making for ugly code and making it hard for Google to read and index. When the images contain the text of the navigation, then Google can’t read it and give it the respect it deserves. Also, these two methods can make the page load a little slower- not a good thing for users or search engines (remember- Google takes site load time into account when ranking your site).

Rocky Mountain Movers: Nice company, really bad use of table and images in their navigation. With some nice alt text, sometimes this can be overcome- but not my first choice.

The Bad

Flash: Adobe Flash, although one of my personal favorite tools because it allows one to create fun and elegant navigation (one of my first sites was 100% in Flash- many years ago) doesn’t allow search engines to get in and see the code under the hood. Within Adobe Flash, developers use ActionScript to create animation and navigation. However, after it is rendered and compiled, all the search engines see is essentially an interactive movie. The code is locked away- in the dark recesses of a .swf file- this is bad. Fantastic option for a great user experience, but really bad for SEO. Search engines are getting better at reading them, but it’s still not an optimal solution.

Case-Mate: A prime example of nice, but unreadable site navigation is I Make My Case. Award winning company- not the most SEO friendly navigation.

DOT: I love Design of Today (DOT). These folks are really creative- and their site reflect their quirky awesomeness. However, Google can’t read the entire website, because the navigation and content is buried 100% in Flash.

The Good Navigation

Navigation that is easy for visitors to use, search engines to read/index and loads quickly is the best choice. Smart use of HTML and CSS will cover your bases.  Instead of using tables to create the layout of the site and navigation- replace it with <div> tags. Within these tags use the bullet point HTML code of <ul> and <li> (unordered list and each bullet point). You may think this will just create an ugly billeted list, but when CSS is applied- it’ll end up looking great. Also, within the <li> tag itself, you can type in the text keyword, so Google can easily read it. Finally, because the CSS code is all on another document, removing most the styling code from the on-page HTML, the site will load faster.

Example of HTML and CSS for Site Navigation

HTML Code: When viewing the source of CNN.com’s homepage, you can see the use of Divs, calling the CSS file for styling, <ul> bulleted lists and then the actual text and link of the navigation button.

CSS Code: The CSS code that is called resides on another document, but is called from the homepage. The separation helps the on-page code be cleaner and load faster.

View the Tutorial: I take a few minutes and walk you through these examples of the good, the bad and the ugly (actually, the flash sites are quite gorgeous, talking about tables here). Enjoy!

Feedback? What other navigation approaches do you use for a good user experience and effective SEO? Please, let us know.

SEOs know that viewing the page source of a particular web page is an essential first step to analyzing how much and what kind of SEO strategy may be needed for a site. A lot can be seen in just a few minutes by taking a look under the hood and viewing some of the publicly available innards of a page.  A lot can be hidden from view within the source code, but a lot is freely available- and many of these elements are critical SEO indicators of what SEO has been done, and what may be needed. Some of these deficiencies will be easily remedied, while others may be major problems “inherent in the system” (please forgive the Holy Grail reference).

What is the Source?

Every HTML page includes source code that can be easily seen within any browser. Simply right click on the page and click the view source option. Remember, just because you can see the code- doesn’t mean you’ve now captured the secret sauce of the site. The server side code is not displayed. Generally, it’s basic layout HTML and references to CSS files, with meta data (see our post on Meta Data). The really good stuff is hidden from view- but you’ll be able to see more than most people realize- especially SEO relevant info.

Best Tools for Viewing

Firefox: My preferred browser for viewing source code is Firefox, because of the well formatted display. In contrast, Safari, a great and user-friendly browser, is awful. It displays the code in ugly black and white, with no formatting, indenting or coloring of tags.

Firebug: An even better view of the source code is available when you install the Firefox (also available in Safari) plugin ‘Firebug’. This handy tool allows you to view even more information with the best formatting available. Take a look at a well done Firebug tutorial video for a more in-depth look. Some of the features that I love include:

- The source code displays in the bottom half of the screen, allowing me to see the viewable page and the source code on one, split browser screen.

- Hover over any element of the page, right click and select the ‘Inspect Element’ option to see the source code highlighted for that specific portion of the page.

- Collapsible formatting within the code section.

- CSS code that is available for preview.

- Edit any of the code, right within the tool, and see the effects (temporarily) of the changes on the page.

Top 5 Things to Look for

1. Meta Tags: SEOs can quickly see the meta title, description and keyword (pretty useless)  tags. It’s a great way to see what 3-4 phrases the site may be focusing on for SEO. If these are missing, you can anticipate that no SEO is going on- as these are some of the first and most basic changes that are applied. I find looking into competitors title tags to be a useful first step in analyzing and creating a profile about their SEO strategy. Additionally, I can see what types of ‘calls to action’ they may be using on the SERPs page- as this is often what the description tag is used for.

2. Meta Robots: Meta robots are page-specific directives for controlling crawlers for Google, Bing, etc.  Specific pages can be kept out of search engines by utilizing this tag. It looks something like this:

<meta name=”robots” content=”noindex”>

The tag will keep the entire page, and URL (the robots.txt file command will keep the page, but not the URL out), so it is often the preferred way to keep a page from being seen by everyday Google searchers.

Sites that include this are usually pretty heavily involved in SEO, so I may pay particular attention to them when analyzing their links, on-page SEO, etc.

3. Frames: A frame is essentially an HTML page inside another HTML page. They are not good for SEO. The content within the frame doesn’t count towards the page it is embedded on, so SEOs should stay free of this coding technique when trying to get the most bang out of a page’s buck. Look for code that looks something like this:

<FRAMESET COLS=”20%,*”>
<FRAME SRC=”recipesidebar.html” NAME=SIDEBAR>
<FRAME SRC=”recipes.html” NAME=RECIPES>
</FRAMESET>

Look for code snippets such as: ‘frameset’, ‘frame’ or ‘iframe’

4. Flash: Search engines are getting better at reading and indexing Flash elements, but these should still be used in moderation (if at all), and only for small portions of the page. An entire page should never be all Flash! When viewing the source code, look for code that might include:

<object width=”550″ height=”400″>
<param name=”movie” value=”somefilename.swf”>
<embed src=”somefilename.swf” width=”550″ height=”400″>
</embed>
</object>

Look for code elements such as: ‘embed’ and ‘object’

5. JavaScript Links: As in the case of Flash, search engines are getting better at identifying javascript, but the search engines haven’t been very clear about what types (as js can be written several different ways) they support. Links that use javascript are in danger of not being followed- so link juice may be limited. Clean HTML links are always the best choice. A javascript link may look something like this:

window.location.replace (‘http://www.javascriptlinkexample.com’);

Feedback? What do you look for when viewing source code and analyzing a site or competitors site? Do you have different or better tools for viewing source? Please, comment below with your feedback.

Simply put, metadata is data that describes other data. Webpages include metadata–called meta tags–that describe the content on the page. These include the Meta Title, Meta Description and Meta Keywords. Titles are really important for SEO, descriptions are really important for searchers and keywords are not important at all. Ignore them, unless you particularly like doing menial tasks with all your spare time. We’re going to take a look at the Meta Description tag: where it’s most important and some terms you may want to include.

Meta Description Tag

The description tag shows up in many search results (Google reserves the right not to use the description tag). It is text that describes the given page. It should be 150-160 characters in length, and unique and descriptive for each page.

Write Descriptions for the User

Google announced in Sept, 2009 that keywords and description tags are not used as a ranking factor. Write them with the user in mind, not search engines; meaning you will want to use direct calls-to-action and verbiage that compels visitors to click on the link in their search results. Let’s take a look at some of these phrases you may want to consider.

Phrases to Include

Terms and phrases that can help drive clicks include:

Official Site: Include this phrase if 1) it is the official website of your company, 2) it’s the homepage, 3) there are generic sites that clutter the search results, or 4) you have a product brand or site brand that is known.

Free Shipping: Buyers LOOOOVE free shipping. Amazon is pushing this concept hard and eBay is trying to get all their sellers to offer it- and you should really consider it also. It has become a must to many online shoppers. If you do offer free shipping, the description is a great place to promote it to improve click-throughs.

Fast Shipping: Free upgrade to any kind of expedited shipping, or really fast order processing makes for great customer service and improves the rate of returning customers. If you have a reputation for fast shipping, brag about it and let everyone know.

Low Price Guarantee: A little cliche, but if you offer great prices let potential customers know as soon as possible.

Reviews, Pictures, Samples: These three offerings are really popular for online shoppers/product researchers.

Interviews: If you’ve interviewed anyone of interest, industry expert, a quasi-celebrity or actual celebrity. People love interviews.

Feedback? Let us know other key phrases you like to include in Meta Descriptions.

Difficulty (1-10): How difficult the technique is to apply and obtain a link? 1 meaning it’s a very simple technique and 10 meaning it takes a very large investment of time, money or both.

Effectiveness (1-10): Rating of the overall SEO effectiveness of the technique. Will it generally result in high quality or low quality links. 1 being very low value from the link and 10 meaning the link will deliver great link-juice.

Spam Alert (1-10): Rating that shows our opinion about the legitimacy of the technique, and will it be a spammy-approach. Is it likely to be red-flagged or de-valued by Google now or down the road. 1 being a low spam level and 10 a neon sign applied to the link that screams ‘This link is so worthless, it’s almost funny we got it in the first place!’. Even if it isn’t detected, it may require a total sell-out approach to get the link in the first place. Not a good thing for your online or offline reputation.

Comments: I’ve added some of my personal opinions based on experience or gut feeling.

I’d love to hear feedback on 1) the ideas themselves, 2) my rankings and 3) my comments.

Feedback? What rankings would you change? What comments would you add? Let us know what you think.