eWebTalk Community - SEO Tips for Flash Based Sites

		eWebTalk Community > The Webmaster Forums > Search Engine Talk
SEO Tips for Flash Based Sites

Thread Tools

Search this Thread

Display Modes

May 20, 2006, 12:48 PM

A.Ah

I run like a Monkey

eArcade Awards

Join Date: Aug 2004

Location: Ontario, Canada

Posts: 4,068

Yapper(s): 1273300081.20 (Donate)

Something interesting I found:

How to SEO Flash

Article Posted 2006 May 12, Friday
by Jonathan Hochman
JE Hochman & Associates
Farmington, Connecticut | United States

As of 2006 April 11, a new release of Microsoft's popular Internet Explorer (IE) browser includes code that prevents Flash controls from working properly on many web sites. The Flash insertion method below resolves this serious problem.

Flash has a bad reputation, undeserved in our opinion, for harming search visibility. Why are SEO consultants concerned about Flash? A few popular WYSIWYG development tools generate invalid, inaccessible HTML code for embedding Flash, and many designers don't know enough about accessibility programming, search engine optimization (SEO) and the benefits of code validation. As a result, most web pages using Flash aren't programmed correctly.

Requirements for Successful Use of Flash

Flash animation is a great way to present complex content because it allows the designer to put more content in a finite space, without wrecking page design. If you sell technology, Flash is an ideal way to present a slide show or movie that explains your products' benefits. With a bit of hand coded HTML, we can satisfy these objectives:

Clean design using Flash
Search Engine Optimization (SEO)
Accessibility for people with different abilities
Code validation
Correct functionality with IE

If you have a site built entirely with Flash, you don't really have a website, because there's no page structure. In that case we recommend building an HTML site, and chopping up your Flash into separate pieces to be installed on each page.

SEO Flash Programming

Our recommended SEO method for optimizing Flash uses a DIV with search engine accessible content, and JavaScript to detect when browsers are capable of viewing Flash. When the browser has Flash capability, the Javascript manipulates the page's document object model (DOM) to replace the alternative content with the Flash movie. Search engine spiders don't run the Javascript, so they see and index the alternative content. The alternative content may contain links, heading, styled text, images - anything you can add to an ordinary HTML page. Simply apply your normal SEO copy editing and coding skills to the alternative content, and Flash becomes a non-issue.

Programming Flash accessibility isn't spamming, as long as the alternative content accurately reflects the visible movie. In fact, alternative content is mandatory if you want to build an accessible site.

The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) specifically states that multimedia content should have an alternative representation available. Accessibility programming creates the benefit of presenting visual information without losing the visitors and search engines dependant upon text content.

Example: Making Flash Menus Spiderable

The sample code below shows a Flash heading and menu from the WirelessBuilders site that has been made accessible with alternative content. The menu will function properly with the latest ActiveX update for IE. Previously, the interior pages of the site were not indexed because search engines could not follow the links inside the movie. We solved this problem using the HTML 4.01 code below:

HTML Code:




<head>
<script type="text/javascript" src="/jscript/flashobject.js"></script>
</head>
<body>
<div id="flashcontent">
<h1>WirelessBuilders</h1>
<p>What we do</p>
<ul>
<li>Site Survey </li>
<li>802.11b </li>
<li>802.11g </li>
<li>systems integration </li>
<li>network design </li>
<li>project management </li>
<li>training </li>
<li>professional services (consulting)</li>
</ul>
<p><a title="Services" href="/services.shtml">Services</a> | 
<a title="About Us" href="/about.shtml">About Us</a> | 
<a title="Contact " href="/contact.shtml">Contact</a> | 
<a title="Partners" href="/partners.shtml">Partners</a></p>
</div>
<script type="text/javascript">
var fo = new FlashObject("/flash/newstyle.swf", "mymovie", "800", "105", "6", "#ffffff");
fo.write("flashcontent");
</script>
</body>

Please visit deconcept for a full explanation of the Javascript code, and download links. You will need to download the flashobject.js file to use this solution.

