Исправление 5 распространенных проблем SEO с HTML5 ... сегодня!

1. Проблема 1: нумерация страниц
2. Проблема 2: структура страницы
3. Проблема 3: внутренние страницы поиска
4. Проблема 4: Микроформаты! = Schema.org
5. Проблема 5: AJAX и URL
6. Заворачивать
7. Где дальше?

Некоторое время назад вы, вероятно, слышали разговоры о том, как с HTML5 гораздо проще решить ту или иную проблему, но поскольку X процентов пользователей все еще используют IE, мы не можем «перейти на HTML5».

Однако на самом деле HTML5 - это не то, что вам нужно «включать» - это не одна большая вещь. Думайте о HTML5 не как о инструменте, а как о наборе инструментов ; коллекция новых функций, во многих случаях независимых друг от друга. Этот пост посвящен SEO- преимуществам HTML5, поэтому мы сосредоточены на том, что Google и соавторы. может интерпретировать и не совместимость с браузером. Браузеру нет необходимости распознавать все теги на странице, поскольку мы не нарушаем его возможности визуализации этой страницы (и если браузер тоже получает некоторую выгоду, то даже лучше). Однако мы коснемся того, что браузеры делают и не поддерживают, и как это связано с SEO; В наборе инструментов HTML5 есть множество битов, с которыми у браузеров нет абсолютно никаких проблем, и там, где они делают, мы часто можем помочь им.

Мы рассмотрим некоторые общие проблемы, с которыми сталкиваются SEO, и обсудим, как HTML5 может помочь в их решении. Я уверен, что есть много других ситуаций, когда HTML5 может помочь нам, но я выбрал 5, чтобы начать. Обратите внимание, что не все из них являются открытыми и закрытыми сценариями, но я думаю, что все они являются сценариями, в которых HTML5 может оказать определенную помощь, будь то сейчас или в ближайшем будущем.

Проблема 1: нумерация страниц

Проблемы: дублированный контент, бюджет обхода, поток сока

У вас есть тонна страниц, например, список продуктов в определенной категории, которые полностью идентичны, за исключением того, что подмножество ваших продуктов перечислены на них. Теперь вы хотите убедиться, что вы занимаетесь ранжированием, но вы также не хотите сталкиваться с проблемами дублирования контента или тратить свой бюджет сканирования, позволяя Google сканировать сотни страниц, которые не приносят никакой пользы. Однако, может быть, вы хотите, чтобы они сканировались, чтобы обеспечить индексацию контента? Возможно, вы хотите, чтобы они были просканированы, но знаете, что одни и те же продукты перечислены в разных группах и последовательности в разных категориях, и вы обеспокоены последствиями этого. Если бы вы только могли сказать Google: «Привет! Эти страницы являются постраничными списками, поэтому, пожалуйста, относитесь к ним соответствующим образом!».

Это общий сценарий для многих сайтов, особенно сайтов электронной коммерции; однако, хотя это общая проблема, мы все еще сталкиваемся с проблемами, с которыми сталкиваются многие клиенты. Кроме того, часто клиенты будут иметь какую-то особенную причуду или предпочтение сайта, которая делает это менее простым, чем должно быть.

К сожалению, робот Google еще не чувствовал себя разумно, поэтому мы пока не можем общаться с маленьким парнем, поэтому нам нужно найти другой путь. Введите HTML5 и последовательные ссылки:

Последовательность документов - это та, в которой у каждого документа может быть предыдущий брат и следующий брат. Документ без предыдущего брата является началом его последовательности, документ без следующего брата является концом его последовательности.

Документ может быть частью нескольких последовательностей.

Источник: W3 HTML5 Spec

Это довольно точно описывает нашу проблему! Так как же работают «последовательные ссылки»? Ну, конечно, через нашего старого друга атрибут rel. Ранее кнопки предыдущей страницы и следующей страницы могли выглядеть так:

<a href='products.php?page=3'> Предыдущая страница </a> <a href='products.php?page=5'> Следующая страница </a>

Мы просто добавляем атрибуты rel соответственно:

<a href='products.php?page=3' rel='prev'> Предыдущая страница </a> <a href='products.php?page=5' rel='next'> Следующая страница </a>

Это посылает четкий сигнал о том, что эти страницы являются последовательностью, которая принадлежит друг другу, и, очевидно, эта семантическая информация является чистым способом сообщить Google, Bing и другим движкам об этих отношениях.

