Что такое заголовок ссылки?

Немногие знакомы с понятием «заголовок ссылки», но будьте уверены, что каждый из вас не раз встречался с ним на просторах Интернета. Поэтому достаточно сказать, что заголовок ссылки есть не что иное, как подсказка, всплывающая после того, как вы наводите курсор мышки на определённую ссылку.

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

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

Однако стоит остерегаться бессмысленных слов и, соответственно, использовать для заголовков более конкретные, информативные фразы, объясняющие предельно ясно, что скрывается за переходом по данной ссылке.

Предлагаем вам совет профессионалов…

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

Сайт сделанные на движке Джамла смотрятся очень хорошо, а много красивых шаблонов joomla templates можно найти здесь. Шаблоны разбиты на разные тематики.

Источник

Ссылка в заголовке или заголовок в ссылке?

Эрик Рейнж (Eric Range) вынес на обсуждение, затрагиваемый данным постом вопрос. Что лучше использовать в качестве обертки, заголовок или ссылку при совместном применении соответствующих элементов? С точки зрения HTML5 оба варианта абсолютно вали́дные.

Ссылка в заголовке:

Ten Ways to Have Yourself a Merry Little Christmas

Заголовок в ссылке:

Ten Ways to Have Yourself a Merry Little Christmas

Какой из них выберете вы? Я бы сказал, что все зависит от ситуации.

Кликабельная область.

По умолчанию элемент ссылки является внутристрочным (inline), а заголовок блочным (block). Таким образом, если не изменять эти исходные установки с помощью CSS, то кликабельная область для h1 > a будет соответствовать той, которая выделена светло красным цветом:

И наоборот, вариант a > h1 делает кликабельной всю область блочного элемента заголовка.

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

Вы, вероятно, думаете: «Увеличенная кликабельная область? Но это же хорошо!», что, в принципе, разумно, за исключением следующих моментов:

Неудобства при выделении текста.

Насколько это важно — решать вам. Но лично я всегда предпочитаю выделять текст, начиная с нижнего правого угла, и поэтому меня просто бесит вот такое поведение блочных ссылок:

Странности компоновки.

* Здесь не все так очевидно и поэтому давайте немного проясним ситуацию. Дело в том, что согласно стандарту CSS 2.1 при включении в элемент строчного уровня блочного элемента, строчный элемент-обертка разбивается на три внутристрочных блока, один из которых является внутренним «реальным» блоком (в нашем случае заголовком h1 ), а другие два являются анонимными внутристрочными блоками, образуемыми в данном случае браузером непосредственно перед и после «реального» внутристрочного блока. Такое стандартное поведение браузера остается незаметным до тех пор, пока отображаемая область внешнего элемента ссылки определяется исключительно его содержимым, т.е. текстом. Текст есть только в «реальном» внутристрочном блоке, а анонимные по причине отсутствия контента установлены в нулевую высоту и ширину и поэтому невидимы. Как только мы явным образом влияем на размерность анонимных внутристрочных блоков, устанавливая отличную от нуля границу или внутренний отступ для элемента ссылки, мы делаем их видимыми. Убедитесь в этом сами.

Два заголовка, одна ссылка.

Если у вас когда-либо возникала необходимость в создании заголовка и подзаголовка, направляющих посетителя в соответствующее место (и вы не хотите при этом делать подзаголовок в виде дочернего строчного элемента типа span или ему подобных), тогда ссылка-обертка была бы вполне оправданным выбором.

Cheese is favorite holiday gift

From a one-person survey held in central Wisconsin

Вопросы доступности.

Не знаю, я не уверен. А есть ли они вообще в данном случае?

Кто же победил?

Что, все еще есть над чем поразмышлять?