We do not necessarily recommend building menus in Flash, but if you have a site that uses Flash, and want to avoid the expense of a complete rebuild, this SEO method works well. If a site is built 100% in Flash, you can optimize the content, but you will still only have one page. For those kinds of sites, we recommend recycling the Flash by chopping it into pieces and creating distinct pages.

Example: Making Flash Slide Show Content Visible to Search Engines

A second example, from the Virtutech web site, shows how to insert rather long content into a fixed space. We use a DIV, and set it's CSS property overflow-y to scroll. This prevents the page layout from breaking when the alternative content is displayed. To see the alternative content load the Virtutech home page on a browser with Javascript disabled.

HTML Code:




 <div id="movieAlt">
<div id="movieAltInner">
<h2><a href="/products/index.html">Simics</a> is used to develop the embedded software that runs electronic devices such as:</h2>
<li>Aerospace hardware</li>
<li>Automobile control systems</li>
<li>Telecommunications infrastructure</li>
<li> High-end servers</li>
</ul>
<p><em>Hardware:</em> <strong>Satellite Control System</strong></p>
<p> <em>Challenge:</em> Unable to test software with satellites on orbit.&nbsp; How to verify new software?</p>
<p> <em>Resolution:</em> Using Simics, the developers can run software quality tests on the ground, to ensure that the software works correctly before it's installed.</p>
<h2>Industry: Automotive</h2>
<p><em>Hardware:</em> <strong>Electronic Control Unit</strong></p>
<p><em>Challenge:</em> Need to develop software now, but the ECU won't be available for months</p>
<p><em>Resolution:</em> Simics enables programmers to develop and test the software before the hardware is available, reducing time to market.</p>
<h2><em>Industry:</em> Telecommunications</h2>
<p><em>Hardware:</em><strong> Wireless Network Equipment</strong></p>
<p><em>Challenge: </em> You have twenty programmers. Each needs a complete system for testing. They cost MILLIONS.</p>
<p><em>Resolution:</em> Using Simics to create a model of the target hardware, each programmer can have his or her own virtual device for software testing and debugging, without breaking your budget.</p>
<h2>Industry: Internet</h2>
<p><em>Hardware:</em> <strong>Network servers</strong></p>
<p><em>Challenge:</em> Software bugs keep popping up. Some take weeks to reproduce and fix. You are running out of time.</p>
<p><em>Resolution:</em> With Simics, programmers can run the program forwards and backwards to quickly identify, recreate and repair bugs.</p>
</div>
</div>
<script type="text/javascript">
var fo = new
FlashObject("flash/virtutech_intro.swf", "mymovie", "497", "287", "7", "#ffffff");
fo.write("movieAlt");
</script>

The CSS Code

HTML Code:



#movieAlt { /*Vertical scroll bar on alternative content*/
height: 287px;
width: 497px;
overflow: auto;
}
#movieAltInner { /*Use separate div because IE's faulty box model*/
padding: 10px 20px;
}

In addition to these sites, we've used this Flash SEO method on a number of high traffic sites. The code has been served hundreds of thousands of times without even a single complaint, and the sites have achieved top rankings for keywords found only in the Flash content.

__________________
»» eBypassnow Launched :: Bringing the e to free access
»» Click Here to Access! :: http://www.ebypassnow.com
»» Premium Access for eWeb Members!

Word from our Sponsor:

May 23, 2006, 12:35 AM

starsearcher

Member

eArcade Awards

Join Date: Mar 2006

Posts: 48

Yapper(s): 501646.90 (Donate)

Thanks for sharing. Great one!

__________________
Exabytes - Linux Hosting | ASP.NET 2.0 Hosting | ColdFusion Hosting | Site Builder Hosting

Mar 2, 2007, 11:22 PM

techanuva

Junior Member

eArcade Awards

Join Date: Mar 2007

Posts: 2

Yapper(s): 44.50 (Donate)

i agree with u

__________________
Affordable SEO Services
Siebel Support
Web Application Development

Mar 3, 2007, 12:18 AM

Aaron11

Member

eArcade Awards

