02.12.15 44.1K

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

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

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

Зачем нужны теги h1-h6?

В теги заключается название сайта, заголовки и подзаголовки текста:

В HTML теги заголовков обозначаются h от английского «header », что в переводе означает «заголовок, шапка ». Вот пример того, как это выглядит:

Заголовок

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

- наиболее важные теги

- менее значимые теги...

- последние по важности теги

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

Синтаксис тегов h1-h6

Название текста

Подзаголовок 1

...

Подзаголовок 2

Подзаголовок 3.1

...

Подзаголовок 3_2

Подзаголовок 3

Наибольшей популярностью пользуются теги h1 h2 h3 .

Как правильно использовать тег h1?

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

HTML тег h1 – самый значимый в своем роде. В него заключают название сайта и заголовок статьи. Однако не стоит его путать с тегом — мета тег, в основном для поисковиков, внутри содержит название документа, отображается вверху браузера;

— одинарный тег указывающий браузеру кодировку языка, где windows-1251 — говорит о том, что текст данной страницы на русском языке (windows-1252 — для английского языка);

— для ключевых слов сайта;

— краткое содержание страницы;

ТЕЛО ДОКУМЕНТА — с англ. «тело», содержит всю страницу сайта.

Это были стандартные теги html кода , с которых, без изменений должны начинается все страницы сайта/блога в таком виде:

Список html тегов находящихся в теле страницы

Между тегами будет находится само тело страницы сайта где:

• заголовок

  — самый важный 1 уровня;
• с

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

  по

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

  — соответственно подзаголовки 2, 3, 4, 5 и 6 уровня;
• анкор ссылки — ссылка, где » target=»_blank»» — атрибут отвечающий за открытие в новом окне, » title=»» название того, на что будет ссылка;
• и — теги для выделения жирным. «» устарели и рекомендуется использовать «»;
• — для выделения курсивом;
• — одинарный тег, отвечающий за вставку изображения на странице;
• — «p» от англ. «параграф», а значит делит текст на параграфы. По умолчанию выравнивается по левому краю;
• 
  — логический тег означающий конец строки и переход на следующую;
• — атрибут выравнивающий текст по центру;
• — атрибут выравнивающий текст по правому краю;
• —
• color=»green» отвечает за цвет текста. В данном случае стоит зеленый. Вместо слова «green» обычно ставится код из шестнадцатеричной системы цветов, например: «#088f47»;
• face=»verdana» — атрибут указывающий шрифт в тексте;
• size=»3″ — размер шрифта;
• 1. первое
  2. второе
  3. третье
  — нумерованный список;
• • слово
  • слово
  • слово
  — маркированный список;

HTML теги для создания таблицы

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

• — тег отвечающий за создание таблицы, где «1» есть ширина бордюра таблицы, где «450» ширина таблицы, а «center» вы уже знаете;
• — тег находящийся внутри «» и создает строку в таблице;
• — создает столбец в строке, находится внутри тегов «». «150», как вы уже наверное догадались — ширина столбца;

Полностью html теги таблицы выглядят примерно так:

ячейка №1	ячейка №2	ячейка №3
ячейка №4	ячейка №5	ячейка №6

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

Видео урок по теме — «Что такое HTML? Файл index html»:

Поделитесь пожалуйста, если понравилось:

Возможно вам будет интересно еще узнать:

Шрифт на странице

Тег размера шрифта в html – это разве что sub, sup и strong, которые так или иначе изменяют размер букв. Но html в этом плане дает очень маленькие возможности. Был, конечно, тег font, но сегодня он давно уже устарел. Если вам действительно интересно, как более гибко изменять размер шрифта, то нужно обратиться к возможностям CSS.

CSS свойство font-size

В CSS можно задать любую величину текста и это можно сделать не только в пикселях, но и в других единицах измерения. Чаще всего ее задают все-таки в пикселях, но можно и по-другому. Например, в процентах. За 100% берется шрифт у родительского элемента.

