SEO для разработчиков: преимущества семантики HTML5 + микроданные схемы

Семантические элементы HTML5:
Как использование семантических элементов HTML5 поможет в SEO?
Думаешь, никто не использует семантические элементы? Подумай еще раз.
Семантическая схема микроданных
Последние мысли

Это первый из серии блогов A-Team, посвященных лучшим практикам SEO.

Когда HTML5 вышел на сцену в период 2011-2014 годов, сообщество веб-разработчиков вызвало некоторый протест, что он «чрезмерно сложен» и его части не нужны. В частности, разработчики ломали голову над так называемыми семантическими элементами HTML5 - в конце концов, что не так с старой доброй конструкцией <div id = «xxx»>? Перенесемся на несколько лет вперед, и сегодня у нас есть все виды законного использования семантических элементов HTML5, и разработчикам будет разумно начать применять их во всех новых проектах в будущем.

Семантические элементы HTML5:

Контент < article >, помеченный как «синдицированный», должен быть «полным» сам по себе, поскольку он может быть произвольно собран и представлен в фиде < aside >, то есть в «боковой панели», просто для поддержки основного контента, периферийного по отношению к контенту. Примечание: теперь мы можем использовать H1 внутри, без последствий для SEO. < details > представляет виджет раскрытия, из которого пользователь может получить дополнительную информацию или контролировать < figcaption > заголовок для рисунка (см. ниже). < figure > контент, помеченный как «синдицированный» сам по себе (например, фотографии, иллюстрации, видео и т. д.). .) < footer > содержимое нижнего колонтитула веб-страницы < header > содержимое верхнего колонтитула веб-страницы < main > основное содержимое веб-страницы, за исключением глобальных элементов, таких как header, footer и nav < mark >. Автор хочет, чтобы вы сосредоточились на этом контенте, не подчеркивая его. Чтобы различать <em> или <strong> < nav > навигационных ссылок веб-страницы < section >, группирование связанного содержимого < summary > определяет видимый заголовок для элемента <details>. Его можно щелкнуть, чтобы просмотреть / скрыть подробности < time > оборачивает время с помощью машиночитаемых свойств времени < hgroup > группы тегов заголовка

Как использование семантических элементов HTML5 поможет в SEO?

Несколькими способами:

это помогает поисковым системам и машинным читателям идентифицировать ключевые части страницы. В частности, поисковая система Hummingbird от Google (в отличие от поисковых систем Google Panda или Google Penguin) предназначена для того, чтобы сосредоточиться на разговорном значении контента на вашей веб-странице. Использование семантических тегов HTML5 улучшит «понимание» Hummingbird ваших веб-страниц.
Кроме того, семантические элементы HTML5 помогут проценту посетителей вашего сайта дольше взаимодействовать с вашей страницей (например, тем, кто использует программы чтения с экрана). И чем дольше посетители сайта остаются на ваших страницах, тем выше рейтинг вашей страницы.
И, наконец, семантические элементы HTML, такие как <article> и <figure>, помогают объединить / перераспределить ваш контент по различным каналам. Поощряя синдикацию, вы получаете больше «внешних» доверенных ссылок на ваш сайт. И более надежные ссылки на вашу веб-страницу (независимо от того, откуда они берутся) являются основным фактором рейтинга страницы.

Думаешь, никто не использует семантические элементы? Подумай еще раз.