Теперь, это не серебряная пуля, и я бы не советовал вам делать именно это и ничего больше, но я бы абсолютно рекомендовал вам добавить эти атрибуты в ваши ссылки на страницы. Это не полное решение, потому что есть «последовательности документов», которые не являются страницами со списком продуктов (например, разделы в руководстве), и у нас пока нет полной картины того, насколько Google будет доверять этим атрибутам. Однако чем больше вы можете рассказать Google о своем контенте, тем лучше вы поможете ей (является ли Google девушка?) Понимать и индексировать ваш контент, и эти атрибуты - фантастический показатель для Google и хорошее место для начала.

Действия: Разверните rel prev / next для ссылок на страницы.

Проблема 2: структура страницы

Проблемы: точная индексация, бюджет сканирования, SERP CTR, поток соков

В течение многих лет нам снова и снова напоминали о необходимости сосредоточиться на семантическом HTML. Первоначально основное внимание уделялось тому, что он делает рендеринг контента на разных устройствах и в разных форматах намного проще, когда он аккуратно распределен по категориям: HTML для контента и значения, CSS для представления и стиля, а также Javascript для дополнительного поведения. Удалить из своего HTML-кода все, что было только для презентации, было не так уж сложно, но добиться полного определения смысла контента с помощью HTML было практически невозможно - HTML просто не был достаточно богатым языком. Микроформаты начали затопляться, пытаясь заполнить некоторые пробелы, но факт в том, что HTML оставался плохо приспособленным для этой задачи.

HTML5 снова прибегает к спасению дня! Он не дает ответов на все вопросы, но в значительной степени помогает нам, предоставляя целый ряд новых тегов, которые мы можем использовать для организации веб-контента, а также для того, чтобы Google и движки оказывали гораздо большую помощь в интерпретации наших сайтов. Некоторые из этих тегов включают в себя:

<section> <header> <нижний колонтитул> <article> <hgroup> <aside> <nav>

В основном это относится к тому, что вы ожидаете, и я не буду подробно описывать их здесь; если вы хотите прочитать о них побольше, то посмотрите отличные w3schools HTML5 Tag Reference ,

Я просто приведу пару примеров ...

Ранее составные части большинства страниц были разделены перегруженным тегом div:

<div id = "myarticle"> ... </ div> <div id = "extrafacts"> ... </ div>

Однако в HTML5 у нас есть гораздо более широкий массив тегов для назначения семантического значения этим элементам, поэтому тот же пример может выглядеть так:

<article> ... </ article> <aside> ... </ aside>

Вы должны сразу увидеть разницу - сами теги теперь передают некоторую информацию о том, что они содержат. Любая поисковая система, пытающаяся интерпретировать страницу и каталогизировать информацию на этой странице, имеющую эти показатели, дает огромное преимущество.

В качестве другого примера, теперь мы можем разбивать страницы гораздо аккуратнее; рассмотрим традиционную проблему с тегом H1 и рассмотрим этот пример:

Что является подходящим H1 на этой странице ?? Дело в том, что не все страницы подразделяются на один основной заголовок. HTML5 использует более разумный подход и позволяет нам иметь несколько

<section id = "finance"> <header> <h1> </ h1> </ header>

... <footer> </ footer> </ section> <section id = "entertainment"> <header> <h1> </ h1> </ header>

... <footer> </ footer> </ section>

HTML5 достаточно умен, чтобы понять, что эти

Для SEO это значительно упрощает структурирование страницы, а для поисковой системы - значительно упрощает интерпретацию страниц и помогает с точной индексацией.

Не совсем ясно, насколько хорошо Google справляется со всей этой новой обнаруженной удивительностью, поэтому я бы посоветовал прагматичный подход в данный момент. Если вам неудобно использовать несколько элементов H1, вы можете использовать другие элементы. Вы, вероятно, обнаружите, что в большинстве проектов есть элементы, которые вы уже можете включить.

Ого ... еще одна вещь, прежде чем погрузиться!

С Firefox, Chrome of Safari, вы сможете применять CSS к этим новым тегам прямо за воротами, но для определенного другого браузера это не так ... В IE эти теги будут недоступны для CSS без малейших затруднений. помощи К счастью, есть решение в виде бесплатного и открытого исходного кода. html5shiv , Скачайте этот умный кусочек Javascript и установите его, и вы обнаружите, что все в порядке. Возьми это IE!

Действия: Постепенно начните рефакторинг дизайна вашей страницы, чтобы постепенно интегрировать эти новые элементы. Начните заменять или дополнять общие теги div этими новыми тегами.

