SEO простым языком

О продвижении бизнеса в интернете

Основы HTML в помощь блоггеру

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

Мое мнение такое, что если вы собираетесь более менее профессионально вести свой блог, то без минимальных знаний HTML вам не обойтись. Понимание кодировки во многом сможет вам помочь, на какой бы платформе вы не вели блог, тем более сейчас все блогохостинги предлагают возможность использования HTML тегов. Например, в blogger есть вкладка Изменить HTML. А многие ей пользуются? Многие знают, что это такое, и зачем это нужно?
Поэтому я решила посвятить статью основам HTML.

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

<head>Голова страницы</head>
<body>Тело страницы</body>

Обращаю ваше внимание на то, что практически всегда, за редким исключением, все теги парные — открывающий тег <head> и закрывающий тег обязательно со слешем </head>.
Итак, зачем нам это нужно знать.
Когда мы хотим, чтобы наш блог могли найти люди через поисковик, мы должны облегчить поисковому роботу понимание, о чём наш блог.
В этом нам помогают специальный тег <title> и другие специальные мета-теги. Но настроить их можно только на тех платформах, где есть доступ к шаблону. Мета-теги всегда помещаются внутри головы страницы, между тегами

<head>Здесь будет самый важный тег title, мета-теги и другая важная информация о нашем сайте</head>

Про оформление мета-тегов я уже писала статьи. Поэтому, чтобы не повторяться, вот ссылки на уже существующие статьи: Внутренняя оптимизация и Оптимизация блога на blogspot.
А теперь я хочу рассказать, что вы можете делать на вкладке Изменить HTML
Очень полезно знать, как в языке HTML оформляется ссылка.
Для этого используется тег <a>

Сейчас будет ссылка <a href=»Адрес сайта или страницы, на которую ссылаемся»> Всё, что находится внутри этого тега называется анкором ссылки</a>, а за пределами этого тега — около ссылочный текст.

У тега <a> есть параметры, в примере это href и значение — адрес сайта. После каждого параметра ставится знак =, а каждое значение заключается в кавычки.
К ссылке мы можем применить разные параметры, например, сделать так, чтобы ссылка не индексировалась гуглом. Об этом я тоже уже писала статью Как закрыть внешние ссылки. Обязательно почитайте.
Но есть ещё очень полезный параметр, с помощью которого, мы можем указать на то, чтобы ссылка открылась в новой вкладке. Это удобно в тех случаях, когда мы делимся с читателем внешней ссылкой, но при этом не хотим, чтобы он уходил с нашего блога. В помощь нам параметр
target=»_blank»
В ссылке это применяется так:

Мой блог — <a target=»_blank» href=»http://amateurblogger.ru»>Блог SEO-Дилетанта</a>

Мой блог — Блог SEO-Дилетанта. — Нажмите на ссылку, она откроется в новом окне или в новой вкладке (зависит от браузера).
Ещё полезный параметр
title=»Всплывающая подсказка»
В ссылке это будет так:

Мой <a href=»http://amateurblogger.ru» title=»Блог SEO-Дилетанта»>блог</a>

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

<strong></strong> — жирное начертание
<em></em> — курсивное начертание

Не могу сказать про другие платформы, но в blogger используются другие теги

<b></b> — жирное начертание
<i></i> — курсивное начертание

Принципиальной разницы между ними нет, и 100%-ых утверждений о том, какие именно теги использовать — нет. Просто теги b и i считаются уже устаревшими, и рекомендуется использовать strong и em. Кстати, об этом я тоже уже писала статью Внутренняя оптимизация (продолжение).
Так же, хотелось бы еще рассказать об оформлении заголовков <h></h>.
В шаблонах они полностью предусмотрены, и может я никогда бы о них не заговорила, если бы не один момент.
Как известно, поисковые роботы оценивают информацию в порядке значимости, т.е., например, в заголовке h1 — самая важная информация, в h2 — менее важная, чем в теге h1,  в h3 — ещё менее значимая.
Так вот, я обратила внимание, что у меня в шаблоне тегом h2 — выделены даты статей, заголовки в сайдбаре, а тегом h3 — выделена более значимая информация — сами заголовки моих статей. [ads1]Вроде разница между вторым и третьим невелика, но я это исправила, т.к. даты статей вообще не считаю чем-то значимым, а заголовок моей статьи — это и адрес страницы, и title. Поэтому, всем, кто интересуется продвижением своего блога, рекомендую обратить на это внимание.
Я не утверждаю, что необходимо знать HTML, вы можете вести свой блог  и без этого, я лишь считаю, что знания, которые вы почерпнули из этой статьи вам обязательно пригодятся. Они сделают ваш блог более удобным, как для ваших читателей, так и для поисковых роботов.
«Азбука блоггера» — это рубрика для всех новичков в блоггинге, если вам интересны вопросы ведения и развития блога, рекомендую подписаться на новости моего блога.

Мои услуги

Создание сайта

Полностью готовый сайт для посетителей и продвижения под ключ

От 10 000р

SEO услуги

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

От 3 000р

Digital-маркетинг

Разработка стратегии продвижения под Ваш проект. Распаковка экспертов.