Тема наделения всех элементов параметрами href=”” и target=”” обсуждается уже давно. Вопрос упирается главным образом в семантику, а это объясняет то, почему поведение элементов до сих пор не стандартизировано. Кроме того есть мнение, что это приведет к путанице при использовании клавиатуры в качестве основного средства передвижения по сайту, так как все станет фокусируемым, что в свою очередь приведет к возникновению проблем доступности и юзабилити. С этим трудно не согласиться.

Неплохим решением был бы вот такой вариант, если бы не JavaScript:

Вообще-то, HTML5 не может допускать включение блоков в строчные элементы априори, поскольку в этом стандарте термины «блочный» и «строчный» элемент вообще отсутствуют. Теперь эти термины используются исключительно в CSS спецификации, которая, как раз таки и не позволяет этого делать. Вложенность HTML элементов и вложенность CSS боксов — теперь это разные, имеющие отдельную логику вещи. Однако в обоих случаях следует придерживаться правил. Если вам действительно не обойтись без включения блока в строчный элемент, то для того, чтобы избежать описанных выше проблем компоновки, вам необходимо для всех элементов содержащих блоки использовать декларацию display:block (или inline-block ), независимо от типа HTML элемента, тем более, что HTML5 не запрещает подобную вложенность.

А вопросы доступности у этой темы действительно есть и они неплохо описаны Роджером Йохансоном и Стивом Фолкнером

Еще несколько доводов за и против рассматриваемых здесь вариантов.

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

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

— в мобильных устройствах (по крайней мере, в iOS) выделение находящегося в ссылке заголовка приводит к выбору ссылки, а не текста самого заголовка.

— возникают сложности в случае необходимости стилизации находящихся внутри ссылки элементов в связке с событиями hover, focus и active.

Источник

Заголовки h1-h6: детальный обзор, примеры

Что такое заголовок, знает абсолютно каждый. Это емкое, привлекательное название, в котором при всей лаконичности заключается суть целой публикации, статьи и т. д. Но заголовок на странице сайта – это не совсем то, что мы привыкли видеть в газетах, журналах или книгах. Почему? Попробуем разобраться.

Что такое H1?

H1 – это главный заголовок в статье, заголовок первого уровня. Каждая страница в интернете имеет свою структуру. Заголовки H1-H6 как раз и позволяют правильно структурировать материалы, причем как для поисковиков, так и для пользователей. H1 – главный заголовок, H2-H6 второстепенные, вложенные подзаголовки. В коде заголовки выглядят так:

сам заголовок

Заголовки в Интернете служат не только для обозначения структуры и сути описываемого, но и для оптимизации сайта. Чтобы вывести сайт на видимые позиции в выдаче, пишите правильные заголовки, соблюдая 2 простых условия:

Условие 1. Ключевые слова в заголовках

Для этого у вас должно быть разработано качественное семантическое ядро – отнеситесь к нему крайне ответственно и помните, что один и тот же ключ вставлять на все страницы сайта нельзя. Релевантность всему голова: нужно соответствовать ожиданиям клиентов и поисковиков. В заголовках главной страницы можно брать среднечастотные и высокочастотные запросы. А на товарных страницах (карточка товара) вполне допустимы заголовки с низкочастотными ключами. Ключ должен вести на конкретную позицию или единицу, быть точным, а не обобщенным.

Размещая ключевые слова, делайте это аккуратно: не злоупотребляйте ключами и не составляйте спамные заголовки (например, купить квартиру Москва, купить сумка холодильник, купить мотоцикл Красноярск цена, моя твоя не понимать и т. д.). Сохраняйте красоту фразы и ее логичность. В великом и могучем русском языке слова спрягаются и склоняются, а роботы сейчас понимают смыл, разбираются в языке не хуже нас с вами! И не частите – спам очевиден всем, а так и до Баден-Бадена рукой подать, ну и не забывайте про Панду от Google.

Пример, где количество ключей зашкаливает, перебор.

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

Ну и надеюсь, что никому и никогда не придет в голову затолкать в заголовок все ключевые слова, предназначенные для одной страницы. Ничего хорошего явно не получится. =)