Проблема 3: внутренние страницы поиска

Проблемы: точная индексация, дублированный контент, бюджет сканирования

Что произойдет, если вы перейдете на страницу результатов Google Bing для Googling Bing? Ну, на самом деле ничего, потому что они блокируют его с помощью robots.txt, но я хочу сказать, что когда поисковая система начинает сканировать страницы результатов другой поисковой системы, вселенная становится непростой.

Теперь, если у вас есть функция внутреннего поиска на вашем сайте, стандартным ответом будет заблокировать его с помощью robots.txt и остановить адский кошмар, который может возникнуть в противном случае. Однако некоторые сайты фактически смешивают функцию поиска со странными навигационными системами или даже используют результаты поиска в качестве способа перечисления определенных категорий продуктов, на которые они затем ссылаются. Лучшее решение состоит в том, чтобы исправить IA сайта и сделать это не проблемой, но это не всегда так просто, как должно быть.

Кроме того, вы можете найти много людей, ссылающихся на страницы результатов поиска, а в некоторых случаях вы можете захотеть, чтобы они были проиндексированы.

Ну, HTML5 предоставляет быстрый и простой способ сообщить Google, что происходит ...

<a href='/search.php' rel='search'> Поиск по сайту </a>

Это позволяет поисковым системам знать, что целевая страница является поисковой системой, и звучать не должно быть повторяющимся, но это действительно полезный сигнал, который вы можете предоставить поисковым системам, и для добавления к каждой необходимой ссылке потребуется всего 20 секунд. Пока вы там, вы можете проверить opensearch.org что позволяет делать некоторые действительно крутые вещи - в том числе позволить браузерам обнаружить вашу функцию поиска и включить ее непосредственно в панель поиска браузеров.

Действия: Добавьте релевантный поиск ко всем ссылкам на любые функции поиска на сайте.

Проблема 4: Микроформаты! = Schema.org

Проблемы: социальный обмен, SERP CTR, богатые фрагменты

Микроформаты и RDFa - это две формы встраивания машиночитаемых метаданных в нашу веб-страницу, которые хорошо известны в сообществе SEO. Микроформаты и RDFa стали пользоваться популярностью с тех пор, как Google представила богатые фрагменты в 2009 году, позволяя оптимизаторам добавлять в списки поисковой выдачи некоторые ссылки:

Микроданные - это еще один такой формат, который является частью спецификации HTML5, но он остается в тени и не получил широкого распространения других.

Совсем недавно был объявление о schema.org от Google, Bing и Yahoo. Наряду с большим количеством волнения это, кажется, вызвало некоторую путаницу со многими SEO-специалистами, считающими, что это новый формат.

Schema.org сам по себе не является форматом или языком, но на самом деле это словарь, который все поисковые машины согласились понять и уважать. Он определяет, какие типы объектов и атрибутов вы можете вставить в метаданные на своих веб-страницах, и гарантирует, что все движки их поймут.

НО, а вот и загвоздка ....

Словарь schema.org доступен только тем, кто говорит в формате микроданных .

Вы не можете использовать его с микроформатами или форматом RDFa в настоящее время. Движки говорят, что со временем это изменится, но в то же время, если вы хотите воспользоваться словарем schema.org, вам нужно использовать микроданные HTML5.

Сам сайт schema.org содержит множество подробностей о как использовать микроданные и разместите его на своих веб-страницах, так что иди туда и начни читать.

К счастью, вы не обязаны выбирать между этими форматами, и Google подтвердил, что все эти форматы на одной веб-странице можно размечать одинаковыми метаданными. Поэтому, даже если у вас есть микроформаты или RDFa, вы все равно можете использовать микроданные с schema.org, и я призываю вас сделать это. Однако я предполагаю, что Google начнет показывать предпочтение метаданным, используя словарь schema.org.

Действия: Включите микроданные вместе с микроформатами и RDFa, которые у вас уже есть. Ищите дальнейшие возможности для использования этих форматов.

Проблема 5: AJAX и URL

Вопросы: точная индексация, социальный обмен, поток сока

Этот хорошо известен и не нравится почти всем SEO, которые когда-либо были. Сайты AJAX действительно хороши для пользователей и значительно улучшают взаимодействие с пользователем .... вплоть до того момента, когда пользователь пытается добавить закладку на страницу, на которой он находится, или отправить кому-то по электронной почте, или поделиться ею через социальные сети, или воспользоваться кнопкой возврата. Или найдите страницу в их истории на следующий день.