От 3 000р

Коучинг

Инструмент, который поможет Вам завоевать весь мир.

От 10 000р

Поделитесь с друзьями

22 thoughts on “Основы HTML в помощь блоггеру

  1. Спасибо:)
    Чтобы ссылка открылась в новом окне или вкладке внутри самой ссылки должно находиться это — «target=»_blank»»
    Содержание постов оформлять в тег h1 не нужно. Он только для заголовков. А вот вообще разобраться в шаблоне не помешало бы. Я посмотрела твой блог, там такая же ситуация с заголовками, как и у меня была.
    Я думаю у всех такая проблема в blogger, особенно у кого стандартные шаблоны, надо отдельную статью написать про заголовки. В двух словах не уложиться. Потерпишь денёк? Я подготовлю подробную статью.

  2. Спасибо:)
    Чтобы ссылка открылась в новом окне или вкладке внутри самой ссылки должно находиться это — «target=»_blank»»
    Содержание постов оформлять в тег h1 не нужно. Он только для заголовков. А вот вообще разобраться в шаблоне не помешало бы. Я посмотрела твой блог, там такая же ситуация с заголовками, как и у меня была.
    Я думаю у всех такая проблема в blogger, особенно у кого стандартные шаблоны, надо отдельную статью написать про заголовки. В двух словах не уложиться. Потерпишь денёк? Я подготовлю подробную статью.
    26 апреля 2010 г. 5:59

  3. Спасибо, жду!
    26 апреля 2010 г. 6:18

  4. Спасибо огромное!!! Информация оказалась для меня очень актуальной!

  5. Катюш, просмотрела весь твой блог — искала статьи на тему подзаголовков.

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

    Прочитав еще раз разные статьи — убеждаюсь что что-то не то?!

    Смотри, я тоже стала делать в своих заметках подзаголовки — напр.
    Закон притяжения. Точка притяжения.
    Закон притяжения. Польза.

    Я поняла, что выделять их надо тегами с обеих сторон — я так и делала?!
    А получается что это — неправильно:)

    Я не ставила косую черту! и цифру!

    Катя, подскажи пожалуйста просто:
    1. для моих подзаголовком мне нужно ставить h2 или h3
    2/ задним числом в своих заметках я могу поменять так, чтобы стало правильно?

  6. Регулярно читаю ваши статьи. Пытаюсь оптимизировать свой бложок. Проверила на валидность на pr-cy.ru/analysis_content. Вопрс, замечание: Атрибут xmlns:данные не допускались здесь: это ужасно плохо или можно с этим жить.

  7. Второй вид ошибки при анализе шаблона на pr-cy.r : & не начинал с характеристики. (& вероятно был избежать как &амп.;.) — Вопрос тот же это смертельно для блога или можно существовать дальше в такой версии шаблона.

  8. olga55, любые ошибки — это зло, и с любыми можно жить.
    Дело обстоит так, что от ошибок лучше избавляться, но с другой стороны, все браузеры достаточно «образованны» и могут самостоятельно исправлять ошибки так, чтобы обычный пользователь не видел их.
    Что делать именно с шаблонами blogger? Если знаете, как исправить ошибку, исправляйте, если не знаете, то расслабьтесь и оставьте все, как есть. Ведь для того, чтобы исправить ошибку, нужно разбираться в языке XML.

  9. Отличная работа! Уважаю альтруизм автора!

  10. а как редактировать htlml блога на вордпрес?

  11. Зависит от того, что именно вы хотите сделать, потому что многое в WordPress решается плагинами.

  12. Ну вот! Кажись нашла нормальный и дельный блог, по-крайней мере, хоть написано всё человеческим языком. «Золотая лихорадка» по поводу быстрого обогащения в Сети, у меня уже давно прошла. Да, хочу зарабатывать, но понимаю, что с неба деньги тут не сыпятся. Пахать надо здесь, как и на любой другой работе. Многое узнала только сейчас. Но много вопросов ещё осталось. Вот, например — Можно ли добавить шапку в шаблон, где её как-бы нету? У меня один из предустановленных шаблонов со странным названием «Корпорация «Чудеса». В html-коде я не нашла присутствия этой самой шапки. Если я правильно понимаю, то нужно прописать этот код в меню «добавить CSS»? Если я права, то как именно это сделать?

  13. Что-то вы намудрили с вопросом:). Или я не поняла, что вы хотите, или вы просто не знаете, что это делается очень просто. В элементах страницы есть гаджет «Название_блога (Заголовок)». Откройте этот гаджет, там будет пункт «Изображение». Вот туда и надо вставить свою картинку. Если я не правильно поняла ваш вопрос, то объясните по-четче..

  14. Попробуйте. Но прежде, внимательней прочитайте мой предыдущий коммент.

  15. Всё время нахожу полезные для себя статьи на вашем сайте! Полезная и интересная штука html, как оказалось. Даже мой сын заинтересовался 🙂 Уговорил меня в срочном порядке записать его на курсы «сайтостроительства» :)) Теперь постигает основы этого интереснейшего занятия и постоянно пытается обучить меня! 🙂

  16. Миша Щасливый:

    Интересная Статья  

Comments are closed.