Increase Traffic to Your Website With Widget SEO

From KickApps Documentation

Contents 1 Yes, Flash and JavaScript can improve your Google rankings! 2 SEO Basics 3 Syndicated Widgets 4 In-page Widgets 5 Advanced Content Widget SEO with Server-side Technology 6 Don't Forget the Metadata! 7 Closing Thoughts

Yes, Flash and JavaScript can improve your Google rankings!

You probably became interested in KickApps widgets because they're so people-friendly: they provide appealing players and interactive experiences that draw users into your website. With the App Studio's WYSIWYG editing tools, they're also budget-friendly: you can quickly build and deploy advanced widgets without special Flash, design, or scripting tools.

But are they SEO-friendly? Can they help your website or online community appear at the top of search engine results pages?

The short answer is yes.

If you design and manage them correctly, widgets will help your website's SEO. In this article we'll teach you how you can use widgets to improve your site's search engine optimization (SEO).

Widgets serve 2 SEO functions:

1. When you use widgets on your own site, they serve as content that can be seen, heard, and interacted with. These "widgets as content" tell search engines "this is the best page to find information about this topic."
2. When you share widgets on other sites, they serve as syndicated feeds that link users back to your site. They're "widgets as widgets," valuable as an advertisement of the other cool members and media someone can find on your site.

We'll focus on the latter case first, because it's simpler.

SEO Basics

SEO is an acronym for Search Engine Optimization. It is the practice of managing your website, widgets, and content in order to appear near the top of the list when a user searches for a word related to your website.

Good SEO will send more people to your site: people searching Google and other "search engines" will see your website listed in the search results, click the link, and end up on your website. You can read a detailed definition of SEO on Wikipedia.

At a very high level, there are 2 basic strategies for improving your website SEO:

1. Provide good content that includes the words and phrases that people use when they're searching. Search engines evaluate this content when determining whether to include your website in the results of a search.
2. Get lots of links from other sites pointing back to your own ("back links"). Search engines consider back links when determining how important your content is and a where to place it within a list of results.

Syndicated Widgets

When you syndicate a widget ("share" it to another website or blog), it includes a feed or player and links back to your site, so people can see more. In SEO terms, you use syndicated widgets to create back links.

If you design cool widgets filled with interesting content, videos, and member profiles, users will who see them will:

1. Click on them and land on your site
2. Share them with their friends

The former case is a back link. The latter case is simply the propagation of additional back links.

In both cases, the syndicated widget's content doesn't help your SEO – there isn't much value in improving the content SEO of other sites by placing keywords in their pages via widgets. (In fact, it might make them competitive with your own site!)

Instead, syndicated widgets build back links, so it's important to include a link to your website within the widget itself.

There's a common misconception that Google and other search engines only index textual HTML content, but this isn't true. Google does index text in Flash, including external content rendered by Flash, which means that Google does in fact index the text in the RSS feeds rendered by your KickApps widgets. You can gather more technical information on the Flash 'n SEO website.

A perfectly optimized Widget should also include an HTML link alongside the widget embed code. We're working on updating all widgets to include a small HTML back link in the share code while keeping 2 issues in mind:

1. The back link will point to a page that's relevant to the Widget's content
2. Back links won't "mess up" other pages' designs

You should add a back link beneath your widgets' embed code, until we begin automatically generating it within the share code.

Use the Compatible Embed Code when you add a widget to someone else's website. (The Compatible Embed Code is what your widgets show by default in the "share" screen when someone is going to copy and paste them to other sites.)

The Compatible code doesn't use JavaScript, so it will work on sites that don't allow JavaScript code, such as Facebook and MySpace.

In-page Widgets

When you add a widget to one of your own web pages, it places an interesting content feed or player. In the world of SEO, in-page widgets primarily improve your site content and create keyword phrases within your pages.

In this case, widget content helps your website's SEO. If you place a "most recent blog post" widget on your website homepage then all of your members' blog content will create a dynamic feed of content for your page. In addition to "more" content, search engines generally reward "frequently-updated" content, so feeds of relevant information are a good thing.

But there is a catch: if you want your widgets to help your SEO, a search engine must be able to "read" your widgets' content.

Adobe (the people who make Flash) recommends that you use the SWFObject JavaScript technique when placing Flash Widgets on your pages.

At a high level, SWFObject is a JavaScript that allows you to replace text with a widget after a page loads. This process is invisible to normal humans (they only see the widget) but is recognized by search engines, which read the text and use that information as an indication of the Widget's content.

