зона тега а вашего сайта что это

Преобразуется на странице в следующее:

Ссылки html вебмастера на профессиональном языке называют гиперссылками.

Атрибуты и свойства тега

В этом случае мы получим ту же ссылку, что и в первом примере, но перейдя по ней, страница откроется в новом окне.

2. Атрибут title=»подсказка» позволяет прописать подсказку, которая высветится при наведении курсора на ссылку. Это нужно для более точного описания ссылки. Атрибут тайтл поможет пользователю убедиться в том, что по ссылке он найдет нужную информацию, а для поисковой системы это дополнительный ключевые слова для страницы, на которую ведет ссылка.

Пример с подсказкой title

Преобразуется на странице в следующее:

В данном случае подсказка высвечивается стандартным способом. Однако можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »

3. Атрибут class=»название класса» задает класс стиля для ссылки. О классах Вы уже знаете из предыдущего урока (стили в html). Для тега a стили имеют небольшие отличия. Объясню все нюансы на следующем примере.

Преобразуется на странице в следующее:

4. Атрибут rel=»параметр» — определяет отношения между текущим документом и документом, на который ведет ссылка. Этот атрибут носит важное значение для поисковых машин, но браузерами никак не трактуется. Может принимать следующее значения:

4.1. nofollow — означает то, что вес по ссылке не будет передаваться (робот не будет переходить по ссылке). Например:

4.2. canonical — в случае множества дублей на сайте, указывает главную страницу среди всех дублей

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

Как сделать ссылку на адрес почты

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

Сделать ссылку с адресом электронной почты легко. Для этого есть специальное слово mailto:

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге a. Теперь советую перейти к следующему уроку.

Источник

Тег A (гиперссылка)

Содержание

Глобальное значение ссылок

Значение ссылок в SEO

Поисковые алгоритмы берут в расчет следующие факторы:

Синтаксис тега

Атрибут Href

Атрибут Rel

Атрибут Target

_self Ссылка срабатывает в текущей вкладке браузера (применяется по умолчанию, если атрибут не прописан): _blank Страница загружается в новой вкладке браузера (принято применять для внешних исходящих ссылок):

Классификация ссылок

В зависимости от применяемых значений анкоров и атрибутов тега иссылки делятся на:

Абсолютные и относительные ссылки

В зависимости от представления URL в атрибуте href ссылки делятся на:.

Относительные ссылки могут ссылаться только на страницы домена, на которых они указаны.

Внешние и внутренние

Относительно сайта, на котором указаны ссылки, они делятся на:

Внутренние Ссылки между внутренними страницами сайта. Внешние Ссылки между страницами разных сайтов.

Входящие и исходящие ссылки

Относительно рассматриваемой веб-страницы ссылки делятся на:

Анкорные и безанкорные ссылки

В зависимости от текста в анкоре ссылки делятся на:

Анкорные Когда анкор описывает контент акцептора: Безанкорные Когда анкор не описывает контент акцептора. В качестве анкора безанкорных ссылок может применяться URL ( Uniform Resource Locator — унифицированный адрес ресурса ; URL-адрес ) — адрес идентификации, присвоенный веб-странице в Интернете. URL-адреса отображаются в адресной строке браузеров.

Анкоры ссылок учитываются алгоритмами ранжирования:

Навигационные, контекстные и рекламные ссылки

В зависимости от назначения ссылки делятся на:

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

Якорные ссылки

Якорная ссылка ссылается на элемент внутри страницы через указание идентификатора этого элемента (якорь ссылки) в атрибуте href после символа # :

Якорные ссылки чаще всего применяются в интерактивных оглавлениях страниц, облегчающих навигацию по разделам этих страниц.

Сквозные ссылки

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

Источник

Оптимизация для новичков: HTML-теги и атрибуты в SEO

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

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

Теги и атрибуты как составные части языка HTML

Теги и атрибуты составляют основу HTML — языка гипертекстовой разметки. Последовательность тегов и их атрибутов задает структуру документа. Интерпретируя язык разметки, браузер «понимает», о чем страница и как должен отображаться ее контент (текст, картинки, видео).

Стандартно структура HTML-документа содержит такие элементы:

Что такое тег

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

Пример кода:

Где пользователь может увидеть ваш :

Зачем нужны метатеги

Meta description

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

Пример кода:

Meta robots

Метатег robots служит для указания правил индексирования конкретных страниц сайта и позволяет следовать по гиперссылкам с данных страниц.

Пример кода:

Значение атрибута «name» указывает, что директива актуальна для всех роботов. Вы также можете закрыть доступ только одному из них. Для этого в атрибуте «name» следует указать нужного робота, например, основного робота Google — «googlebot» или Яндекса — «yandex».

Основные значения атрибута content:

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

Meta charset

Пример кода:

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

Meta viewport

