-
За этот период я прочитал много статей о SEO-оптимизации и обнаружил, что большинство из них говорят о знаниях на этапе эксплуатации, таких как внешние ссылки, внутренние ссылки в статьях, улучшение PR, а также некоторые рассказы об опыте конкретной поисковой оптимизации. . Статей такого типа действительно слишком много. Если вы прочитаете их слишком много, вы почувствуете, что они одинаковы и не имеют свежести. Сегодня я расскажу о чем-то новом, в основном о некоторых приемах HTML-разметки в SEO-оптимизации. Автор по происхождению программист. Так что то, что я написал, немного технический, надеюсь вы меня поймете.
На многих домашних страницах веб-сайтов есть модуль тепловой карты, который можно переключать в виде слайд-шоу (см. рисунок ниже).
Этот модуль занимает 70% отечественных веб-сайтов, включая сайт автора. Код этого эффекта часто находится в передней части структуры HTML-документа, наиболее распространенный — под панелью навигации. Способ реализации — не что иное, как Flash или. JS, наиболее часто используемый код макета выглядит следующим образом:
<div class="баннер">
<объект>
ФЛЕШ-версия
</объект>
</div>
<div class="баннер">
<тип сценария="текст/javascript">
Javascript-версия
</скрипт>
</div>
Автор считает, что если приведенный выше код вставить в переднюю часть HTML, это не только нанесет ущерб SEO-оптимизации, но и очень угнетает обычных пользователей. Недостаток SEO заключается в том, что, как все знают друзья-веб-мастера, передняя часть. HTML-документа. Это то, что поисковые системы ценят больше. Если вы используете JS или FLASH для его реализации, хотя эти коды не могут быть распознаны поисковыми системами, другие важные части могут быть отображены поисковым системам первыми, и эти неузнаваемые вещи будут отображены. позже. Плохо для обычных пользователей то, что этот эффект обычно требует переключения между 4-5 изображениями, а общий размер этих изображений составляет не менее 200 КБ, независимо от того, используете ли вы для его реализации JS или FLASH, при условии, что вы встраиваете его в файл. HTML-документ, пользователь. Вам придется подождать, пока эти вещи загрузятся. Особенно если изображение большое, оно может застрять в области заголовка, что приведет к зависанию браузера. Это самое страшное для пользователей.
За этот период автор обобщил некоторые решения и путем длительного наблюдения практика доказала, что эти решения в порядке, на рейтинги это не влияет, и включение — это нормально, я смело делюсь ими со всеми здесь.
1. Корректировка структурной последовательности
Согласно прошлому опыту верстки и верстки, наш код должен выглядеть так:
HTML-код:
<тело>
<div class="контейнер">
<div class="header">Содержимое заголовка</div>
<div class="banner">Модуль эффектов слайд-шоу</div>
<div class="content">Текстовое содержимое</div>
<div class="copyright">Раздел авторских прав</div>
</div>
</тело>
CSS-код:
тело {поле: 0; отступ: 0; выравнивание текста: центр;}
.container {ширина: 980 пикселей; поле: 0 авто; положение: относительное; фон: серебро;}
.header {высота: 200 пикселей; высота строки: 200 пикселей; фон: красный;}
.banner {высота: 150 пикселей; высота строки: 150 пикселей; фон: желтый;}
.content {высота: 400 пикселей; высота строки: 400 пикселей; фон: синий;}
.copyright {высота: 50 пикселей; высота строки: 50 пикселей; фон: зеленый;}
Улучшенный автором код выглядит следующим образом:
HTML-код:
<тело>
<div class="контейнер">
<div class="header">Содержимое заголовка</div>
<div class="content">Текстовое содержимое</div>
<div class="copyright">Раздел авторских прав</div>
<div class="banner">Модуль эффектов слайд-шоу</div>
</div>
</тело>
CSS-код:
тело {поле: 0; отступ: 0; выравнивание текста: центр;}
.container {ширина: 980 пикселей; поле: 0 авто; положение: относительное; фон: серебро;}
.header {высота: 200 пикселей; высота строки: 200 пикселей; фон: красный;}
.banner {позиция: абсолютная; сверху: 200 пикселей; ширина: 980 пикселей; высота: 150 пикселей; высота строки: 150 пикселей; фон: желтый;}
.content {margin-top:150px;height:400px;line-height:400px;background:blue;}
.copyright {высота: 50 пикселей; высота строки: 50 пикселей; фон: зеленый;}
Благодаря сравнительному анализу приведенных выше кодов я фактически использовал технику плавающего макета позиции в CSS. Вы можете найти соответствующую информацию о плавающем макете позиции. Обязательно усвойте этот пункт знаний, который очень полезен для SEO-оптимизации.
2. Умело используйте отложенную загрузку
HTML-код:
<тело>
<div class="контейнер">
<div class="header">Содержимое заголовка</div>
<div class="content">Текстовое содержимое</div>
<div class="copyright">Раздел авторских прав</div>
<div class="banner"></div>
</div>
</тело>
Код Jquery:
$(документ).ready(функция() {
window.setTimeout(function() {
ФЛЕШ-версия
$(".banner").html("<object>Здесь вставляется FLASH-код</object>")
Аякс-версия
$.get(" http://www.flagwind.com/GetBanner.html ", функция(данные){
$(".banner").html(данные);
});
}, 3000);
});
Общий смысл этого кода Jquery заключается в том, что после загрузки документа через 3 секунды выполнить запрос AJAX или что-то еще для управления содержимым в DIV баннера.
Коды двух приведенных выше решений — это лишь некоторые примеры. Вы можете использовать их в других местах, позже загружать некоторый контент, не имеющий ничего общего с SEO, или использовать JS для задержки загрузки для отображения. Это не окажет большого влияния на поиск. Однако это также хорошо для обычных пользователей. Эта статья была первоначально создана шэньчжэньской компанией по созданию веб-сайта Flagwind Network www.flagwind.com . Пожалуйста, не удаляйте исходную информацию об авторских правах автора при пересылке, спасибо!
Спасибо Shenzhen Qifeng Network за вклад