|
11 апреля 2006 года вышла в свет новая версия браузера от Microsoft, Internet Explorer (IE-7), содержащая код, который поддерживает корректную работу flash-анимации на страницах сайтов. Если раньше flash часто блокировался, то современная версия браузера обеспечивает flash-анимации нормальную работу. Метод, который применили разработчики Microsoft, позволил решить ряд серьезных проблем.
Flash, по мнению многих, снижает видимость страниц сайта поисковыми системами. SEO-специалисты уделяют этому аспекту большое внимание. Достаточное количество популярных WYSIWYG инструментов (от англ. – “What You See Is What You Get” – “что видишь, то и получишь”) вырабатывают непригодный HTML-код для внедрения flash, к тому же большинство дизайнеров, работающих с flash-анимацией, к сожалению, не знают всех возможностей программирования и грамотной организации HTML-кода, едва ли знакомы с поисковой оптимизацией. В результате большинство страниц с flash работают некорректно.
Требования для поддержания корректной работы flash
Для дизайнера Flash – это способ представления большого количества информации в весьма ограниченных рамках, не нарушая при этом общую концепцию дизайна страницы сайта. К примеру, если вы продаете какую-либо технологию, то flash-анимация проиллюстрирует ее преимущества с помощью слайд-шоу или небольшого фильма. Работа с HTML и flash позволяет достигнуть следующих результатов:
• экономия пространства за счет flash;
• успешная поисковая оптимизация;
• доступ людей с различными возможностями (настройками, браузерами) к информации;
• грамотный код;
• корректная работа браузера IE.
Заметим, что добиться всех поставленных целей с сайтами, полностью созданными на flash, невозможно: организационной структуры сайта как бы нет – он состоит из одной страницы. Дабы избежать этого, рекомендуется создавать все-таки сайт на HTML с небольшими вставками flash.
Программирование flash под нужды SEO
В качестве одного из приемов программирования с оптимизацией flash под SEO можно использовать DIV с контентом, воспринимаемым поисковыми системами, а также JavaScript для того, чтобы определять, в каких случаях браузер может отображать flash. Когда браузер поддерживает работу flash-анимации, JavaScript может управлять объектами и изображениями на одной странице, чтобы в конечном итоге перемещать контент, заменяя его в анимационных flash-объектах. Известно, что роботы поисковых систем не индексируют JavaScript, но они индексируют контент, которым управляет JavaScript. В этом контенте можно размещать текст, ссылки, заголовки, картинки, то есть все то, что может быть проиндексировано на обычной HTML-странице.
Однако нужно всегда помнить, что альтернативный контент, который предлагается на сайте посредством DIV, должен обязательно быть полезен пользователю. Если используется очевидный спам, к сайту могут быть применены санкции со стороны поисковиков.
Пример создания меню на flash, индексируемого поисковиками
Пример кода, который расположен ниже, показывает, как реализованы шапка сайта и его меню с помощью flash на сайте. Меню сайта функционирует должным образом с помощью компонента ActiveX, обновленного для новой версии IE. Ранее внутренние страницы сайта не были доступны для индексации, так как роботы не могли пройти по ним: они были полностью реализованы во flash. Для того чтобы разрешить сложившуюся проблему, был вставлен следующий HTML-код:
| Цитата: |
<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>
|
Этот шаг позволил добиться того, что сначала ссылки на внутренние страницы, а затем и сами страницы были проиндексированы роботами поисковых систем.
Получить подробную информацию о данном методе и некоторых других решениях, связанных с flash и JavaScript, можно, перейдя по ссылке.
Пример создания слайд-шоу с видимым для поисковиков контентом
Второй пример показывает, как разместить очень большой фрагмент текста в ограниченном пространстве. Здесь, помимо DIV, использовались возможности CSS, позволившие оставить без изменения структуру страницы при смене текста, которую можно наблюдать даже в отключенных браузерах, JavaScript.
| Цитата: |
<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. 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
| Цитата: |
#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;
}
|
После использования этого метода сайты приобретали интересный дизайн и возможность ранжироваться поисковыми системами на самых высоких позициях.
источник: SEONEWS |
|
|
|
|