Например, если мы задаем величину текста в процентах какому-то абзацу и он лежит в теге body, то для него 100% будет равно размеру, заданному для body. Соответственно, если у тега задан шрифт в 12 пикселей, то чтобы задать абзацу размер в 24 пикселя, нужно написать так:

p{font-size: 200%}

p { font - size : 200 % }

Это если использовать проценты. Еще одна популярная относительная величина – em или высота шрифта у родительского элемента. Прописывание относительных величин лучше тем, что при изменении размера текста все поменяется пропорционально и будет хорошо отображаться.

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

selector{font-size: larger}

selector { font - size : larger }

Текст в элементе с нужным селектором станет больше, чем у родителя. Html теги размера существуют, но использовать их все же не рекомендуется. Это теги big и small. Заключение текста в них позволяет немного увеличить или уменьшить размер букв по сравнению с родительским элементом. Но сегодня лучше использовать css, если вам надо задать величину.

Размер основных элементов на веб-странице

В отношении задания размеров для остальных элементов все также: нужно использовать для этой цели css, а не html. Вообще в теге можно задать такие атрибуты, как width и height, но делать это неудобно. А самое главное – это не соответствует стандартам, которые определяют, что внешний вид и структуру нужно отделять друг от друга, вынося в отдельные файлы.

По этой причине для определения ширины и высоты элемента принято использовать css-свойства width и height.

img{ width: 50px; height: 50px }

< img width = "50" height = "50" > < ! -- такненужнопрописыватьширинуивысотудляэлемента-- > HTML лишь расставляет блоки на веб-странице, но сам формат этого языка не позволяет ему выступать удобным инструментом для задания величин. Чтобы как-то визуально повлиять на блок, нужно обрамлять его определенными открывающими и закрывающими тегами, что далеко не так удобно. Для задания внешнего вида элементов сегодня нужно использовать css-правила, потому что именно они для этого предназначены. На сегодня все, а вы не забывайте подписаться на обновления блога, чтобы иметь под рукой много полезных материалов по сайтостроению.

Метатеги title и description - основа продвижения сайта в поисковиках. Чтобы добиться хорошего эффекта в этом непростом деле, следует придерживаться нескольких правил, которые мы рассмотрим в данной статье.

Тег title

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

Тег title указывается в начале кода HTML-страницы, отображается в заголовке:

А также показывается в результатах выдачи поисковиков:

По заголовку title большинство пользователей решает, переходить на сайт или нет, поэтому тег должен быть интересным, информативным и привлекательным.

• Основная информация тега должна быть умещена в 40-70 символов с пробелами. Длинные заголовки поисковики обрезают.
• Начинайте заголовок с важного ключевого запроса, используйте точное вхождение ключевика. Указывайте в начале самую высокочастотную фразу из подобранного вами семантического ядра. Если основной целью, которую должен достичь пользовать на сайте, является покупка, то тег стоит начинать со слова «Купить».
• Указывайте город сайта, в котором вы работаете. Это важно не только для людей, но и для поисковых систем. При ранжировании поисковики будут учитывать указанный город, а пользователи будут понимать, подходит ли ваша компания по территориальному расположению. А вот если вы работаете в нескольких городах или делаете доставки по всей России, перечислением городов лучше не заниматься.
• Не перенасыщайте title ключевыми словами, достаточно всего 1-3 запросов, под которые оптимизирована страница. Для примера, тайтл «Выкуп авто, автовыкуп быстро, срочный выкуп автомобиль» переспамлен и непривлекателен для потенциальных клиентов. Добавьте преимущество, которое отличает вас и заинтересует потенциального клиента; укажите город нахождения. Всегда при оптимизации ориентируйтесь на людей, а не на роботов. Например, Тitle «Срочный выкуп авто в Москве в течение 24 часов» более эффективен.
• Заголовок в рамках сайта должен быть уникален, составлен под каждую страницу и отражать ее содержимое.
• Не стоит злоупотреблять стоп-словами: союзами, предлогами, междометиями и частицами. Но для повышения читабельности заголовка лучше все же их включить в текст тега.
• Не используйте спецсимволы (“”= ()/ \ | + _) и знаки препинания (- . ! ?).
• Не включайте в заголовок название компании, так как оно не является значимым ключевым словом. Но если у вас известный бренд, то можно его указать. Также не стоит прописывать URL сайта и такие «бесполезные слова», как «Главная страница», «О компании».
• Составляйте тег title для людей по всем правилам русского языка, заголовок должен быть цепляющим и привлекательным.

