Shimon Sandler

Video and Game Widget Optimization

The question often arises whether or not to use Youtube as a Video strategy. My knee-jerk reaction is usually to cringe. Because, I know when a user grabs the embed code to place it on a blog, website, Facebook, or whatever Social Media platform, it’s Youtube that gets the backlink. Not my client. Youtube gets all the authority and link love.

Embed code image
I’d much rather prefer to see my client get the link love, and authority. Although, there is a consideration to use Youtube to build an audience. But that’s for another post.

So, this post will be on how to use “widgets” (whether they be game widgets, or video widgets) as part of the Video SEO strategy, and how to make sure they are optimized.

Syndicated game widgets and video players are an effective strategy for increasing inbound links. If a popular widget “goes viral”, it can mean tremendous gains for a site’s visibility and PageRank as each link builds PageRank and ultimately improves search engine rankings. However, these gains can only be realized if the widget or video layer is properly optimized. Search engines can follow the source attribute used to reference the content, however, PageRank value cannot transfer directly to the widget source file, instead it must be passed via plain HTML links (anchor tags) to another HTML page.

To ensure syndicated content is fully optimized, an HTML wrapper needs to be provided within the Flash embed “clip code.” Search engine spiders will be able to follow any links contained in the wrapper and pass full PageRank value back to the source and linked pages. Targeted and appropriate keyword-rich anchor text for any HTML links will also increase the efficacy of this type of linking strategy.

Optimizing the HTML Wrapper

The HTML wrapper is a simple DIV tag that either wraps the EMBED tag (Flash), or immediately precedes or follows it. The widget HTML wrapper should be designed and coded with these best practices in mind:

  • No external style sheets can be referenced, so only inline CSS styles can be used.
  • CSS code should be kept clean and concise. Users may become frustrated with unmanageable code if it doesn’t render properly and simply delete it.
  • The styling should match the “chrome” or “skin” of the widget so that it appears seamlessly integrated as a part of the player.
  • Three to four links should be added below or above the player, typically a link back to the main site or vertical and three links to related content.
  • Link anchor text should target keywords that are relevant to the content being provided.

TECH NOTE
DIVs and EMBEDs are both block level elements, so the wrapper DIV tag can follow the EMBED tag and sit right underneath it without any special styling for positioning.

Anchor Text and Inbound Recommendations

  • Include no more than 3-4 links back to the site.
  • Anchor text should be optimized to increase ranking and PageRank for a specific phrase.
  • At least 1 or 2 of the links should be contextually relevant to the widget content. If the widget is for a specific category, include a link for that category. Also include a link for a specific product.
  • 1 inbound link should be to the homepage and include optimized anchor text for a high volume keyword the homepage is already optimized for.
  • Do not place tracking parameters on the links, this will dilute the PageRank for the URL.

CSS Styling and Coding Best Practices

It is imperative to keep the clip code as clean and unobtrusive as possible. Overly heavy CSS increases the chance of broken code and users removing the HTML wrapper because of incompatibles with their site.
Specific code recommendations include:

  • Use only a single DIV container before or after the EMBED tag. A DIV tag is needed to contain the links, but a second DIV is not needed to contain the link DIV and EMBED together.
  • Do not use UL and LI tags to list links. These elements are semantically correct for navigation, but are not necessary and create more code and as block level elements, require additional CSS to be displayed inline.
  • Apply font styles to the container DIV so that they are inherited to each A element. Margin styles or different font colors can be applied individually.
  • Avoid using onMouseOver and onMouseOut to create hover text effects.
  • Condense the FLASHVARS variable string by using a single configuration script or XML file to feed all the vars to the Flash movie.
  • Avoid using images, especially to create custom bullets or extra design elements. Images have to be referenced by their full URL which increases the amount of code.
  • Wherever possible use shorthand for styles.

Optimized Widget Example
Here’s a great example of an optimized video wrapper on SEROUNDTABLE of an old video from The Daily Show.

Video HTML Wrapper example

Be Sociable, Share!

Speak Your Mind

*

*