Join Date: Dec 2006

Location: Hawaii

Posts: 63

Yapper(s): 1878.70 (Donate)

Quote:

Originally Posted by A.Ah

Clean design using Flash
Search Engine Optimization (SEO)
Accessibility for people with different abilities
Code validation
Correct functionality with IE

HTML Code:




<head>
<script type="text/javascript" src="/jscript/flashobject.js"></script>
</head>
<body>
<div id="flashcontent">
<h1>WirelessBuilders</h1>
<p>What we do</p>
<ul>
<li>Site Survey </li>
<li>802.11b </li>
<li>802.11g </li>
<li>systems integration </li>
<li>network design </li>
<li>project management </li>
<li>training </li>
<li>professional services (consulting)</li>
</ul>
<p><a title="Services" href="/services.shtml">Services</a> | 
<a title="About Us" href="/about.shtml">About Us</a> | 
<a title="Contact " href="/contact.shtml">Contact</a> | 
<a title="Partners" href="/partners.shtml">Partners</a></p>
</div>
<script type="text/javascript">
var fo = new FlashObject("/flash/newstyle.swf", "mymovie", "800", "105", "6", "#ffffff");
fo.write("flashcontent");
</script>
</body>

HTML Code:




 <div id="movieAlt">
<div id="movieAltInner">
<h2><a href="/products/index.html">Simics</a> is used to develop the embedded software that runs electronic devices such as:</h2>
<li>Aerospace hardware</li>
<li>Automobile control systems</li>
<li>Telecommunications infrastructure</li>
<li> High-end servers</li>
</ul>
<p><em>Hardware:</em> <strong>Satellite Control System</strong></p>
<p> <em>Challenge:</em> Unable to test software with satellites on orbit.&nbsp; How to verify new software?</p>
<p> <em>Resolution:</em> Using Simics, the developers can run software quality tests on the ground, to ensure that the software works correctly before it's installed.</p>
<h2>Industry: Automotive</h2>
<p><em>Hardware:</em> <strong>Electronic Control Unit</strong></p>
<p><em>Challenge:</em> Need to develop software now, but the ECU won't be available for months</p>
<p><em>Resolution:</em> Simics enables programmers to develop and test the software before the hardware is available, reducing time to market.</p>
<h2><em>Industry:</em> Telecommunications</h2>
<p><em>Hardware:</em><strong> Wireless Network Equipment</strong></p>
<p><em>Challenge: </em> You have twenty programmers. Each needs a complete system for testing. They cost MILLIONS.</p>
<p><em>Resolution:</em> Using Simics to create a model of the target hardware, each programmer can have his or her own virtual device for software testing and debugging, without breaking your budget.</p>
<h2>Industry: Internet</h2>
<p><em>Hardware:</em> <strong>Network servers</strong></p>
<p><em>Challenge:</em> Software bugs keep popping up. Some take weeks to reproduce and fix. You are running out of time.</p>
<p><em>Resolution:</em> With Simics, programmers can run the program forwards and backwards to quickly identify, recreate and repair bugs.</p>
</div>
</div>
<script type="text/javascript">
var fo = new
FlashObject("flash/virtutech_intro.swf", "mymovie", "497", "287", "7", "#ffffff");
fo.write("movieAlt");
</script>

The CSS Code

HTML Code:



#movieAlt { /*Vertical scroll bar on alternative content*/
height: 287px;
width: 497px;
overflow: auto;
}
#movieAltInner { /*Use separate div because IE's faulty box model*/
padding: 10px 20px;
}

that was very informational news

__________________
Web News/Guru Info & Affiliate Marketing
Traffic Directories Try The First Healthy Coffee

May 26, 2008, 7:55 AM

uvwx669

Member

eArcade Awards

Join Date: May 2008

Posts: 95

Yapper(s): 1665.00 (Donate)

ha. Saw this article is really good, you write make sense very much.

万用表
里氏硬度计洛氏硬度计
维氏硬度计
硬度计

__________________
网站优化

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

Forum Jump

All times are GMT -5. The time now is 9:16 AM.