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

В 1-й части нашего краткого обзора основ html будут рассмотрены:

основные теги html  для оформления текста и шрифта;

тэги html для SEO и структуры страницы;

тэги html для оформления гиперссылок.

Основы HTML

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

Открывающий тэг html – это, как правило, слово в скобках. Закрывающий тэг html окружен теми же скобками, но со слешем – с косой чертой сразу после открывающейся скобки.

Например, если вы хотите выделить жирным шрифтом часть текста, то вы должны использовать <b> для открывающего тега и </b> для закрывающего.

Допустим, вы решили выделить жирным слова «Привет!» в следующей фразе. Тогда ваш HTML код будет выглядеть следующим образом:

<b>Привет!</b> Меня зовут Вася.

В результате ваши читатели на странице сайта увидят следующее:

Привет! Меня зовут Вася.

Только слово «Привет!» выделено жирным шрифтом, потому что именно это слово окружают соответствующие тэги html. Если бы вы захотели выделить жирным всю строку, то вы бы поставили закрывающий тег </b>  после слова «Вася».

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

Вы можете применить этот подход для многих других кодов в языке программирования HTML. Вот некоторые из основных тегов html, которые вам непременно пригодятся.

Тэги html для оформления текста и шрифта

Язык программирования HTML дает вам широкие возможности для оформления текста. Вот несколько основных тегов html для решения этой задачи.

Новый абзац: <p> начинает новый абзац и создает пустую строку между новым абзацем и предыдущим. Закрывающий тег: </p>, но он в данном случае не является обязательным.

Разрыв строки: <br>. В месте использования этого тега текст прервется и продолжится с новой строки. Два тега <br> эквивалентны одному <p>. В закрывающем теге в данном случае необходимости нет.

Жирный шрифт: <b>. Закрывающий тег: </b>.

Подчеркивание текста: <u>. Закрывающий тег: </u>.

Курсив: <i>. Закрывающий тег: </i>.

Центрирование текста (и не только текста): <center>. Закрывающий тег: </center>.

Выравнивание текста по левому краю: <p align=»left»>. В качестве закрывающего тего просто используйте </p>.

Выравнивание текста по правому краю: <p align=»right»>. Закрывающий тег: </p>.

Изменение цвета текста (здесь для примера – на красный): <font color=»red»>. Закрывающий тег для любых операций со шрифтом в языке программирования html используйте </font>.

Измененить шрифт: <font FACE=»Arial»>

Изменить размер шрифта: <font size=»3″> (доступен выбор между 1 и 7)

Мигающий текст: <blink> </blink> (эта пара тэгов html работают только в Netscape).

Скроллинг (прокрутка текста): <marquee> </marquee> (эти пара тэгов html работает только в Internet Explorer).

Тэги html для SEO и структуры страницы

Язык программирования HTML для SEO дает ряд полезных инструментов, помогающих в продвижении сайта.

Для начала посмотрите на простейший образец страницы с базовой структурой. Это основы HTML, азы.

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

<html>

 <head>

<title>Название веб-страницы, которое отображается в верхней части веб-браузера, а также используется многими поисковыми системами в качестве названия страницы в списке поисковой выдачи по соответствующему ей запросу</title>

<meta name=»description» content=»10-15 слов, которые описывают содержание веб-страницы, некоторые поисковые машины используют его для формирования сниппета в списке поисковой выдачи»>

<meta name=»keywords» content=»основные ключевые слова веб-страницы, разделенные запятыми. Берутся во внимание некоторыми поисковыми машинами»>

 </head>

<body>

<p align=»left»>

Это наша новая веб-страница. Надеемся, что она вам нравится. Заходите на наш сайт почаще! Мы готовим много интересных и полезных статей про создание и продвижение блогов и сайтов. А если у вас нет времени ждать, пока мы их напишем, научитесь всему сами на <a href=»http://seotrainings.ru/seo-kursyi»>курсах SEO</a>.

 </p>

 </body>

 </html>

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

А теперь разберем основные теги html, использованные в этом примере.

Тэг <html> просто указывает браузеру, где в этом документе начинается код, написанный на языке программирования HTML.

Между открывающим тегом <title> и его закрывающей парой </title> заключен заголовок страницы, который вы увидите на самом верху вашего веб-браузера. Этот тэг html также используется большинством поисковых систем при индексировании веб-страницы, а также при ее отображении в поисковой выдаче.

<meta name=»description» content=»…»> Здесь помещается описание содержания веб-страницы. Эта информация также используется некоторыми поисковыми системами, в том числе для составления сниппета. Однако некоторые поисковики в качестве описания страницы в поисковой выдаче берут случайный фрагмент из основного текста, содержащий ключевые слова.