Тег description

Поисковые системы формируют сниппет из содержимого тега description и/или из контента на странице, в зависимости от поискового запроса.

• Длина тега не должна превышать 150-250 символов с пробелами.
• Тег должен описывать содержание определенной страницы ресурса.
• Указывайте наиболее важную информацию, размещая ключевые слова в начале тега. Важно, чтобы запрос был в начальной словоформе, то есть необходимо использовать запрос «купить кондиционер», а не «купите кондиционер».
• Description не должен повторять title. Описание должно служить продолжением названия, раскрывать его детальнее.
• Должен быть написан для людей.
• Для каждой страницы дексрипшн должен быть уникальным.
• Не должен быть переспамлен ключевыми запросами.
• Указывайте выгоды вашей компании или ресурса, чтобы зацепить внимание пользователей, выделиться среди конкурентов.
• Добавляйте призывы к действию, они мотивируют людей к совершению покупки, заказа услуг и пр. Также в тегах привлекательны эмодзи.
• Избегайте банальных фраз «низкие цены», «высокое качество» и т.п. Отличайтесь от конкурентов своей уникальностью, это касается не только мета тегов тайтл и дескрипшен, но и текстов на сайте.
• Не используйте спецсимволы и стоп-слова.
• Не указывайте URL-сайта.
• Если вы не указали название компании в title, то можете добавить его в description. В описании количество допустимых символов больше, и название можно использовать, чтобы напомнить о вашем бренде и улучшить его узнаваемость.

Title и description для интернет-магазинов

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

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

Составить тег Title для карточек товаров в интернет-магазине можно по следующим шаблонам:

1. «Название товара» недорого в интернет-магазине «Название».
2. «Название товара» купить недорого в «Название города».
3. Купить «название товара» в «Название города» с доставкой.

В качестве шаблона Description для интернет-магазина можно использовать:

• «Название товара» от «цена из карточки товара» с бесплатной доставкой.

• В конце тега используйте призыв к действию, например, «Заказывайте в магазине "Название магазина"».

Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.

Задание размера шрифта с помощью HTML

Размер шрифта на странице можно определить при помощи тега font HTML. В статье мы уже рассматривали тег font и его атрибуты. Одним из атрибутов этого тега является size , который и позволяет установить размер шрифта. Применяется он следующим образом:

Конструктор сайтов "Нубекс"

Size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута - “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 пункт больше или меньше, соответственно.

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

Устанавливаем размер шрифта при помощи CSS

В CSS для изменения размера шрифта применяется свойство font-size , которое применяется следующим образом:

В приведенном примере размер шрифта устанавливается в пикселях. Но существуют и другие способы задания размера:

• large, small, medium - задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
• larger, smaller - задают относительный размер (меньше или больше относительно родительского элемента).
• 100% - задается относительный размер (в процентах относительно родительского). Например: h1 { font-size: 180%; } Это означает, что размер тега H1 будет составлять 180% от базового размера шрифта.
• Другие варианты задания относительного размера:
  • 5ex - означает, что размер составит 5 высот буквы x от базового шрифта;
  • 14pt - 14 пунктов;
  • 22px - 22 пикселя;
  • 1vw - 1% от ширины окна браузера;
  • 1vh - 1% от высоты окна браузера;