Facebook теперь продвигает функцию под названием «Мгновенные статьи» (см .: https://developers.facebook.com/docs/instant-articles/reference ), который, по их мнению, станет новым каналом для издателей для создания быстрых интерактивных статей, которые будут отображаться в мобильном приложении Facebook. Facebook явно использует HTML5 здесь. Создать мгновенную статью очень просто: просто отформатируйте свои веб-страницы в соответствии с их рекомендациями HTML5, и они позволят вам публиковать / продвигать такие интерактивные статьи, которые оптимально отвечают их мобильному каналу. Короче говоря, это идеальный способ перепрофилирования существующего веб-контента. И еще раз более надежные ссылки на ваш сайт (независимо от того, откуда они берутся) увеличивают рейтинг вашей страницы.

Ниже приведен лишь краткий пример того, как выглядит форматирование. Обратите внимание на использование элемента HTML5 <article>, который здесь явно используется для синдикации.

<! doctype html> <html lang = "en" prefix = "op: http://media.facebook.com/op#"> <head> <meta charset = "utf-8"> <link rel = "canonical "href =" http://example.com/article.html "> <meta property =" op: markup_version "content =" v1.0 "> </ head> <body> <article> <header> <! - - Заголовок и субтитры, показанные в вашей мгновенной статье -> <h1> Заголовок статьи </ h1> <h2> Подзаголовок статьи </ h2> <! - Дата и время, когда ваша статья была первоначально опубликована -> <время class = "op-опубликовано" datetime = "2014-11-11T04: 44: 16Z"> 11 ноября, 16:44 </ time> <! - Дата и время последнего обновления вашей статьи -> < time class = "op -ified" dateTime = "2014-12-11T04: 44: 16Z"> 11 декабря, 16:44 </ time> <! - Авторы вашей статьи -> <адрес> <a rel = "facebook" href = "http://facebook.com/brandon.diamond"> Брэндон Даймонд </a> Брэндон - заядлый охотник на зомби. </ address> <address> <a> TR Vishwanath </a> Виш - ученый и джентльмен. </ address> <! - Изображение обложки, показанное внутри вашей статьи -> <figure> <img src = "http://mydomain.com/path/to/img.jpg" /> <figcaption> Это изображение Удивительно </ figcaption> </ figure> <! - Кикер для вашей статьи -> <h3 class = "op-kicker"> Это кикер </ h3> </ header> <! - Тело статьи отправляется здесь -> <! - Основной текст вашей статьи -> <p> Содержание статьи </ p> <! - Видео в вашей статье -> <figure> <video> <source src = "http: //mydomain.com/path/to/video.mp4 "type =" video / mp4 "/> </ video> </ figure> <! - Объявление в вашей статье -> <figure class =" op- ad "> <iframe src =" https://www.adserver.com/ss;adtype=banner320x50 "height =" 60 "width =" 320 "> </ iframe> </ figure> <! - код аналитики для Ваша статья -> <figure class = "op-tracker"> <iframe src = "" hidden> </ iframe> </ figure> <footer> <! - Кредиты для вашей статьи -> <aside> Благодарности < / aside> <! - Сведения об авторских правах на вашу статью -> <small> Юридические заметки </ small> </ footer> </ article> </ body> </ html>

Семантическая схема микроданных

Пока разработчики спорили о преимуществах и недостатках HTML5, под радаром и без особой фанфары, www.schema.org (инициатива, финансируемая Google, Microsoft, Yahoo и Yandex) опубликовала множество документированных схем для почти все мыслимые типы контента: продукты, события, организации, местные предприятия, обзоры фильмов и книг и т. д. (см. www.schema.org ). Практически за ночь это стало стандартом де-факто для разметки контента.

Зачем вам нужно форматировать ваш веб-контент с помощью Schema Microdata? Простой случай связан с тем, как Google форматирует вашу страницу, когда она отображается на странице результатов поисковой системы (SERP) - так называемые «богатые фрагменты» (см. Изображение ниже). Что было продемонстрировано довольно наглядно, так это то, что те веб-страницы, которые «отформатированы» с использованием определенных атрибутов микроданных схемы, получают больше кликов через CTR, когда отображаются в результатах поиска по сравнению с конкурентами, в которых отсутствует такое форматирование. Излишне говорить, что высокий CTR является еще одним основным фактором рейтинга страницы.

Основные атрибуты, используемые при форматировании «расширенных фрагментов», зависят от типа схемы - например: список фильмов с «расширенным фрагментом» будет отображать обзоры, местоположения и расписание сеансов. Продукт «богатый фрагмент» будет отображать отзывы, цены и доступность. И так далее.

Ниже приведен простой пример использования микроданных схемы при форматировании содержимого HTML:

<body>… <article> <div itemscope itemtype = "http://schema.org/Product"> <h1 itemprop = "name"> Бальзамический уксус премиум темного шоколада </ h1> <p itemprop = "description"> Темный Шоколадный бальзамический уксус из Модены, Италия, богат, густ и насыщен тремя разными конфетами. </ P> <p itemscope itemtype = "http://schema.org/AggregateRating"> Средняя оценка: <img src = " 4stars.png "alt =" 4 звезды из 5 "> (<span itemprop =" ratingCount "> 120 </ span> голосов) <meta itemprop =" ratingValue "content =" 4 "/> <meta itemprop =" bestRating " content = "5" /> </ p> </ div> </ article>… </ body>

Следует отметить, что вместо форматирования в стиле микроданных схемы вы можете вместо этого использовать форматирование RDFa Lite (оба могут использовать одни и те же схемы www.schema.org). Google утверждает, что они поддерживают оба стиля форматирования. Увидеть: https://www.w3.org/TR/xhtml-rdfa-primer/

И в случае, если это было не совсем понятно: вы можете и должны смешивать и семантику HTML5, и микроданные схемы вместе на одной веб-странице!

Кроме того, вот ссылка на инструмент Помощник по разметке структурированных данных Google, который поможет вам увидеть, как он работает с вашим текущим контентом, доступ к которому вы можете получить здесь: https://www.google.com/webmasters/markup-helper/

Последние мысли

Предполагая, что наши веб-проекты используют MVC или какой-либо другой вариант, остается вопрос, как лучше всего отобразить контент на уровне представления. Мне показалось бы, что в идеале обслуживающее приложение (например, контроллер) будет выводить полезную нагрузку, которая обеспечит недвусмысленные подсказки в полезной нагрузке ответа относительно того, какая конкретная схема содержимого отображается. Сделанный таким образом, интерфейсной среде не нужно ничего делать, кроме как конвертировать подсказки в HTML5 и / или микроданные схемы, не требуя много сложных поисков.

Учитывая это, мне кажется, что у нас есть возможность здесь воспроизвести это желательное для SEO поведение контента, приняв www.schema.org для всего известного контента, находящегося под нашим контролем. Некоторыми очевидными примерами могут служить целевые страницы Eloqua и электронные письма (например, www.schema.org/event, www.schema.org/InviteAction, www.schema.org/RsvpAction, schema.org/EmailMessage) или коммерческие страницы продукта (например, www .schema.org / product, www.schema.org/offer, www.schema.org/Review) или Sites Cloud Service Marketing, FAQ, рецепт или локальные бизнес-страницы (например, schema.org/NewsArticle, schema.org/Question , schema.org/Recipe, schema.org/LocalBusiness). Излишне говорить, что в нашей экосистеме Red Stack есть много других возможностей, которые ждут, чтобы мы добавили ценность для наших SEO-ориентированных клиентов (то есть почти всех наших клиентов).

Еще не знаете, что значит SEO?
Еще не знаете, что значит SEO? Нет проблем, прочитав эту статью, вы узнаете больше об оптимизации веб-сайтов поисковых систем, чем 90% ваших конкурентов. Что значит SEO? SEO или «Поисковая оптимизация» - это маркетинговая онлайн-стратегия, которая пытается улучшить видимость поисковых систем для веб-ресурса, будь то веб-страница, видео и т. д. Когда я говорю об увеличении видимости, я имею в виду первую страницу обычных

Тем не менее, нам, как специалистам по SEO, хотелось бы этого: как, например, сравнивается органическая эффективность сайта с тем, что было год назад?
Тем не менее, нам, как специалистам по SEO, хотелось бы этого: как, например, сравнивается органическая эффективность сайта с тем, что было год назад? Это ограничение можно решить только путем загрузки и сохранения данных не чаще одного раза в 90 дней. Поскольку мы можем легко получить все данные с помощью надстройки Edge Analytics для Excel, это также идеальное место для хранения всех данных (в том числе до этих 90 дней). Поэтому панель инструментов SEO, которую я описываю в этих статьях,

Теперь, когда они не будут снабжены ярлыками «SEO», как вы скажете, какие темы оптимизированы для SEO?
Теперь, когда они не будут снабжены ярлыками «SEO», как вы скажете, какие темы оптимизированы для SEO? Проверьте пункты ниже: Текст: Визуальные темы отлично подходят, особенно для сайтов художников и фотографов. Тем не менее, тот факт, что они оставляют мало места для текста, может работать против них, когда дело доходит до рейтинга в поисковых системах. Сканеры не предназначены для самостоятельного анализа изображений, они работают только с текстом. Итак,

Представьте себе на мгновение, что вы создаете сайт и публикуете его, никому не сообщая, нигде не ссылаясь на него и не рекламируя его: как вы думаете генерировать трафик ?
Теперь, когда они не будут снабжены ярлыками «SEO», как вы скажете, какие темы оптимизированы для SEO? Проверьте пункты ниже: Текст: Визуальные темы отлично подходят, особенно для сайтов художников и фотографов. Тем не менее, тот факт, что они оставляют мало места для текста, может работать против них, когда дело доходит до рейтинга в поисковых системах. Сканеры не предназначены для самостоятельного анализа изображений, они работают только с текстом. Итак,

Удастся ли мне с этим, я не могу сейчас сказать - я не знаю ни одного SEO или интернет-маркетолога из этого региона, о человек, о человек, разве не жаль?
Удастся ли мне с этим, я не могу сейчас сказать - я не знаю ни одного SEO или интернет-маркетолога из этого региона, о человек, о человек, разве не жаль? Но как много раз умные люди говорили: «Ничего хорошего, если ты не сделаешь это». и это именно то, что я делаю сейчас. Я начинаю попытку создать такую социальную встречу. В то же время я хотел бы сообщить вам о текущем состоянии, и я сделаю это здесь. Как начать SEO / онлайн-маркетинг Stammtisch? Сначала я пишу эту небольшую

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

Все еще не уверены, что вы должны сделать SEO приоритетом?
Все еще не уверены, что вы должны сделать SEO приоритетом? Здесь есть все, что вам нужно знать о том, как работает SEO, почему он генерирует потенциальных клиентов, и как заставить поисковую оптимизацию окупаться для вашего малого бизнеса. 1. Что такое SEO? SEO расшифровывается как поисковая оптимизация. Поисковая оптимизация является одной из основных тактик цифрового маркетинга, которую используют компании для привлечения клиентов в Интернете.

Теперь, когда вы уже знаете, как научиться SEO, как насчет того, чтобы охватить эту специализацию цифрового маркетинга и сделать карьеру в этой области настолько перспективной?
Теперь, когда вы уже знаете, как научиться SEO, как насчет того, чтобы охватить эту специализацию цифрового маркетинга и сделать карьеру в этой области настолько перспективной? Будьте в курсе, подписав наш бюллетень , Альберто Валле, директор и инструктор Академии маркетинга Как научиться SEO 5 (100%) 25 голосов

Время от времени я хотел бы поблагодарить это супер существо еще раз от друзей разработчиков 🙂 ğağrı Bey, вы стали ботом?
Время от времени я хотел бы поблагодарить это супер существо еще раз от друзей разработчиков 🙂 ğağrı Bey, вы стали ботом? Için 2. Выявление внутренней ссылочной структуры сайта Screaming Frog имеет 2 различных режима сканирования: Spider и List . Он начинает сканирование сайта по начальному URL, который вы предоставляете Spider . Прекратите останавливаться (ограничение глубины ссылки), посмотрите, куда вы смотрите

Итак, как вы разрабатываете стратегию, не имея представления о том, как Google может использовать ее в будущем?
Итак, как вы разрабатываете стратегию, не имея представления о том, как Google может использовать ее в будущем? Правило большого пальца, которое всегда предоставляла поисковая система, - это создавать ссылки естественным образом. Но мы все очень хорошо знаем, что идти по этому пути чрезвычайно трудно; особенно когда конкуренция идет очень хорошо с гораздо более сомнительной тактикой. Это не ошибка вашей SEO команды Большинство стартапов справляются со своей стратегией

8. Как вы можете связаться с SEO консультантом и как часто вы будете общаться с ним?
8. Как вы можете связаться с SEO консультантом и как часто вы будете общаться с ним? 9. Какую сумму нужно заплатить за SEO оптимизацию и ежемесячное обслуживание и каковы условия? Имейте в виду, что каждый сайт требует разных рабочих нагрузок и использования разных ресурсов. Есть много факторов, которые влияют на окончательную цену, и именно поэтому большинство SEO-оптимизаторов создают индивидуальные ставки на основе анализа текущего статуса сайта. Фиксированная

Думаешь, никто не использует семантические элементы?
В частности, разработчики ломали голову над так называемыми семантическими элементами HTML5 - в конце концов, что не так с старой доброй конструкцией <div id = «xxx»>?
Думаешь, никто не использует семантические элементы?
Зачем вам нужно форматировать ваш веб-контент с помощью Schema Microdata?
R§S, RẑS, R ° RêRẑRμ SEO?
Почему сайт вышел?
Вы ресторан одержимы?
Но достаточно ли этого?
Как выбрать SEO агентство?
Еще не знаете, что значит SEO?

Категории

Новости