Основная проблема копирайтеров – им не всегда везет с грамотными заказчиками-профессионалами. Это значит, что нередко поступают ТЗ с устаревшей SEO-информацией, которая может только навредить текстам. Чтобы этого не происходило, хорошему копирайтеру желательно самому постоянно крутиться в мире SEO: читать про основы продвижения, проходить курсы у классных учителей, общаться на специализированных форумах
. Тогда можно будет оперативно получать информацию о постоянно меняющихся алгоритмах поисковиков и узнавать разные полезные мелочи. Вот возьмем банальщину – тег strong в текстах
. Нужен ли он? Как влияет на оптимизацию? Может ли из-за него сайт попасть под бан? Столько вопросов…
Когда используется тег strong?
Ответы на все вопросы стоит искать в азах HTML, а также в специфических отношениях поисковых систем к анализу статей на сайтах. Итак, пробежимся по азбучным истинам.
Для выделения текста полужирным используется тег b и тег strong. Эти теги парные. Слово, ключевой запрос или пассаж обрамляются при помощи открывающего и закрывающего тега, что в результате дает желаемое выделение текстового блока. Разница между тегами b и strong значительна.
Тег strong относится к тегам логической разметки , то есть не только обеспечивает конструкции полужирное выделение, но и подчеркивает важность помеченного текста. На тег стронг обращают внимание роботы поисковых систем, «считывая» со статей ключи и значимые фразы. Что же касается тега b, то он является тегом физической разметки и отвечает только за полужирное выделение.
Получается, оба эти тега для пользователя абсолютно равнозначны, но для анализирующих сайты роботов – нет. В этом и кроется основная проблема, так как нормальное количество стронгов в текстах могут поднять сайт в ранжировании, а вот излишек – подвести под бан.
Как часто можно использовать тег стронг в тексте?
Чтобы ответить на поставленный выше вопрос, необходимо понять: нужен тег вообще, или он как элемент продвижения он себя уже изжил. Сергей Кокшаров (он же известный всем seo-волшебник devaka) считает, что тег strong использовать не нужно и, более того, он способен даже навредить сайту при чрезмерном или неаккуратном применении. Да, когда-то w3c рекомендовали использовать тег стронг вместо b и повышать позиции выдачи сайта. Но это в прошлом. Сегодня тег strong лучше избегать, заменяя его иными способами полужирного выделения. Но об этом позже.
Такие ответы – гарантия, что сайт не возьмут в каталог Яндекса, а также отметят как потенциальный ресурс для бана.
Однако не стоит хвататься за голову и экстренно удалять все имеющиеся теги с сайта. Это излишне. Умеренное наличие тега strong и использование его только для значимых ключевых запросов не ударит по имиджу интернет-ресурса. Ко всему стоит подходить разумно.
Как использовать тег стронг для текстов сайта?
Теперь рассмотрим непосредственно тег strong для копирайтера. Когда при работе с текстом заказчик просить выделить ключи и значимые моменты полужирным шрифтом, к решению задачи нужно подойти со всей тщательностью. А именно:
Про теги для копирайтеров у меня уже была очень полная и интересная статья с познавательными комментариями и доступной инфографикой. Рекомендую ознакомиться:
Ошибки применения тега стронг
Первая и основная уже названа – переоптимизация за счет чрезмерно частого использования тега логической разметки. Но есть и другие огрехи, которые встречаются при оформлении текстов:
Возникнут проблемы также и в том случае, если безоглядно довериться редакторам Ворда или Вордпресса. Первый обеспечит текст кучей ненужного мусора, второй же везде проставит тег стронг, не вникая в специфику логической и физической разметки и уже тем более не беспокоясь о стилях.
Поэтому лучший вариант самостоятельно отслеживать каждое применение тега, чтобы точно знать, как и каким способом было осуществлено полужирное выделение и не нанесет ли это вред сайту.
Отклик, который пришел на статью практически сразу, уведомил, что все эти исследования и рассуждения бессмысленны. Источник – авторитетный, но раскрывать его смысла не вижу.
«Это информация не просто устаревшая, а лет так на 10 устаревшая. Алгоритмы, плюющие на такие приемы SEO, в том же Яндексе сделали еще в ~2008 году. Современным поисковым машинам вообще по фигу, какими тегами размечен текст».
Вывод: все теги – полная бессмыслица, оформляйте тексты так, как хочется и не обращайте ни на что внимание))))
Теперь точно всё.
Прочитано: 2 070
Всем известно, что теги , , , являются презентационными, а следовательно, исходя из парадигмы «структура, представление, поведение» их использование не приветствуется. Куда более привычными представляются элементы , , . Так было на протяжении долгих лет практики разработки. Однако многое поменялось в семантике этих элементов с приходом HTML5 . Теперь у нас 4 новых тега со смыслом и каша в голове.
vs
Если раньше все учебники по вёрстке пестрили фразами вроде «используйте вместо », и это было наполовину верно, то сегодня такая привычка может сыграть злую семантическую шутку. А дело всё в том, что авторы HTML5 предлагают использовать для выделения отрывков текста с целью обратить внимание читателя, однако не подразумевая усиления значимости текста или интонации. Спецификация приводит примеры использования для разметки ключевых слов в документе
The frobonitor and barbinator components are fried.
И лидов (первый абзац статьи в журналистике)
Six abandoned kittens have found an unexpected new mother figure - a pet rabbit. Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.
Kittens "adopted" by pet rabbit
В свою очередь , как и раньше, означает повышенную значимость своего содержимого.
vs
Отныне содержит текст, выбивающийся из общего окружения, но не имеющий эмоциональной окраски. На мой взгляд, логично использовать там, где типографская традиция предполагает курсив (например, слова на иностранном языке, термины и др.)Per aspera ad Astra — в переводе с латыни изречение означает «Через тернии к звёздам».
же означает эмфатическое ударение, эмоциональный акцент на данном отрывке текста. Это тот случай, когда в речи мы выделяем слова голосом (интонацией, громкостью и др.)
Казнить нельзя, помиловать.
Внимательно читайте договор!
«Текст мелким шрифтом» (информация, являющаяся юридической формальностью, как то лицензия предприятия или юридический адрес и др.) мы, как правило, размечали элементом с классом, задающих в визуальных ПА более мелкий шрифт. Теперь же в нашем арсенале появился новый старый семантический элемент — .Холивар о
Раньше У нас также есть элемент
На ней может быть указано две цены, одна из которых зачёркнута. Её мы размечаем элементом
Новая семантика и старый доктайп
Если по каким-то непонятным причинам вы не можете заменить доктайп на новый и формально верстаете в HTML 4.01 — не отчаивайтесь. Используйте старые новые элементы с новым смыслом и со временем вы скажете себе «спасибо». Возможно, кто-то скажет, что это неправильно, но ведь эти элементы, кромеКакой тег лучше использовать с точки зрения SEO , или , или ? До сих пор ряд оптимизаторов считают, что использовать теги и лучше при форматировании текста на сайте. Тут необходимо прояснить несколько моментов.
1. W3C рекомендует использовать тег strong вместо b , однако это всего-лишь рекомендации, не стандарты. То же самое по поводу тега em .
2. Поисковые системы и пользователи не видят разницы в тегах выделения жирным и наклонными шрифтами.
Для Google этот момент прокомментировал Мэт Катс (в одном из видео).
Недавно поднимался вопрос среди вебмастеров, в котором спросили, что лучше использовать, тег или лучше было бы ; ситуация неясна, так как раньше все использовали , а W3C рекомендует использовать . Не стоит безпокоиться об этом!
Прелесть в том, что, фактически, инженер показал мне кусок кода, где я видел сам, что Google дает тегам bold и strong один и тот же вес (спасибо Паул, я весьма благодарен!). Вдобавок, я проверил, он также нашел код, который показал, что em и i обрабатываются также одинаково.
Теперь вы знаете что делать - верстайте так, как рекомендует W3C, делайте код семантически верным и не безпокойтесь о своих старых тегах, так как Google поддерживает их и обрабатывает абсолютно одинаково.
Более того, вы можете использовать и те и другие теги одновременно, выделяя их разными стилями с помощью CSS . Например, на страницах сайта 5pages.net (к примеру стр. 200 лет Гоголю) успешно используются и те и другие теги.
Для Яндекса официальной информации об этих тегах не найдено, однако, Константином Рощупкиным был проведен эксперимент , в котором он утверждает, что strong и em лучше, чем b и i . С моей точки зрения, эксперимент не доведен до конца, так как стоило дождаться полной индексации, потом поменять теги в документах и посмотреть на результаты после переиндексации. Если бы страницы встали в той же последовательности, что и раньше, тогда можно было бы 100% утверждать приоритеты тегов, однако, на данный момент, по своему опыту, скажу, что разницы в этих тегах совершенно нет и для Яндекса тоже!
Выводы
1. Выделяйте в теги ключи, а если необходимо просто выделить неключевую фразу жирным шрифтом, тогда используйте CSS стиль font-weight:bold; . Например на сайте www.pereezd-master.ru заголовки выделены с помощью strong .
Однако, правильней было бы выделить заголовки соответствующими тегами Hx, а strong использовать для ключевых фраз на странице, делая страницы более релевантными этим ключам.
То же самое касается и тега em , - используйте его для ключевых фраз, а не для выделения текста типа “Добро пожаловать” или “только этой весной у нас скидки” .
2. Не используйте вложенные конструкции одинаковых тегов
ключевое слово
Это не увеличит релевантность страницы вашему ключевому слову, но будет считаться за спам и злые конкуренты обязательно пожалуются представителям поисковых систем на переоптимизацию ваших страниц с целью манипулирования выдачей.
3. Вы можете использовать теги в комбинациях, чтобы придать разный стиль разным участкам текста или элементам дизайна. Например на конкурсной странице линкомаулии (старый конкурс) я для блока голосования использовал короткие (однобуквенные) теги, чтобы при большом количестве повторений эти элементы быстро подгружались (не занимали много места).
Но в тексте, чтобы выделить жирным ключи или нужные фразы, использовался strong .
В то время как многие элементы из HTML4 вошли в HTML5 без существенных изменений, некоторые исторически презентационные элементы обрели новую семантику.
Давайте посмотрим на и и сравним их с семантическими преемниками - и . Что получается:
- - был просто курсивом, а сейчас обозначает дополнительное выделение (например, для иностранных слов, технических терминов) или просто курсивное начертание текста (W3C:Markup , WHATWG);
- - просто выделял текст полужирным, а сейчас обозначает стилистическое усиление текста (например, для ключевых слов) или просто полужирное начертание (W3C:Markup , WHATWG);
- - обозначал выделение, а сейчас обозначает , т.е. слово или фразу, произнесённые иначе (W3C:Markup , WHATWG);
- - обозначал большее усиление экспрессии, а сейчас обозначает высокую важность , что, в общем, почти то же самое (ещё большее усиление или важность сейчас определяется уровнем вложенности) (W3C:Markup , WHATWG).
Новая семантика презентационных элементов
В HTML4 элементы и были презентационными . Они по-прежнему могут использоваться там, где этого требует типографская традиция. Тем не менее, теперь они обрели семантику и могут быть оформлены при помощи CSS, что делает их не только презентационными - элемент , например, совсем не обязательно должен быть полужирным. Поэтому для обозначения смысловой нагрузки элементов рекомендуется использовать классы ; это позволит легко изменить внешний вид элементов в дальнейшем.
Элемент
Обычно обозначаются курсивом: иностранные слова (с атрибутом lang), таксономия и технические термины, названия кораблей, пометки в сценариях, нотное письмо, вставки размышлений или рукописного текста. Пример:
- Декард: Шевелись! Прочь с дороги!
- Декард стреляет и убивает Зору в драматической замедленной сцене.
- Декард: В отчёте это будет выглядеть рутинным устранением двойника, что, однако, совсем не поможет мне чувствовать себя лучше после выстрела женщине в спину. И снова. Жалость где-то внутри. К ней, к Рэйчел.
- Декард: Декард. Б-263-54.
В указанном примере элемент используется для обозначения внутреннего диалога персонажа, произнесённого в другом тоне.
Прошлой ночью мы ели унаги, абури-заке и тако, а все торо суши кончились.
Элемент используется в этом примере для обозначения «идиоматических фраз из другого языка» (японских слов). Полный список значений атрибута lang вы можете найти в официальном списке IANA ; или же вы можете воспользоваться замечательным сервисом по поиску языковых обозначений от Ричарда Исиды из W3C .
Nanotyrannus («карликовый тиран») принадлежит к семейству тиранозавров, и, возможно, является юной особью тиранозавра. Его череп, ныне находящийся в КМЕ (Кливлендском Музее естествознания), был найден Чарльзом Гилмором в 1942-м году, описан им же в 1946-м. Гилмор обозначил его как представителя нового вида Gorgosaurus lancensis.
Элементом в данном примере обозначается таксономическая единица.
Используйте только в том случае, когда не удаётся найти ничего более подходящего: для фрагментов с экспрессивно-эмоциональным выделением, для смысловой важности, для имён при цитировании или в библиографии, для определений и для математических переменных. Однако для придания курсивного начертания таким блокам текста, как ремарки, стихотворные строфы и цитаты, используйте CSS . Не забывайте использовать атрибут class для задания функциональной роли элемента - это позволит с легкостью переопределить стили в дальнейшем. К примеру, вы можете сделать выборку по атрибуту lang в CSS, используя селектор вида .
Элемент
Элемент представляет собой фрагмент текста, который выделяется из окружающего его контекста, но не передает никакого особого значения. Это, например, ключевые слова в выдержках, названия продуктов в обзорах или другие части текста, которые по правилам типографики обычно выделяются полужирным начертанием.
Для текста, обрамленного в (который должен просто отличаться от основного), нет необходимости использовать font-style:bold - можно обратиться к другим стилям: скруглённому фону, большему размеру шрифта, другому цвет или особому форматированию типа капители. К примеру, в , используется для указания на того, кто говорит или рассказывает.
Текст, который набран полужирным по типографским соглашениям (а совсем не потому, что он более важен) может использоваться для выделения имён в голливудских сплетнях или в качестве вводного текста для сложных или оформленных в классическом стиле текстов:
Было около часу, когда Шерлок Холмс вернулся с прогулки. Он держал в руках листок голубой бумаги, исчирканный заметками и рисунками.
В данном примере буквица соединяется с текстом при помощи . Для ее создания используется псевдо-элемент:first-letter . В этом случае открывающая фраза выделена полужирным только из оформительских соображений, но если бы этот фрагмент был семантически важен, то или другой подобный элемент подошли бы лучше.
Просматривая свои записи о приключениях Шерлока Холмса, - а таких записей, которые я вел на протяжении последних восьми лет, у меня больше семидесяти, - я нахожу в них немало трагических случаев, есть среди них и забавные, есть и причудливые, но нет ни одного заурядного.
Несмотря на то, что мы можем использовать для традиционного типографического оформления вроде выделения капителью первого слова, фразы или предложения, псевдо-элемент:first-line больше подходит для таких целей. Например, все первые абзацы HTML5Doctor.com оформлены при помощи элегантного:first-of-type .
Используйте только тогда, когда нет ничего более подходящего, например: для текста с семантической важностью, для акцентированного текста (с «логическим ударением»), элементы от до
для заголовков и для подсвеченного или выделенного текста. Для облака тегов используйте список с соответствующими классами. Для воссоздания традиционных типографских приёмов используйте CSS-селекторы псевдо-элементов : :first-line и:first-letter , каждый для своего случая. И ещё раз, не забывайте использовать атрибут class для обозначения того, зачем был использован каждый конкретный элемент - это упростит повторное изменение элемента в дальнейшем.
...и для сравнения: элементы и
Хотя и остались практически такими же, как были, в их значении всё же произошли некоторые изменения. В HTML4 они означали «акцент» и «сильный акцент». Сейчас их значение несколько видоизменилось: обозначает экспрессивно-эмоциональное выделение (т.е. нечто, произнесённое иначе), а обозначает важность.
Элемент
Элемент обозначает часть текста с эмфатическим ударением.
Термин «ударение» имеет отношение к лингвистике. Ударение изменяет эмоциональную окраску слова, что, в свою очередь, может изменить смысл предложения. Например, фраза «Быстро позови доктора! » акцентирует важность того, чтобы позвали именно доктора - возможно, в ответ на чей-то вопрос «Мне позвать сестру?» Напротив, фраза «Быстро позови доктора!» акцентирует важность немедленного вызова.
Используйте в других случаях для обозначения важности и для курсивного начертания без эмоциональной окраски. Уровень вложенности обозначает силу акцентирования.
Элемент
Элемент обозначает часть текста с высокой важностью.
Добавить, в общем-то, и нечего - элемент хорошо всем нам знаком. Используйте вложенные элементы для обозначения относительной важности, для эмафтического ударения и для стилистически выделенных или просто полужирных фрагментов текста без подчёкнутой важности.
Резюмируя...
И последнее: все эти элементы (как и большинство HTML5-элементов) намеренно были сделаны медиа-независимыми , т.е. их семантика теперь не привязана к отображению в визуальных браузерах.
Что же мы имеем? Две презентационных дворняжки из HTML4 превратились в полноценные, насыщенные смыслом HTML5-элементы, готовые снова вернуться в ваш код. Сможете ли вы устоять перед их блестящими, полными семантики щенячьими глазками? Дайте нам знать!
Перевод оригинальной статьи «The i, b, em, & strong elements » Оли Стадхольма (Oli Studholme), опубликованной на сайте
Как правильно — или , или ? Если говорить кратко — с точки зрения визуального отображения тегов в браузере, корректными будут оба варианта. Однако с точки зрения около-браузерной софистики — различий между тегами просто масса.
W3C, семантика, и благие цели
Сэр Тим Бернерс-Ли. Именно этому человеку мы обязаны в части облика Всемирной Паутины, интернета, таким, каким мы его знаем. Кстати, к названию WWW (WorldWideWeb — Всемирная Паутина) он тоже причастен.
Сэр Бернерс-Ли и самый первый в мире сайт. Wikipedia.
В 1994 году им была основана W3C — консорциум , по сей день являющийся главным и единственным институтом стандартизации представления данных в сети Интернет. В мире онлайна принято считаться с мнением W3C и все популярные браузеры сотрудничают с организацией, и следуют ее рекомендациям.
Теги: физические и семантические
Согласно предписаниям W3C, теги принято делить на теги физического и логического (семантического) уровня форматирования.
Теги физического форматирования были придуманы Бернерсом-Ли еще в далёком 1991 году.
Теги логического форматирования появились в середине 90-х, уже под эгидой Консорциума Всемирной Паутины (W3C) в спецификации HTML 2.0
.
Физические призваны просто отображать форматирование текста так как было задумано автором. Логические же, как и следует из названия, обеспечивают и определенную логику обработки контента заключенного в них.
Зачем нужны логические теги?
Сама идея использования тегов, которые будут «обдуманно» применяться к различному контенту уже несет в себе немалые возможности.
Например, обозначьте тег
, и браузер, и яндекс поймут, что тут идет пример кода, а
будет означать, что используется аббревиатура.
Теги логического форматирования содержат в себе меньший объем текста и используются избирательно для единичных слов или фразы.
Отличия b от strong
При применении обоих тегов, мы будем наблюдать в браузере один и тот же эффект, так в чем же разница?
Разница в том что тег
является тегом логической разметки, а
просто делает текст жирным, не прибавляя к этому никакой смысловой нагрузки.
Зачем? В идеале W3C хотели чтобы браузеры отображали важный участок текста иначе. На деле же оказалось, что эффект можно наблюдать только в речевых браузерах для слабовидящих, где слова выделенные strong-ом, действительно подчеркиваются интонацией.
Отличия i от em
С тегами для придания шрифту начертания курсивом, ситуация весьма схожая. Использование тега , также как и использование тега дадут одинаковый эффект.
Комментарии W3C советуют использовать тег для выделения курсивом. Ни о чем конкретном при этом не говорится, мы вольны выделять хоть имя автора, указанное в тексте, хоть просто важное по смыслу понятие или даже целое предложение. В общем, всё как в печатной литературе.
С тегом
всё как и со строногом — он логический. Лично меня очень забавляет официальное описание тега на сайте W3C.
Офсайт консорциума пишет что тег
предназначен для выделения «emphatic stress» текста.
Эмпатический, мать его, стресс. Ну я согласен, что на русский это можно перевести не так грубо, но яснее ситуация не становится. Есть ощущение, что консорциум и сам не знает, для чего добавил элемент.
На сегодняшний день W3C советует использовать CSS вместо
, а
как тег выделения курсивом.
Влияние strong и b на оптимизацию
Есть пара мифов о том, как использование тегов логической разметки и влияет на позиции.
Первый убеждает нас в том, что использование логических тегов вместо привычных
и
позволит сайту подняться в выдаче.
Второй говорит о том, что теги выделения нельзя использовать в текста больше определенного количества раз.
По факту помнится, кто то даже проводил эксперимент, который конечно так и не дал ответ на вопрос на 100%.
На позицию сайта в поисковой системе влияет множество нюансов, ничего нельзя сказать однозначно.
Кроме того, есть случаи, когда использование верстки именно физическими тегами необходимо.
Я часто использую физическую разметку в верстке шаблонов писем. Субъективно могу сказать что такие теги вызывают меньше ошибок в онлайн версиях почтовиков.
Мнение Google и Яндекс
Несколько лет назад, в ходе трансляции на Youtube, Google, в лице своего представителя (Matt Cutts), ясно дали ответ на этот вопрос. Ответ: нам без разницы какие теги вы используете (b/i или strong/em). Делайте хорошие сайты для людей, а потом уже думайте об таких мелочах.
Яндекс же не дает никаких комментариев, но везде советует использовать семантические теги по максимуму.
Так или иначе, Яндекс всегда «притормаживает» с копированием стандартов у гугл и/или их переработкой, так что в этой части можно и ограничится мнением американского собрата.
Выводы
В интернете полно советчиков, и еще больше людей, считающих, что их мнение единственно правильное.
Я не буду придерживаться какой то конкретной версии, я лишь скажу очевидное — тег короче тега
.
Если вы пишете код вручную, если вы вносите быстрые правки прямо через панель CMS, гораздо удобнее 5 раз прописать именно тег .
Какая разница в конечном итоге, ведь отображение то одинаковое.