Метатег «viewport» сообщает браузеру, как следует обрабатывать размеры страницы, изменять ее масштаб под ширину экрана устройства, с которого выполнен переход. Meta viewport — один из пунктов внедрения адаптивного дизайна, когда для всех устройств используется один код с корректировкой по размеру экрана. Для корректного отображения контента сайта на любом устройстве, на всех страницах следует разместить следующий фрагмент кода:

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

Meta keywords

Правильно составленный метатег keywords должен содержать 5-7 ключевых слов, описывающих основное содержание страницы. Раньше он сильно влиял на ранжирование по заданным в нем ключевым словам, но утратил значимость из-за действий недобросовестных вебмастеров и постоянного развития поисковых систем. Тем не менее, для метатега keywords еще не все потеряно. Так, в отчете «Яндекс и Google: факторы ранжирования в 2017 году» от «Ашманов и партнеры» представлен вывод о влиянии метатега на продвижение в Google.

Пример кода:

Когда использовать теги link

Атрибут canonical

Атрибут «rel=»canonical»» используют для решения вопросов с дублирующимся контентом: когда на сайте есть близкие или идентичные по содержанию страницы по разным url. Атрибут canonical указывает поисковым системам, какую из дублирующихся страниц индексировать и показывать в результатах поиска, при этом передавая ей ссылочный вес и другие характеристики дубликатов. Чтобы указать, какая из страниц каноническая, нужно в коде страницы-дубля разместить тег «link» с атрибутом «canonical», где в атрибуте «href» прописать адрес канонической страницы.

Пример кода:

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

Источник

Правильная оптимизация страницы сайта

Этот материал посвящен базовым методам поисковой оптимизации веб-страниц. Некий костяк, необходимый для обеспечения ресурсу высоких позиций в поисковой выдаче.

Адрес страницы (URL)

Для начала надо настроить ссылку, которую пользователи видят в адресной строке браузера. И речь не о технических аспектах, а простоте восприятия. Существуют принцип создания ЧПУ (человекопонятного URL). Следуя ему, надо делать ссылки удобочитаемыми для людей (а не только для компьютеров). Взглянув на URL, пользователь должен понять, чего ждать на странице и для чего она предназначена.

Например, у вас есть сайт по продаже смартфонов. Адрес страницы с каталогом айфонов мог бы выглядеть так: http://saytstelefonami.com/smartphony-apple/. Такой URL отражает суть отображаемого на ресурсе. А вот такой – http://saytstelefonami.com/aweajj89.nm-l2a/%D1/%F0 — нет.

Также стоит учесть ряд правил оформления адреса. Писать надо строчными буквами. Не должно быть никаких дополнительных символов кроме дефисов. Каждое слово нужно писать отдельно.

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

Мета-теги

Есть два ключевых тега, влияющих на работу поисковых ботов.

Title

Это название страницы. Заголовок, который можно увидеть во вкладках браузера. Сменить title можно в панели управления CMS (например, в WordPress или Joomla). Также title можно прописать в коде страницы – д ля этого соответствующий тег пропитывается в блоке head.

К оформлению title есть два требования:

Description

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

Описание так же прописывается в блоке head. Для этого используется тег description.

Примеры тегов

Примерно так это выглядит в HTML-разметке сайта. Этот код вставляется в начало HTML-файла.

Заголовки и подзаголовки

Заголовки (или header’ы) помогают делить текст на смысловые части. Их можно разделить на две основные категории.

Header’ы должны быть вложенными. То есть в подзаголовок под номером 2 должен входить подзаголовок под номером 3. А в третий, соответственно, четвертый. Ставить H4 и вкладывать в него H2 нельзя.

Требования к тексту и ключевым словам

Чтобы добиться хорошей оптимизации, нельзя писать как попало. Текст должен соответствовать ряду параметров.

Ключевые слова

Это поисковые запросы, вводимые пользователями в Яндекс или Google, через которые они и попадают на ваш сайт. Ключевое слово (или просто ключ) включается в себя поисковый запрос целиком в неизменном виде. С помощью них роботы определяют тематику сайта. Ресурс становится более релевантным для целевой аудитории.

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

Уникальность

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

Проверить уникальность можно на сайте text.ru, в приложениях eTXT Antiplagiat, Advego Plagiatus и на сайте Content-Watch.ru. Зависит от того, насколько важен именно этот показатель и какой алгоритм подходит для вашего проекта.

Объем

Объем статьи зависит от темы. Нужно успеть рассказать все необходимое и раскрыть ее в полной мере. Фиксированных значений не существует. Но можно ориентироваться на конкурентов. Посмотрите, сколько символов в похожих статьях, и работайте в тех же пределах.

Вода

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

Сюда же относятся вводные слова, слово «который» и любые языковые единицы, не несущие четкой смысловой нагрузки.