Тег <meta name=»keywords» content=»…»> может также быть полезным для рейтинга страницы в некоторых поисковых системах. Вставьте в него несколько основных ключевых слов или ключевых фраз, соответствующих содержанию страницы, разделяя из запятыми.

Несколько лет назад информация в тегах <meta name> играла значительную роль в получении верхних позиций в поисковой выдаче. Однако все изменилось коренным образом после того, как количество новых сайтов стало возрастать лавинообразно. К тому же, многие веб-мастера злоупотребляли возможностями этих тегов. Тем не менее, мы рекомендуем использовать их. Хотя не стоит ожидать, что они решат все ваши задачи по SEO.

Тело страницы, ее контент, должно быть заключено внутри тегов <body> и </body>.

Тэги html для оформления гиперссылок

Гиперссылки организуют связь между веб-страницами и могут быть присвоены разным объектам – словам, фразам, рисункам, кнопкам меню, определенной области страницы. Гиперссылки позволяют в один клик перейти на другую страницу или веб-сайт. Вы можете создать гиперссылку с помощью следующих тэгов html:

<a href=»http://www.thepage.com»> Название ссылки </a>

На готовой веб-странице гиперссылка будет выглядеть так: Название ссылки

Как сделать так, чтобы гиперссылка открывалась в новом окне?

Вы не хотите, чтобы посетители полностью уходили с вашего сайта, когда они нажимают на ссылки, ведущие на другие сайты? Тогда воспользуйтесь атрибутом «target», чтобы страница, на которую ведет ссылка, открывалась в новом окне.

<a href=»http://www…… «target=»_blank»>

Абсолютные и относительные URL-адреса

URL – это другое название для адреса веб-страницы в сети Интернет и расшифровывается как Uniform Resource Locator, что означает «определитель местонахождения ресурса».

Есть два типа URL-адресов, которые можно использовать для связи с другими страницами –  абсолютные и относительные.

Абсолютные URL-адреса

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

Скажем, у вас есть папка внутри корневой директории вашего веб-сайта под названием  »music», и вы хотите перейти по ссылке на страницу внутри папки  »music» под названием brahms.html.

Абсолютный URL в таком случае будет выглядеть так:

<a href=»http://www.yoursite.com/music/brahms.html»>Брамс</a>

Относительные URL-адреса

Если вы не собираетесь когда-либо возвращаться к этому коду и редактировать гиперссылки (например, при переносе контента на другой ресурс), то относительные URL-адреса – это то, что вам нужно. Кроме того, относительные URL-адреса предпочтительнее для внутренней перелинковки страниц вашего сайта, поскольку они короче и меньше загромождают код.

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

Допустим, вы находитесь на странице, о которой мы говорил выше –  brahms.html, расположенной в папке «music», и вы хотите создать обратную ссылку на главную страницу – http://www.yoursite.com/index.html.

Чтобы направить браузеру на одну папку выше, используйте так называемый dot-slash метод, то есть обратитесь к браузеру с помощью точек и прямого слеша.

<a href=»../index.html»> Главная </а>

Если нужно подняться еще на один уровень выше, чтобы добраться до корневой папки, проинструктируйте браузер так:  <a href=»../../index.html»> Главная </а>. Думаю, принцип ясен.

Изменение цвета гиперссылки

По умолчанию в языке программирования html для ссылок используется синий цвет. Но вы можете изменить его на любой цвет, какой вам нравится, с помощью атрибута link внутри тега <body>. Вот пример:

<body link=»green» vlink=»yellow» alink=»purple»>

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

Создание ссылки с адресом электронной почты

Создать ссылку с адресом электронной почты так же просто. Все, что вам нужно, – это функция «mailto»:

<a href=»mailto:youraddress@email.com»> Отправить мне электронное письмо </а>

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

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

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

Для создания якоря заключите нужный текст внутри такого кода: <a name=»name1″>Это текст, на который ведет якорная ссылка из другого места этой веб-страницы</a>.  Дайте имя якорю и впишите его сюда: «name1″, вместо name1. Имя может быть любым.

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

<a href=»#name1″>Нажмите здесь</a>

Значок # как раз и показывает, что переход по ссылке произойдет в пределах этой же страницы.

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

Есть и другие способы для создания якорной ссылки, без использования атрибута name. Можно назначить якорю – элементу текста, к которому делается переход, id – айди. Например, div id=”go-here”. Тогда код якорной ссылки будет выглядеть так: a href=”#go-here”. Такой способ считается более прогрессивным, поскольку не засоряет код сайта «пустыми» элементами, без которых можно обойтись.

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

На этом закончим Часть 1 нашего краткого обзора основ html. Язык программирования html лучше усваивается порциями адекватного размера. Но продолжение следует! В следующий раз мы продолжим изучение основных тегов html: научимся добавлять таблицы и рисунки, а также создавать фон веб-страниц с помощью тэгов html.