Помните, что текст создается не только для поисковых машин, но и для людей. И вообще роботам нравятся человечные, простые и понятные тексты. Если в заголовке ключевые слова органично встанут в начало предложения, то сработает чуточку лучше. Т.е. с точки зрения оптимизации страницы под ключевое слово «гостиницы Москвы» лучше отработает заголовок «Гостиницы Москвы – официальные сайты, обзоры, фото», чем «Обзоры, фото и официальные сайты гостиниц Москвы».

Условие 2. Теги

Размещая тексты на сайте, не забудьте правильно расставить теги. Теги для заголовков текста определяются следующим HTML-кодом:

. По нашим наблюдениям, вполне хватает двух тегов —

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

Поисковики также учитывают размерность и значимость тегов

. При верстке стоит обратить внимание, чтобы заголовки визуально выделялись из общего текста.

Ссылки в заголовках использовать не стоит, особенно в

: так вы уведете человека со страницы на другой материал или, если ссылаетесь на эту же страницу, создаете циклическую ссылку, которая ничего хорошего не дает.

Допустимо ссылаться с заголовков уровня

и ниже, но тоже если это оправдано и логично.

Поисковые роботы придают заголовкам большое значение, поскольку они используются, чтобы обозначить важную информацию. Так машинам будет легче читать текст и понимать его структуру, логику; видеть, что есть самое весомое. Не стоит пытаться схитрить и применять теги

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

Наводим порядок. Теги

расставляются по принципу иерархии: тег

важнее тега

. На деле это выглядит вот так:

Поисковики перфекционисты: любят верную последовательность, чтобы все было на своих местах, на своих полочках. Поэтому соблюдаем логику: младший сын не может родиться раньше старшего. Такое не допустимо – вот пример с нарушенной иерархией:

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

Быстрые ссылки – это короткий путь из результатов выдачи к важной информации на вашем сайте. Чтобы сформировать такие ссылки, должно быть вхождение ключа и ссылка с ключевым словом на самом сайте на эту страницу. Быстрые ссылки:

Согласно общим рекомендациям тег

должен включать те же ключевые слова, что и Title этой страницы, но при этом теги не должны полностью дублировать друг друга.

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

и Title короткими и полностью идентичными.

В идеале, чтобы этот текст совпадал с текстами ссылок, ведущих на эту страницу.

Быстрые ссылки Яндекс позволяет редактировать. Например, убрать один из разделов либо выбрать ему другое имя, более привлекательное для ваших потенциальных клиентов. Сделать это можно в разделе Яндекс.Вебмастер → Информация о сайте → Быстрые ссылки.

Расставляем приоритеты. Никаких километровых заголовков

: включаем максимально важное. Это некрасиво, сложно и неудобно читается. Маркетинговую составляющую, если она длинная, можно обыграть в качестве подзаголовка.

Коротко-ясно-понятно: ключевое слово на первом месте, УТП (уникальное торговое предложение) вынесли за пределы главного заголовка, но оставили его вначале для привлечения внимания.

Не частим. Главный заголовок

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

Бытует мнение, что на странице H1 можно использовать только один раз! Но это не так. Гипотетически

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

употреблять не нужно.

И еще пример, как это выглядит в коде страницы. Запомните, что так делать не рекомендуется. Два H1 без веских на то причин:

Проверяем написание. Ошибки отпугивают людей, сразу возникает мысль: и какой школьник это писал? Проверяли ли текст? Гораздо опаснее, если роботы вас не поймут и ваш сайт в заветный топ не выведут. Так его никто и не увидит и ошибок не найдет. Вот пример с опечаткой.

Обходимся без сложной структуры. Не стоит вкладывать в теги