Проверяйте количество воды через сервис text.ru. Постарайтесь добиться значения в пределах 15–20%, чтобы не сделать текст сухим и при этом оставить его удобочитаемым.

Заспамленность

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

Проверяйте заспамленность через сервис text.ru. Постарайтесь добиться значения в пределах 50%. Также рекомендую сервис Advego. В нем есть характеристика «тошнота», показывающая, как часто упоминается конкретное слово.

Фотографии, видео, гифки

Разбираемся, как работать с медиа на веб-ресурсах.

Зачем нужен медиаконтент и каким он должен быть?

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

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

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

Теги title и alt

Да, снова title. Но на этот раз для картинок. У каждой должно быть корректное название. Еще один тег — alt. В нем будет описание картинки на тот случай, если картинка не загрузится или на сайт зайдет незрячий пользователь, способный работать только с озвученным текстом.

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

Сжатие изображений

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

Перелинковка

Речь идет о создании системы ссылок, ведущих на ваш сайт. Есть два типа перелинковки: внутренняя и внешняя.

Внутренняя перелинковка

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

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

Посмотреть количество ссылок, которые ведут на страницу, можно через утилиты:

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

Внешняя перелинковка

Принцип почти тот же. Вы или кто-то за вас оставляет ссылки на страницы вашего сайта на других ресурсах. Чем престижнее сайт, ссылающийся на страницу, тем выше ее позиции в поисковой выдаче.

Микроразметка

Если вы занимаетесь сайтами, то знакомы с markdown-разметкой и html-разметкой. Микроразметка — это похожий язык, который дополняет HTML, позволяя внести еще больше конкретики в расположенные на странице элементы.

Она помогает роботам быстрее находить запрашиваемые части страницы. Например, блок с контактами организации, блок с подробной информацией о товаре или медиаконтенте.

Чтобы добавить микроразметку на свой сайт, надо:

Особенности оптимизации главной страницы

От главной страницы обычно ждут наличия следующие элементов:

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

Поиск ошибок

Исправляем регулярно встречающиеся ошибки.

Код ответа сервера

Битые ссылки

Дополнительные методы оптимизации страницы для поисковых систем

Вот еще ряд моментов, на которые стоит обратить внимание SEO-специалистам и вебмастерам.

Увеличение скорости загрузки

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

Кнопки соцсетей

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

Адаптивная верстка

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

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

Корректная настройка пагинации и робот-тегов

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

Сервисы и плагины для проверки оптимизации

Есть сервисы, помогающие оптимизировать страницы под нынешние SEO-реалии. Расскажу о нескольких.

На этом у меня все. Удачи в продвижении вашего ресурса!

Источник

Ссылки. Тег

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

Пара тегов . обрамляет текст ссылки или картинку, которая служит ссылкой.

Атрибуты тега

Адреса ссылок

Для навигации по страницам и сайта нам потребуется уметь задавать адреса ссылок. Адреса ссылок могут быть абсолютными или относительными.

Абсолютный адрес ссылки

Абсолютный адрес состоит из трех частей:

Пример

Абсолютная ссылки на страницу другого сайта:

Относительный адрес ссылки

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

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

Если вместо имени файла задать имя папки, то будет отображен индексный файл. Это может быть index.html, index.htm или index.php из этой папки.

Примеры

1. Относительная ссылка на целевой документ в той же папке, что и исходный документ:

2. Относительная ссылка на документ в папке, которая находится на одном уровне с исходным документом:

3. Относительная ссылка на документ, который находится на уровень выше исходного документа:

4. Относительная ссылка на документ, который находится в корне сайта:

Ссылка на конкретное место Web-страницы

Для создания ссылки на определенное место Web-страницы надо сначала поставить закладку-метку в соответствующее место и дать ей имя:

В адресе ссылки на метку в текущем документе перед именем метки ставится знак «решетка» ( # ):

В адресе ссылки на метку в другом документе указывается ее адрес и в конце добавляется знак «решетка» ( # ) и имя метки:

Данные в адресной строке браузера, которые идут после знака «решетка» ( # ), называют hash-данными (хэш-данными) или просто hash (хэш).

Отправка e-mail

Ссылка на адрес электронной почты (E-Mail):

Связь с FTP

FTP (File Transfer Protocol, протокол передачи файлов) позволяет пользователям копировать файлы с других компьютеров (FTP-сайтов). Таким методом компании часто распространяют свои новые программные продукты. Если не указывать имя файла, браузер выведет перечень всех файлов в каталоге. Это особенно удобно, если вы хотите, чтобы читатель получил доступ к нескольким файлам сразу, например, в случае больших файлов, разбитых на части для удобства передачи.

Звонок и СМС с браузера мобильного телефона

Позвонить по номеру с браузера мобильного телефона:

Отправить СМС с браузера мобильного телефона:

Источник