-
Два года назад я начал заниматься SEO. Тогдашнее увлечение обучением заставило меня посещать различные отечественные форумы и блоги и использовать в своей практике все методы, о которых я не знал, полезны они или бесполезны. Но со временем произошло глубокое обучение. Я стал с подозрением относиться к различным методам, циркулирующим в Интернете. Когда известные методы рассылки ссылок, написания мягких статей, подбора ключевых слов и т. д. были исчерпаны, я все еще не мог их победить. в рейтингах и трафике. В то же время я был утомлен и должен был задуматься о более глубоких и эффективных методах работы в области SEO. После бесчисленных перипетий я вернулся к своей старой сфере «программирования и внешней разработки». «. Казалось, в одночасье вдруг стало понятно, чем я сейчас занимаюсь. Разве это не лучшее SEO?
Честно говоря, мое исследование относительно закрыто. Я не достиг состояния «лучшее SEO — это отсутствие SEO», и у меня нет очень хорошего практического опыта в области SEO. Я часто думаю о том, как улучшить мою текущую работу. Если бы я сейчас дал определение SEO, это было бы так: сеть + оборудование + программа + структура сайта + веб-стандарты + контент + люди. Многие люди в Интернете обсуждают концепцию «контент – это король». ", но многие другие факторы игнорируются. Если эти факторы объяснить подробно. Предполагается, что можно опубликовать очень толстую книгу. Эта статья просто хочет рассказать вам о влиянии веб-стандартов на SEO.
Текст начинается:
Чтобы понять взаимосвязь между веб-стандартами и SEO, вы должны сначала понять, что такое «веб-стандарты», я думаю, вы просмотрели множество пояснительных документов в Интернете, но все равно чувствуете себя немного запутанным и растерянным. Чтобы узнать из Интернета, я скопирую для вас абзац, но в итоге я все равно не могу его понять. Чтобы понять веб-стандарты, вам придется начать с создания базовой веб-страницы:
Например: если я хочу написать простейшую веб-страницу, я должен использовать теги HTML. Например: если я хочу выделить текст, мне нужно использовать тег <strong>. Если я хочу изменить цвет текста, я. мне нужно добавить тег <font color="color" >, я хочу начать новый абзац, поэтому мне нужно использовать тег < >. Я не могу использовать бессмысленный тег <jacu>, чтобы подчеркнуть текст, потому что он есть. такого тега вообще нет, и браузер не может его проанализировать, поэтому Ассоциация W3C (Всемирная паутина), организация) встала и сказала интернет-практикам во всем мире: «У каждого есть свои мнения, давайте унифицировать эти ярлыки, какие из них можно использовать, а какие нельзя; и тогда все дадут этим ярлыкам единое, разумное объяснение, чтобы каждый мог понять, для чего эти ярлыки используются». В результате был наконец представлен стандарт HTML 1.0. После последующих модификаций и обновлений постепенно стали доступны другие веб-стандарты, такие как HTML 2.0. .html 4.01, наиболее часто используемый на всех веб-страницах, и стандарт xmhtml 2.0, который еще официально не выпущен. Все стандартные обновления совместимы с предыдущими версиями. Когда мы создаем веб-страницы, они обычно находятся вверху. веб-страницы Такое предложение:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Это фактически определяет вашу модель документа, которая объясняется с использованием стандарта xhtml 1.0.
Но позже макет веб-страницы становился все более и более сложным. Было невозможно создать красивую и красивую страницу, просто полагаясь на эти HTML-теги. Например, я хотел компенсировать некоторые другие инструменты. изображение на 20 пикселей или я хотел разместить текст на расстоянии 5 пикселей, этого действительно сложно добиться, просто полагаясь на HTML. В это время W3C больше не мог сидеть на месте, поэтому встал и сказал: «Давайте определим что-нибудь еще, чтобы реализовать эту функцию». После бесчисленных обсуждений был выпущен стандарт CSS 1.0. Используя это, вы можете легко добиться смещения контента, интервалов и других эффектов. После разработки мы добрались до CSS 2.0 и CSS 3.0. Каждый должен следовать этому стандарту при определении стилей с помощью CSS.
Позже люди обнаружили, что полагаться исключительно на HTML и CSS все еще не идеально. В нем отсутствует взаимодействие человека с компьютером, и он не может достичь динамических эффектов. Было бы еще лучше, если бы мы могли перемещать элементы на веб-странице, поэтому w3c представил стандарт emascript, который определяет интерфейс объектной модели документа. Грамматика и т. д. Например, широко используемый JavaScript соответствует стандарту emascript.
Хорошо, теперь все кажется идеальным. Используя стандарты HTML, CSS и стандарты emascript, мы наконец можем создавать красивые веб-страницы. Мы собираем эти стандарты вместе, чтобы сформировать веб-стандарты. Итак, какие веб-страницы соответствуют веб-стандартам:
Например, кусок html написан так
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<голова>
<title>демо</title>
</голова>
<тело>
<p><font color="#ff0000">Текстовое содержимое</font><p>
<img src="x.jpg" />
<дл>
<dt><h1>Название</h1></dt>
<dd>Содержимое</dd>
<dd>Содержимое</dd>
<дл>
<b>Содержание</b>
</тело>
Итак, соответствует ли этот код веб-стандартам? Давайте еще раз проанализируем эти коды. В первой строке вы определяете, что тип вашего документа — xhtml 1.0, что означает, что все ваши html-теги должны быть написаны в соответствии с этим стандартом. тела В теге <p> тег шрифта признан устаревшим в этом стандарте, а атрибут цвета также признан устаревшим в этом теге, поэтому этот абзац не соответствует веб-стандарту. Давайте посмотрим на <img>. снова тег. Атрибут align определяет выравнивание изображения, но атрибут alt отсутствует. В стандарте xhtml 1.0 img должен определять атрибут alt. Посмотрите на тег dl. , dt определяет заголовок. Тег <h1> является вложенным, как определено в xhtml 1.0. Вложенность тегов <h1> в теги <dt> не допускается, поэтому она также не соответствует стандарту 1.0. Посмотрите на последний тег <b>, слава богу. Этот тег наконец-то соответствует веб-стандартам. Но w3c сказал это. Мы пока сохраним значение этого ярлыка. Однако по-прежнему рекомендуется использовать тег <strong>, который имеет более семантический смысл. Позже в новом стандарте мы можем отменить тег <b> как стандартный тег. Что касается ограничений стандарта HTML, ознакомьтесь с соответствующими документами.
Кстати говоря. Я думаю, все понимают. Эта страница даже не соответствует стандарту xmhtml 1.0, поэтому она определенно не соответствует веб-стандарту. Что касается того, соответствует ли она веб-стандарту, все зависит от определенной вами версии. Но этот код можно нормально разобрать. браузер, потому что мы уже упоминали выше. Как я уже сказал, все стандарты совместимы, но они просто не соответствуют стандартам, которые вы определяете сейчас. Итак, как мне привести этот код в соответствие с моими веб-стандартами? Есть только два пути. 1. Понизьте стандарт вашей модели документа (это может вызвать больше проблем). 2. Измените код повторно, например, поместив цвет в атрибут style, img плюс атрибут alt. Для сравнения, мы более охотно выберем второй. тип.
В Интернете есть объяснение: веб-стандарт = div + css Использовать макет таблицы не составит труда. Эта концепция просто сбивает с толку и обобщает. Нельзя сказать, что веб-страницы с табличным макетом не соответствуют веб-стандартам. W3C никогда не определял, что использование табличного макета не соответствует стандартам. Тег <table> всегда был стандартным тегом во всех версиях. Хотя мы все используем div для верстки, нам нужно понимать: практики, рекомендованные другими, не равны стандартам.
Как упоминалось ранее, веб-стандарты зависят от версии, которую мы определяем при написании html/css/js. Например, если мой HTML-код использует стандарт xhtml 1.0, то мой HTML-код также должен соответствовать стандарту xhtml 1.0. Но похоже, что это не так. Почти 99,999% веб-страниц в Интернете не могут пройти проверку. На официальном сайте w3c всегда есть те или иные ошибки. .org может пройти проверку. Да, заинтересованные друзья могут это проверить. На этом этапе наша статья, похоже, зашла в тупик. Поскольку многие веб-страницы не соответствуют веб-стандартам, они также могут добиться хорошего рейтинга и трафика. веб-стандарты Какая связь с SEO? Нам придется начать со структуры и анализа HTML.
В веб-дизайне особое внимание уделяется разделению структуры (html) и представления (css). Именно так мы можем понять их концепции. Конструкция представляет собой дом. Представляет собой полку из железобетона и кирпича, а исполнение – отделку и модификацию конструкции, как отделку, монтаж полов, так и штукатурку и покраску стен дома. Без структуры производительность не имеет фактического значения производительности, поэтому <font color="#ccc" size="12">text</font> или такие теги или свойства, потому что структура больше похожа на производительность, он должен оставаться на уровне представления, то есть в CSS. Если мы применим тег шрифта к строгой странице xhtml 1.0, на самом деле его также можно правильно проанализировать, потому что, как мы говорили в первой статье, стандарты совместимы с прямыми версиями. .
Давайте разберемся, как браузеры и поисковые системы анализируют наш html. Почему мы здесь говорим о браузерах? Потому что, на мой взгляд, поисковые системы и браузеры используют примерно один и тот же метод при анализе html. После спуска начинается парсинг HTML. который в конечном итоге преобразует всю страницу в дерево DOM со строгими узлами отношений родитель-потомок. А затем представить его пользователю, например, когда я напишу следующий код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<title>название</title>
</голова>
<тело>
<div id="топ">
<h1>Это заголовок<h1>
<img src="xx.jpg"/>
<p>Это <strong>текст</strong><p>
</div>
<div id="контейнер">
<h2>Это другое название</h2>
<p>Это еще один <strong>текст</strong></p>
</div>
</тело>
</html>
Вы можете видеть, что это фрагмент HTML в соответствии со стандартом перехода xhtml 1.0. Здесь много ошибок (ошибки включают в себя: тег <h1> в первом div не имеет закрывающего тега. img не имеет атрибута alt. Тег <p>). также не имеет закрывающего тега). Но если вы поместите этот код в браузер и выполните его, вы увидите правильный эффект. Тег <h1> работает. Тег P тоже работает, и картинку можно отобразить. Мы очень удивлены, почему в этом коде даже нет правильного тега, но почему его можно правильно разобрать в браузере. Если предположить, что этот код неправильный. Верна. Структура dom должна быть такой, как показано ниже (рис. 1).
Загрузить и скачать вложение (16,49 КБ) в 16:58 позавчера
Почему браузер может правильно разобрать неправильный код? И вроде бы способен «угадать» истинное предназначение кода ошибки. Принцип заключается в том, что браузер использует режим словарного анализа и режим сопоставления (html tidy) при построении дерева тегов. Проще говоря, браузер будет сопоставлять все теги и атрибуты с информацией во встроенном словаре. Если совпадение нормальное, оно будет проанализировано напрямую. Если совпадение не является нормальным, оно будет проанализировано напрямую. Просто включите режим завершения. Режим завершения проанализирует ваш ошибочный код и исправит его. Например, теги <h1> и <p> в конце приведенного выше кода будут автоматически заменены на закрывающий тег, или если вы напишете его. Пара тегов <jiacu> text</ jiacu>. Это вообще невозможно исправить и исправить. Он напрямую очистит недопустимую пару тегов, оставив внутри только текст. Конечно, при просмотре HTML в дереве DOM он не изменит исходный код HTML. Это просто действие синтаксического анализа. Поэтому во многих случаях, если мы не проверяем ошибки HTML на наших страницах, мы не обнаружим эти ошибки. . Потому что браузер автоматически исправил это за нас. Вообще говоря, браузеры обеспечивают полную совместимость с ошибками в HTML. Исправьте, если это может вам помочь. Если избыточные теги или атрибуты можно удалить, они будут удалены. Если их невозможно очистить и исправить, теги будут автоматически удалены для обеспечения нормального отображения.
Однако «режим организации» не всесилен. Мы не можем ожидать, что браузер поможет нам исправить все ошибки, так много раз, когда наши страницы вложены все глубже и глубже, с все большим и большим количеством тегов и все большим и большим количеством контента. Иногда, когда Браузер не может исправить теги, единственное, что он может сделать, это «удалить все теги в блоке ошибок и оставить только содержимое».
С точки зрения поисковой системы, перед анализом контента ее предпосылка такая же, как и у браузера, который требует построения полного дерева DOM. Только когда это дерево будет завершено, поисковая система сможет определить взаимосвязь контекста на странице, а также определить ее. Какие взвешенные теги (например, <strong>, <h1>) используются на странице, а также позиции их распределения и т. д. Однако поисковые системы при анализе больше внимания уделяют понятию «блок контента», то есть один тег на блок. Все еще приведенный выше пример html. Когда поисковая система строила это дерево DOM, когда она анализировала тег <h1> в первом div, она обнаружила ошибку. При анализе тега P она обнаружила другую ошибку. правильно постройте это DOM-дерево, оно включит режим отделки, но режим в это время может помочь вам исправить ошибки, а не в «блоках». Поиск вышестоящего блока (узла) блока ошибок (узла) (если на верхнем уровне все еще есть ошибка, продолжаем поиск верхнего уровня. Если в блоке верхнего уровня ошибки нет, то все под). -блоки и подблоки в этом блоке верхнего уровня будут удалены. Все ошибочные теги в подблоке будут удалены, то есть все ошибочные теги в <div id="top"> будут удалены. Построенное дерево показано на рисунке 2 выше (версия 2011.4.5: на рисунке 2 есть небольшая ошибка. Под тегом div слева находится тег img).
Таким образом, мы видим, что тщательно написанные нами теги <h1> и <strong> исчезли после анализа, а «вес» всего блока сместился. Согласно принципу анализа HTML, мы можем легко их подтянуть. заключение:
1. Когда уровень узла страницы становится все больше и больше, мы должны быть особенно осторожны с ошибками уровня меток. Чем ближе к верхнему узлу, тем более осторожными мы должны быть. Например, нам следует писать меньше конечных тегов. фатально для SEO.
2. Независимо от того, какую раскладку вы используете, чем меньше уровней вложенности узлов, тем лучше. Во-первых, это позволяет снизить нагрузку на поисковые системы при разборе узлов. Во-вторых, поисковым системам легче определять (контекстные) связи между узлами. , Важное значение имеет вес ключевых слов.
3. Когда атрибуты метки можно заменить на css, максимально переместите их на css.
4. И браузеры, и поисковые системы допускают ошибки HTML, но стандартный HTML, очевидно, легче получить более высокий рейтинг при тех же внешних условиях.
На написание этой статьи у меня ушло почти четыре часа. Некоторые части не очень подробны, я поделюсь ими в третьей статье.
Источник статьи: Lightyear Forum (при перепечатке указывайте ссылку на источник и автора)
Автор статьи: newyhj