какие-то другие теги (например, так

Еще нежелательно вкладывать стили (как здесь:

Текст

), так как код становится более объемным, сложным и длинным. Следовательно, увеличивается время чтения кода роботом, это может затруднить индексацию.

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

Важное дополнение: в целевое действие тоже добавляем ключевые слова. Выделяем его тегами для пользователя, привлекаем к нему внимание. Но тут помним об умеренности: ЦД не должно быть много и тег часто использовать не нужно.

Итак, для того чтобы страницы вашего сайта лучше ранжировались, пользуйтесь одним из самых простых способов – прописывайте теги

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

Если все получится, то эффект от такой вроде бы незначительной и легкой работы не заставит себя ждать.

А если у вас возникнут сложности – обращайтесь к нашим специалистам, мы готовы проверить, правильно ли прописаны заголовки у вашего сайта, корректно прописать в случае ошибок и ответить на любые вопросы. Составление заголовков для 1 страницы (+подбор 3-х релевантных ключей) – от 450 рублей.

Источник

Зачем нужны заголовки

Зачем нужны заголовки и какие теги для них использовать?

Этот вопрос нам задают чаще всего.

Когда много лет назад придумали HTML, мир был совсем другим. Авторы спецификации вдохновлялись текстовыми документами, где в одном потоке подряд шли абзацы, списки, таблицы, картинки и, конечно, заголовки. Прямо как в ваших рефератах и курсовых: самый большой заголовок — название, заголовки поменьше — части или главы.

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

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

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

, аш… сбился. Так было бы удобнее менять части кода местами.

Такая же идея пришла в голову авторам HTML5 и они описали в спецификации алгоритм аутлайна. Он разрешает использовать на странице только

Разработчикам идея очень понравилась, многие даже бросились её внедрять. Но вот беда: алгоритм аутлайна до сих не внедрил ни один браузер, читалка или поисковик. На таких страницах все заголовки кричат, что они №1 и самые важные. Но если важно всё, то уже ничего не важно.

Не надо так делать, об этом теперь пишет сама спецификация. За уровнем заголовков нужно следить самим. На самом деле, это не так сложно: на типичной странице вряд ли наберётся структурных частей больше, чем на 3 уровня. Так что не ленитесь.

Нет, погоди. Я ставлю класс на

Вы конечно правы, стили создают визуальную модель важности: крупный чёрный текст важнее, меленький серенький вообще не важен. Но только если вы смотрите на такую страницу.

Есть две важные группы пользователей, которые читают вашу страницу по тегам разметки. Они не смотрят насколько крупный и чёрный ваш

. Это читалки и роботы. С роботами всё понятно: это поисковики, которым нужно помогать понимать ваши страницы.

Читалками или скринридерами пользуются люди, которые плохо или совсем не видят ваши интерфейсы, или не могут управлять браузером привычным образом. VoiceOver, NVDA, JAWS читают содержимое вслух и ориентируются только по значимым тегам. Элементы div и span не значат ни-че-го, какие бы классы и стили вы не накрутили. Такой сайт — как газета без заголовков, просто месиво текста.

Да какая газета! Очнись, 2017 на дворе, я изоморфное одностраничное приложение делаю, а не стенгазету. У меня тут стейты компонентов — нафига семантика там, где нет текста? Очень хороший вопрос.

Все читалки идут по странице тег за тегом, от первого к последнему. И читают подряд всё, что внутри. Крайне неэффективно: каждая страница начинается с шапки и пока её пройдёшь, забудешь за чем шёл. Поэтому у читалок есть специальные режимы, показывающие только важные части страницы. Структурные элементы header, nav, main и другие, все ссылки, все заголовки.

Если вывести все заголовки и прочитать их, можно составить ментальную, а не визуальную модель страницы. А потом взять и сразу перейти к нужной секции, выбрав её заголовок. Меню, поиск, каталог, настройки, логин — все эти части вашего приложения можно озаглавить, чтобы упростить доступ к ним.

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

Источник

12 Ссылки