|
|
|
|
|
Многим специалистам в области SEO известно, что избыточный код представляет собой большую проблему для индексации сайта. Кроме этого, затрудняется само понимание кода: где что и что к чему относится. Существует методы, применив которые можно добиться корректной индексации страниц сайта, прозрачности и понятности HTML-кода.
Что такое избыточный код?
Появления избыточного HTML-кода сопряжено с чрезмерным употреблением операторов, тегов разметки (markup). Разумеется, в данном случае не ведется речь о контенте, который присутствует на странице, – затрагивается проблема именно устранения избыточного кода разметки. Чтобы решить проблему, нужно выяснить ее источники.
Избыток кода от использования Dreamweaver Image Swap
Данное свойство картинки позволяет добиться того, что картинки могут сменять друг друга в порядке, определенном пользователем (эффект «перекатывания»).
Пожалуй, многие обращали внимание на следующие фрагменты кода:
| Код: |
eg.
MM_swapImgRestore(), MM_preloadImages() etc.
|
Наличие подобных фрагментов прибавляет порядка 1,3 кб избыточного кода. Не такая уж и большая цифра, но это только один источник лишнего кода.
Не рекомендуется использовать Image Swap при создании навигационных элементов.
Лучше потратить больше времени на создание приличного CSS для меню, нежели прибегать к использованию Image Swap, к примеру, можно использовать свойство “a:hover”, чтобы менять цвет фона картинками.
| Код: |
#menu a {
background: url('images/button.gif');
{
#menu a:hover {
background: url('images/button-over.gif');
{
|
Использование одних и тех же стилей в CSS
Думается, большинство пользователей совершали подобную ошибку, когда начинали работу с CSS…..
| Код: |
HTML:
<div id="menu">
<a class="menu-item" href="foo.htm">Foo</a>
<a class="menu-item" href="bar.htm">Bar</a>
<a class="menu-item" href="baz.htm">Baz</a>
</div>
CSS:
a.menu-item {
color: red;
}
|
Часто класс "menu-item" используется подобным образом. Но гораздо лучше использовать класс “menu” так:
| Код: |
HTML:
<div id="menu">
<a href="foo.htm">Foo</a>
<a href="bar.htm">Bar</a>
<a href="baz.htm">Baz</a>
</div>
CSS:
#menu a {
color: red;
}
|
В результате, код станет более удобен для восприятия, не будет лишних фрагментов, а работать будет он так же, как и предыдущий.
Бесполезные мета-теги
Не следует злоупотреблять мета-тегами, особенно теми, содержание которых может привести к санкциям со стороны поисковых систем. Не нужно бессмысленно включать ключевые слова во все мета-теги. Пример лишней мета-информации:
| Код: |
<meta name="language" content="English" />
<meta name="author" content="My Name" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="7 days" />
<meta name="reply-to" content="spam@me.good.com" />
<meta name="document-classification" content="" />
<meta name="document-rights" content="Copyrighted Work" />
<meta name="document-type" content="Public" />
<meta name="document-distribution" content="Global" />
<meta name="distribution" content="global" />
<meta name="Publisher" content="My Name again" />
<meta name="Publisher-Email" content="please@spam-me.com" />
<meta name="Contributors" content="Me again" />
<meta name="Page-Topic" content="Repeat the title here" />
<meta name="Page-Type" content="Promotional" />
<meta name="copyright" content="Me again" />
|
Нельзя сказать, что все из них приносят пользу, некоторые даже могут навредить: прописав
| Код: |
|
meta name="Publisher-Email"
|
, вы добровольно подписываетесь под то, что ваш почтовый ящик будет в скором будущем заспамлен. Пожалуй, самыми полезными мета-тегами являются Description и Keywords.
Добавление бесполезной мета-информации также ведет к увеличению кода на 1 кб.
Избыточный код для таблиц
| Код: |
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="whitebg">
|
Пустые ячейки – очень частые гости в HTML-коде. Следите за тем, чтобы такой бесполезной информации не было в вашем коде.
Избыток информации в CSS
Многие не знают, что грамотно составленный CSS может привести к экономии 5 - 10 Кб. Если хотите узнать, за счет чего можно сократить CSS, то можно обратиться к данному сервису.
Избыток от использования редакторов WYSIWYG
What You See Is What You Get («что видишь, то и получаешь») – режим, в котором работает большинство HTML-редакторов. Обычный фрагмент кода для таких редакторов:
| Код: |
|
<span style="font-weight: bold;">This is bold text</span>
|
Это путь, по которому пойдет скорее ленивый, нежели грамотный. А теперь более экономный и лучший вариант:
| Код: |
<strong>This is bold text</strong>
or
<b>This is bold text</b>
|
Также вполне обычным делом является следующий фрагмент:
| Код: |
|
<span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;">some bold text</span>
|
Пустые теги <span> лишь засоряют код и отнюдь не способствуют корректной индексации страниц сайта.
Избыточный комментарий
Здесь, думается, в подробные описания пускаться не стоит. Каждый для себя решает этот вопрос по-своему.
Если разработчик или верстальщик считает нужным давать развернутый комментарий, то пусть это делает. В конце концов, перегруженный код будет все-таки получше, нежели тот, который не работает или в котором легко запутаться.
Идентификаторы сессий
Кроме того, что идентификаторы сессий представляют собой угрозу успешному продвижению сайта (роботы поисковых систем неохотно индексируют url с идентификаторами сессий), так еще подобные url изрядно перегружают HTML-код.
Если на странице находится около 50 url с идентификаторами сессий, то это составляет приблизительно 1,6 кб лишней информации.
Как видим, избыточный код может появиться по очень большому количеству причин. Каждая из них, возможно, не так значительна. Однако, если их брать совокупно, получается существенное количество лишнего кода. Поэтому, перед тем как прописать какой-нибудь тег, подумайте о его необходимости и пользе продвижению, при этом, конечно, не в ущерб концепции и дизайну сайта.
SEONEWS |
|
|
|
|
|
Проблема высосана из пальца.
Ховеры в том виде, что приведены - решат проблему если кнопки не графические (надписи на кнопках обычным текстом, а не пикчей)
Кто оставляет кучу спанов? не вин-ворд ли случаем? Не припомню в дриме вообще такого барахла 
Комментарии на индексацию вообще не влияют и игнорятся ботами.
Не понятно вообще чего автор сказать хотел. Если про то, что избыточный код плох для сео - он не с того конца зашел. Если что это плохо для скорости загрузки сайта - вообще по моему уже пох.
Идентификаторы сессий страшны не тем что боты их не любят, а тем, что одна страница с тысячей сессий может быть проиндексирована 1000 раз, потом все это попадет в фильтры и будет вычищено из базы яндекса. Да и связано это не с хтмл-кодом, а с настройками сервера и движка.
Короче притянуто за уши. Видно кто-то хотел потешить свою графоманию и засветиться на сеоньюз. |
|
|
|
|
|
 почитаю на досуге, но не думаю что там есть что то стоящее  |
|
|
|
|
|
Автор подвел итог своих накопленных знаний. Практикующему HTML кодеру и побольше нюансов известно, а любителю все равно не понятно, потому что это практические знания.
Статья, между строк, призывает думать и не злоупотреблять визуальными редакторами – уже дело. |
|
|
|
|
|
Чин, в нашем деле не бывает мелочей. (да-да, я в очередной раз подтверждаю, что я ужасно мелочный зануда)
И если однажды я прочел в официальном блоге гугла рекомендацию оптимизировать код, то я буду это делать. |
|
|
|
|
|
| Да я ж не говорю что не надо этим заниматься. Я говорю что эта конкретно статья - сплошное буквоедство, и не более того |
|
|
|
|
|
| Rabbit писал(а): |
Не рекомендуется использовать Image Swap при создании навигационных элементов.
|
Если по дизайну макета предусмотрено что только цвет меняется, то
“a:hover” - это вариант, а если не только цвет? Возвращать дизайнеру?
| Rabbit писал(а): |
Избыточный код для таблиц
| Код: |
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="whitebg">
|
|
Таких таблиц пока не видел, другое дело если я в некоторых случаях намеренно делаю в верстке след. вещь:
| Код: |
|
<IMG SRC="/img/spacer.gif" width="800" height="1">
|
. Где изображение - 1х1 прозрачный гиф. Зато есть гарантии, что не разлезется все нафиг и кроссбраузерность тоже рулит =).
| Rabbit писал(а): |
Избыток от использования редакторов WYSIWYG
|
Ф топку! Однозначно уверен, что блокнот мне удобнее. Просто мне времени не хватает чтобы ощутить и использовать всю мощь Дрима, тем более следить за версиями что там нового появляется. По моему мнению раз на выходе будут смотреть страницу в браузерах, то и проверять надо сразу в них. Пусть в блокноте нет всяких там шаблонов и подсветки синтаксиса, зато и решения написанные без всяких там редакторов получаются заведомо оптимальнее.
| Rabbit писал(а): |
Избыточный комментарий
Если разработчик или верстальщик считает нужным давать развернутый комментарий, то пусть это делает. В конце концов, перегруженный код будет все-таки получше, нежели тот, который не работает или в котором легко запутаться.
|
"разработчик" - гм... я если даю комментарии, то исключительно в коде.
"//" или "/**/" и это на странице у пользователя отображаться не будет. А в шаблонах что комментировать?
| Код: |
<!-- top start -->
<!-- top end -->
|
| Rabbit писал(а): |
Как видим, избыточный код может появиться по очень большому количеству причин. Каждая из них, возможно, не так значительна. Однако, если их брать совокупно, получается существенное количество лишнего кода. Поэтому, перед тем как прописать какой-нибудь тег, подумайте о его необходимости и пользе продвижению, при этом, конечно, не в ущерб концепции и дизайну сайта.
|
Ерунда какая-то получается... Я могу сократить код след. путями, например, выкинуть alt у изображений или их размер не указывать - один фиг отобразится. "концепции и дизайну сайта" вреда это не нанесет, хтмл код значительно уменьшится, НО хрен мне тогда какой валидатор сайт оценит.
Примеры, наверное, в статье не убедительные приведены, но лучше делать сайты/стили по стандартам (www.w3.org) нежели попытаться на каких либо вещах экономить по мелочи.
Лучше надо лупить тех кто графику не оптимизирует =). Какие-то кб сэкономленные на коде смешны рядом с объемом графики на странице.
А насчет излишков кода и о том как он мешает поисковым системам - мне вообще казалось что такой вопрос не стоит, по причине не индексации поисковыми системами хтмл-тегов. Или я от жизни подотстал и теперь Гугля от количества таблиц на сайте выдачу организовывает? |
|
|
|
|
|
А я хотел в дополнение привсти код пхп странички для очистки Вордовского кода (для блогеров будет очень полезна):
<?php
global $echo;
$title="Чистильщик HTML кода от ".$_s['title'];
$file="i/word_a.html";
$cn=(isset($page) and $page!="0" and $page=="example" and file_exists($file)) ? file_get_contents($file) : "";
$echo.="
<h1 class=panel> <b>Чистильщик HTML кода производства десятого ''Ворда''</b></h1>
<br>
<p>Исходный код :</p>
<form method=POST name=clearner>
<center>
<textarea name=cd cols=60 rows=15 style='padding:10px; width=500; background-color:#FFFFcc;'>$cn</textarea>
<input type=submit name=cl value='Почистить HTML код' style='width:150;'>
</center>";
$co=(isset($_POST['cd']) and (isset($_POST['cl']))) ? $_POST['cd'] : "";
$co=preg_replace(
array(
"'<script[^>]*?>.*?</script>'si",
),
" ",
$co);
$co=preg_replace(
array(
"'<SPAN[^>]*?>'si","'</SPAN>'si",
"'<FONT[^>]*?>'si","'</FONT>'si",
"'<o:p>'si","'</o:p>'si"
),
"",
$co);
$co=preg_replace(
array(
"'<P[^>]*?>'si",
"'<B[^>]*?>'si",
"'<OL[^>]*?>'si",
"'<UL[^>]*?>'si",
"'<LI[^>]*?>'si"
),
array(
"<p>",
"<b>",
"<ol>",
"<ul>",
"\n\n<li>"
),
$co);
$co=str_replace(
array(
"\r\n",
"<p> </p>",
"<p> </p>",
" ",
" "
),
array(
" ",
"<br>\n\n",
"<br>\n\n",
" ",
" "
),
$co);
$echo.="
<br><p>Очищенный код :</p><br>
<center>
<textarea cols=60 rows=15 style='padding:10px; width=500; background-color:#FFFFcc;'>$co</textarea>
</center>
</form>
<br><p>Как это будет выглядеть :</p><br>
$co
<br>
<p></p>"; |
|
|
|
|
|
|
|
|
