Тайтлы что такое деревья

Все о Title и Description – как написать, как заполнять…

Сегодня поговорим о метаданных для SEO: а именно тегах Title и Description. Никакой воды! Все что вы хотели знать об этих метатегах за 5 минут.

Что такое Тайтл и Дескрипшн и почему они так важны для продвижения сайта

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

Что такое сниппет в SEO?

Это блок (фрагмент) с информацией, который формируется в результатах поиска на основании данных, которые роботы Гугл или Яндекс получают от сайта. Состоит из: Title, Description, URL, а также расширенные данные: дата, быстрые ссылки, цены, рейтинг и многое другое.

Пример, как выглядит наш сайт в поисковой выдаче:

Пример метатегов Title и Description в коде страницы:

Как правильно написать Title и Description:

Начнем с Title

В Тайтл обязательно должно быть основное ключевое слово. Это важно, как для пользователей, так и для поисковых систем, будь то Google или Яндекс.

Тайтл должен быть максимально привлекательным для пользователей. Т.е. на него должны кликать чаще, чем на другие результаты выдачи. CTR (клики/показы) вашего сниппета – это один из факторов ранжирования поисковых систем.

Title должен быть уникальным для каждой страницы вашего сайта.

Как создать Тайтл с высоким CTR:

• Использовать цифры: «5 причин…», «Топ 10…», «3 способа…», «Номер 1 в…».
• Использовать квадратные скобки. Удивительно, но они повышают CTR по разным оценкам на 10-30%: «Купить фольксваген пассат в Москве [официальный дилер]».
• Использовать ваши преимущества (наиболее актуально для сайтов услуг и интернет-магазинов): «Купить антирадар в Москве – бесплатный Тест-драйв 30 дней».
• Вставлять ?Емоджи – увеличивают кликабельность от 20 до 100%. Как правильно использовать их в метатегах я подробно разобрал в отдельной статье (скоро появиться ссылка).
• Для региональных коммерческих сайтов обязательно указывайте город.
• Укажите цену, если уверены, что это ваше конкуретное преимущество.

Пример идеального title для статьи:

Теперь о Description

Если Тайтл действительно важен, то вот Дескрипшн немного отходит на второй план. На это есть две причины:

1. Пользователи при серфинге страниц поисковой выдачи очень редко обращают внимание на то, что там написано.
2. Яндекс и Google часто игнорируют прописанный текст в теге Description, а в сниппет выводят более релевантный отрезок текста со страницы сайта.

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

Как написать эффективный Description:

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

Пример хорошего метатега Description (думаю, понятно какой из них):

О длине Title и Description

На момент написания статьи рекомендуемые ограничения по количеству символов для Яндекс и Гугл такие:

Стоит ли придерживаться этих рекомендаций?

Постарайтесь, чтобы в 90 символов Тайтла уместились основной ключ и самая важная информация.

Что касается дескрипшена, то я часто пишу в 1.5-2 раза больше символов.

1. В 2018 году Гугл, на небольшой отрезок времени, увечил длину выводимого Description до 300 символов.
2. За превышение лимитов нет никаких санкций. Т.е. сайт, с идеально вписывающимся в рекомендации тегами, не будет иметь никакого преимущество перед сайтом, где все теги длиннее предложенных выше значений.

Примеры создания Title и Description

Пример на сайте услуг

• шкаф купе в детскую
• шкаф купе в детскую комнату
• шкаф купе в детскую комнату фото
• угловой шкаф купе в детскую
• угловой шкаф купе в детскую комнату
• шкаф купе в детскую минск
• шкаф купе в детскую под заказ

Description: Купить прямой или угловой шкаф-купе в ??детскую комнату под ключ по самой ⭐низкой цене в Минске! ✅Рассрочка 0% от 3 до 6 месяцев от компании. ✅Безусловная гарантия 3 года на шкафы-купе.

Пример в интернет-магазине

• бескаркасная мебель минск
• бескаркасная детская мебель
• бескаркасная мебель купить
• бескаркасная мебель интернет магазин
• бескаркасная мягкая мебель