The good news is that KickApps widgets already use SWFObject. In the App Studio, when you publish a content widget for use in your own website, choose the JavaScript Embed Code option before you copy and paste the widget code. (You should only use this option when adding widgets to your own website – most other social networks such as Facebook and MySpace block JavaScript.)

The code will look something like this:

<!-- Put both of these <script> tags in your <header> though they will still work in the <body>. -->
<!-- This first <script> only needs to be on the page once even if you have multiple widgets. -->
<script type="text/javascript" src="http://serve.a-widget.com/kickFlash/scripts/swfobject2.js"></script>
<script type="text/javascript">
   var flashvars = {affiliateSiteId:"5057", widgetId:"215638", width:"450", height:"90", revision:"10"};
   var params = {menu:"false", allowfullscreen:"true", allowscriptaccess:"always", wmode:"transparent"};
   var attributes = {id:"kickWidget_5057_215638", name:"kickWidget_5057_215638"};
   var expressInstallURL = "http://serve.a-widget.com/kickFlash/scripts/expressInstall2.swf";
   var swfURL = "http://serve.a-widget.com/service/getWidgetSwf.kickAction";
   swfobject.embedSWF(swfURL, "altContentDiv", "450", "90", "9.0.28", expressInstallURL, flashvars, params, attributes);
</script>

<!-- Put this <div> anywhere in the <body> of your page where you want the widget to show up. -->
<div id="altContentDiv">
   <!-- Put alternate content here for when the user doesn't have flash or javascript and for SEO purposes. -->
   <p align="center"><font size="1px" face="Arial">You need Adobe Flash Player 9 to view this widget.<br/><br/></font>
   <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" border="0"/></a></p>
</div>

If you're familiar with HTML, you'll see a section of the Widget that reads "put alternate content here". If not, look for the last grey line of text. Replace that comment with HTML content. Your content will be loaded on the page then replaced with the Flash widget. In fact, anything within the #altContentDiv div will be replaced by your widget.

Your in-page content and widget content should match each other or Google and other search engines might penalize you.

Here's what that code might look like on a dog lovers website:

<!-- Put this <div> anywhere in the <body> of your page where you want the widget to show up. -->
<div id="altContentDiv">
   <h3>Recent Dog Owners</h3>
   <p>GoodDoggy.com is home to more than 10,000 dog lovers. You can <a href=”http://sample.mysite.com/membersearch.html”>find more dogs and dog owners here</a>.</p>
   <p align="center"><font size="1px" face="Arial">You need Adobe Flash Player 9 to view this widget.<br/><br/></font>
   <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" border="0"/></a></p>
</div>

The example above includes some additional SEO techniques:

1. It uses a heading tag that would match the widget heading, followed by some additional text.
2. It also included a link to a search results page of most recent members, so search engines and users who don't have Flash can still find those listings.

Advanced Content Widget SEO with Server-side Technology

With content widget code and the SWFObject scripts, such as the example above, you can get really optimized for search engines with the help of custom RSS feeds and some server-side code.

To do this, you would:

1. Find the URL of the feed that populates the widget (whether from the Feed Builder or your external source).
2. Install an RSS parser on your server (SimplePie, for example, is a usable PHP solution).
3. Configure your parser to write the feed contents into the HTML page into the widget's #altContentDiv div on the page.

Once this was complete, your content widget's alternate content would exactly match the Flash content and would be updated every time the feed updated, both of which are great for SEO.

You can also bypass the widget altogether. Using the technique above, simply configure your server-side parser to grab the feed and write the contents directly into your page as HTML.

Don't Forget the Metadata!

Your rich media pages such as KickApps-powered Play pages get better SEO if all of the metadata (title, description, tags, categories, and geographic information) is filled with relevant information.

An active editorial staff is your best bet in this area – don't be shy about adding descriptions, editing titles to include keywords, categorizing, and otherwise updating UGC to include more keywords.

You should also educate your users about best practices for "getting seen" on the web. Your top members will probably be interested in learning the basics of SEO and will help ensure that their UGC is being seen and indexed.

For example, if you include geographic keywords such as city and state names in your dog lovers' website then it will be more likely to appear in searches for "boston pug". Encourage your community members to update their profile pages to include geographic information – once it's there, KickApps will automatically add it to any new media they upload, hassle free (they can of course edit it at any time).

Closing Thoughts

For more information on optimizing Flash widgets for search engines, we strongly recommend the Flash 'n SEO website.

SEO techniques are important, but you should always start with good content. You'll get the most SEO mileage by creating compelling content and getting other sites to link to your website.

Remember, search engines really just want to show the most "relevant" websites. An SEO-unfriendly widget that gets tons of links is more valuable than eking a bit of relevance from optimized code.