AJAX и SEO просто никогда не были предназначены для смешивания, и теперь мы находимся в мире, где люди хотят и того, и другого. Если вам каким-то образом удалось избежать этой проблемы и не знаете о ней, я кратко опишу ее ... AJAX позволяет веб-странице с помощью javascript обновлять содержимое страницы без фактической перезагрузки страницы; будет отправлен новый HTTP-запрос, и новое содержимое, вероятно, заменит некоторое старое содержимое на странице, но, поскольку страница не перезагружается, URL-адрес не изменяется.

Традиционный способ решить эту проблему, чтобы гарантировать, что робот Google может «пауковать» контент, - это просто убедиться, что вызовы AJAX подключены к традиционным тегам <a>, чтобы вы могли добавить ссылку на версию того же контента, который Google подберет (и далеко слишком часто, даже если это не было сделано - это означает, что контент не используется и никогда не будет проиндексирован). Это хорошо для сканирующего аспекта SEO, но в настоящее время мы должны учитывать тот факт, что социальные сети также являются важным аспектом SEO, и если пользователь не может скопировать и вставить правильный URL, то вы уже инвалид.

Итак, как вы уже догадались, HTML5 приходит на помощь, предоставляя некоторые новые функции DOM, которые мы можем использовать с javascript для динамического изменения URL в адресной строке без перезагрузки страницы. Это в форме history.pushState () и связанные с ним методы (replaceState () & popState ()):

var stateObj = {foo: "bar"}; history.pushState (stateObj, "страница 2", "bar.html");

History.pushState () не только позволяет нам обновлять URL-адреса на лету, но и помещает эти новые URL-адреса в историю браузеров, поэтому пользователь может использовать кнопку «Назад», как ожидается, и позже найти страницу в своей истории.

Проверьте это демо демонстрация HTML5 pushState ,

К сожалению, IE пока не поддерживает pushState даже с IE9, и поэтому вы не можете полностью забыть об использовании ужасных обходных путей, которые используют #, но, к счастью, есть готовое решение это делает запасной вариант для IE для вас. Вы не должны допустить, чтобы тот факт, что это не может работать в IE, отодвинет вас от интеграции с другими браузерами; Для некоторых пользователей лучше разрешить эти улучшенные функции, чем вообще никаких.

Действия: В следующий раз, когда вы будете вовлечены в этап разработки сайта AJAX, интегрируйте PushState в решение. Также рассмотрите возможность рефакторинга контента AJAX, который у вас уже есть.

Заворачивать

HTML5 и связанные с ним технологии невероятно интересны для SEO, пользователей и Интернета в целом. Тем не менее, пройдет еще много времени, прежде чем произойдет широкое развертывание многих функций, в основном благодаря тому, что даже последняя версия Internet Explorer даже не пытается поддерживать некоторые функции.

Однако в то же время, безусловно, есть части, которые можно использовать для SEO, и части, которые можно использовать для пользовательских функций, и я призываю всех принять их, где это возможно. Если есть определенные функции, которые вы хотите внедрить для тех пользователей, у которых есть современные браузеры, и в то же время поддерживаются те, которые используют версии, в которых эта функция отсутствует, вы должны проверить этот обширный коллекция кросс-браузерных отступлений HTML5 ,

Где дальше?

Со своей стороны, мне интересно, какие расширения могут предложить сами поисковые системы, когда HTML5 увидит более широкое распространение. Теперь, когда посты Google+ отображаются в поисковой выдаче, как и твиты перед ними, мы наблюдаем переход от «веб-поиска», означающего поиск по веб- страницам , и больше к нему, означающему поиск веб- информации . Может быть, мы скоро увидим день, когда мы сможем использовать rel canonical на
<раздел> и
теги типа <article>, которые действительно позволили бы нам проявить некоторую гибкость, не допуская сомнений относительно дублирующегося контента.

Тогда есть WAI-ARIA отдельная спецификация, касающаяся веб-приложений, но которая учитывается в HTML5 , С его атрибутом role мы делаем первые шаги к тому, чтобы рассказать сканерам о поведении наших веб-страниц, а не только об их содержании.

То, что я знаю, это то, что HTML5 приходит, и каждый SEO должен набрать скорость. Если вы можете начать не только изучать HTML5 сейчас, но уже развернуть его аспекты, тогда вы будете в хорошем положении, когда вся мощь HTML5 попадет в Интернет. Увидимся на другой стороне!

Похожие

Комментарии