Description: Бескаркасная мягкая мебель со скидкой и ? доставкой по всей Беларуси. ✅Самый большой выбор расцветок форм и размеров в Минске! ? Скидки до 60% на акционные кресла-мешки. ✅Всегда в наличии! ✅Можно в аренду!

Пример в информационной статье

• оптимизация текста
• seo продвижение статьи
• seo оптимизация статьи
• тексты для продвижения
• написать seo текст
• seo текст
• сео текст

Description: Продвижение статей и оптимизация текста под поисковые системы: ⭐правила оформления, ⭐как использовать мета-теги, ⭐4 фишки для супер-эффективного продвижения в Google и Яндекс.

Автоматизация создания метатегов Title и Description в популярных CMS WordPress и OpenCart

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

Как поступать в случае большого количества страниц на сайте?

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

К примеру в интернет-магазине, как правило, используются следующие переменные: название товара, цена, город, название категории и многое другое.

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

Пример: «Купить [название товара] в [город] по честной цене»

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

Источник

Что такое дерево документа в HTML?

В этой статье хотелось бы рассказать что такое дерево документа в html и как связаны элементы в нём.

В html документе многие теги являются вложенными в другие, на пример:

html> head> title>Примерный заголовокtitle> head> body> div class=”container”> h1>Что-то важноеh1> div class=”left”> h2>Чуть менее важная инфоh2> p>Содержимое страницыp> ul> li>Пункт 1li> li>Пункт 2li> li>Пункт 3li> ul> div> div> body> html>

Так выглядит код страницы, однако разработчик видит его иначе. Этот хаотический набор символов благодаря пониманию структуры документа выстраивается в четко определенную схему. Так он видит что head и body вложены в html, а h2 p ul в div и так дальше.

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

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

Предки и потомки

Как было сказано выше, в html коде элемент может внутри себя включать другие. Следовательно, тэг внутри которого находятся прочие тэги, называется предком (ancestor), а эти «другие» называются потомками (descendant).

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

Родители и дочери

Предок, имеющий первый уровень вложенности, называется родитель (parent), а потомок содержащийся непосредственно в нем, имеет название дочерний элемент (child).

Количество дочерних элементов содержащихся внутри родителя ничем не ограничено, но дочерние могут иметь только одного родителя.

Родителей и дочерей еще иногда называют прямыми предками и прямыми потомками.

Рассмотрим на нашем примере

Head выступает родителем и предком для title, а он выступает дочерним элементом и потомком для head; h2, p, ul, li выступают потомками для div в тоже время как li одновременно является потомком для ul и div а родителем li выступает только ul . В этом и заключается основное отличие предка от родителя, и дочери от потомка.

Сестринские элементы (siblings)

К ним относятся дочерние элементы с общим родителем.

Сестринским тегам важно только наличие общего родителя, а тип элемента может быть разным, например:

h2, p, ul, являются сестринскими и относятся к родителю div в то же время все li также будут сёстрами только под родителем ul.

Смежные (adjacent)

Теги стоящие в структуре документа рядом и имеющие единого родителя.

Так, для нашего примера, h2 смежный c p, ul смежный p, а p смежный ul и h2 одновременно.

Предыдущий и следующий сестринские

Тут всё просто: следующий сестринский элемент (following sibling) — по коду идет сразу после интересующего нас тега и имеет с ним общего родителя, а предыдущий сестринский (preceding sibling) представляет из себя тег предшествующий нашему и также имеющий с ним единого родителя.

Предыдущий и следующий

Крайне похожи на только что описанные нами связи, но есть нюансы — в этом случае для нас не имеет значения наличие общего родителя. Например если для h2 нету предыдущего сестринского тега, то просто предыдущим (preceeding) для него будет div со следующим (preceding) та же картина.

Первый и последний ребенок

Первый ребёнок (first-child) — это дочерний элемент, который является первым для своего родителя, последний ребёнок (last-child) — соответственно последний тег внутри родителя.

Например для div первым ребёнком будет h2, а в качестве последнего выступает ul.

Корневой элемент

Им считается тег, который не имеет ни предков, ни родителей. Он включает в себя все «ветви» нашего дерева и открывается в самом начале документа ( < html >), а закрывается в самом конце ( ).

Подводя итоги

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

Источник