WEBLEDI.RUВебледи Форум успешных женщин-вебмастеров
11 Декабрь 2016, 00:22:24 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.

Войти
Правила Реклама
 
5
10
15
Свежие ответы
Требуется помощник редактора сайта от Клим (Ищу копирайтера, редактора, контент-менеджера)
Re: Размещу качественный контент бесплатно от Mashuly (Обмен ссылками)
Re: Кем будет востребована информация о благосостоянии клиента? от АТВ (Привлечение и удержание посетителей)
Re: Требуется помощница по ведению сайта (контент-менеджер) от LARchik (Работа и услуги)
Re: Нужны копирайтеры на постоянную работу! от Ируха 1985 (Контент, копирайтинг, переводы)
Медицинская партнерка с уникальными методиками от sexolog (CPA-сети)
Как рассчитывается итоговый доход Адсенса? от anlw (Google AdSENSE)
Re: Наполнение групп Вконтакте от Posting_i_PIAR (Социальные сети)
Услуга в соц.сетях: поиск аккаунтов по номеру телефона или email. от Max-Payne (Покупка-продажа)
Интересен траф от вебмастеров))) от DariaTraffic (Реклама и доход)
Re: Проблема с дизайнером от Mara (Дизайн)
Re: Марафон Спарта от Пузата - Почему я иду от Клим (Обучение сайтостроению, SEO и заработку)
Re: Апа не будет до конца лета? от larisay (Yandex)
Re: Хостинг FairyHosting.com от vladislavd (Хостинг)
Re: как сейчас с высококонкурентной тематикой для новых сайтов? от Ивица (Раскрутка сайтов в поисковиках)
Свежие темы
Показать ещё
  Печать  
Страниц: 1 2 3
Автор

Тема: Верстка статьи. Часть первая - Заголовки  (Прочитано 4493 раз)

0 Пользователей и 1 Гость смотрят эту тему.
Akara
Offline Offline

Пол: Женский
Сообщений: 33


Просмотр профиля
« : 12 Февраль 2014, 15:13:58 »

Ко мне часто обращаются с просьбами «сделать семантическую верстку», «почистить тему от мусора», «найти косяки в шаблоне». Но самая важная часть - непосредственно разметка статьи иногда ускользает от внимания моих заказчиков. А ведь это нельзя поправить в теме, только вы сами можете правильно размечать свои тексты. Ошибки в верстке статей встречаются довольно часто, поэтому я решила собрать их в кучу, немного приправить теорией и выложить в виде серии статей. Которые, надеюсь, будет полезны не только самым зеленым новичкам.

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

Еще пара оговорок

  • В жизни теория часто расходится с практикой, а спецификации html с требованиями seo. Поэтому это не статья "Делай так и только так", а скорее "Как бы сделала я, исходя из своего опыта и понимания". Поэтому любые поправки и замечания только приветствуются)
  • В практической части будет описан редактор wordpress, так как работаю только с этим движком. Но, думаю, теории будет достаточно, чтобы использовать полученные знания на других cms.

Итак начинаем.

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



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

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

Заголовки h1-h6

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

1. Нарушение иерархии

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

Поясню на примере все той же статьи из Википедии о Яндексе Улыбка



Мы видим четкую иерархическую структуру. h1 - название статьи, h2 - это как бы подразделы, отдельные самостоятельные составляющие основной темы, h3 - подразделы подразделов) И так далее по порядку, получается своеобразная матрешка из смысловых блоков. Конечно, нарушение порядка не приведет к страшной каре в виде фильтра, но правильное и разумное использование позволит извлечь больше пользы из текста.

2. Двойной акцент на выделенном тексте

Такое часто встречается в плохо сверстанных темах, где верстальщик не потрудился прописать стили для всех элементов оформления текста. Например, сначала сбросил все стили, а потом забыл про жирное начертание для заголовков. Владелец сайта, публикуя статью, вставил заголовок как и положено, но на странице ничего не изменилось. И он просто нажал на кнопочку B (Жирный) в визуальном редакторе. Или обычное начертание было предусмотрено в дизайне, заголовки от основного текста отличались только размером. А человек, публикующий статью, ради декоративных целей выделил нежирный заголовок с помощью все той же кнопочки «B». В итоге получилось что-то типа такого



strong сам по себе является тегом акцентирования, указывает на высокую значимость выделенного текста, поэтому дополнять им и так уже важный заголовок по меньшей мере неправильно. А в некоторых случаях и вредно для продвижения. Поэтому будет правильнее добавить жирное начертание для нужного заголовка через стили, если оно не прописано в теме. Например, для указанного выше случая это будет h2 { font-weight: bold; } в файле style.css

Так же часто встречаются другие вариации, когда вместо strong вставляют b, em или i, только ради декоративных целей. Но об этом в следующий раз, теги акцентирования - довольно большая и очень противоречивая тема.

Как быстро узнать, какие заголовки используются в статье

Для этих целей я использую дополнение для firefox - RDS Bar. Для других браузеров, думаю, оно тоже имеется.



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

Теперь про кнопочки

В редакторе wp есть весь нужный нам функционал для добавления заголовков. Для тех, кто не знает, где его найти, небольшая фото-инструкция

1. Нажимаем последнюю кнопку на панели редактора


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



3. Выбираем нужный нам уровень заголовка



4. Все, наш заголовок готов



На этом пока все. И так пожалуй получилось слишком много текста. Да и, честно говоря, очень хочется поскорее получить обратную связь, так как статьи я пишу очень нечасто. Интересно, ваше мнение как в целом по статье, так и по форме подачи. Может стоит о чем-то писать подробнее? А от чего-то совсем отказаться? И вообще интересно ли вам читать дальше?
Записан
yasina
Offline Offline

Пол: Женский
Сообщений: 1542



Просмотр профиля
« Ответ #1 : 12 Февраль 2014, 15:40:34 »

Спасибо, Татьяна!!! любовь
"1. Нарушение иерархии" - раньше у меня с этим были проблемы. Я была убеждена, что нужно делать только так - заголовки, заголовки, и среди них нельзя влеплять подзаголовки В замешательстве
Записан
Katya13
Хочу на море (ни разу не была...)
Offline Offline

Пол: Женский
Сообщений: 1177


Будь оригинальной - добьешься успеха и вершины!


Просмотр профиля
« Ответ #2 : 12 Февраль 2014, 15:58:17 »

Татьяна, спасибо дарю цветочек дарю цветочек дарю цветочек
Записан

Seremetra
Offline Offline

Пол: Женский
Сообщений: 63



Просмотр профиля
« Ответ #3 : 12 Февраль 2014, 16:02:18 »

Замечательная тема. С нетерпением жду продолжения.  Подмигивающий
Записан

Я этого хочу, значит это будет (с)
Sunleo
Offline Offline

Сообщений: 271



Просмотр профиля
« Ответ #4 : 12 Февраль 2014, 16:14:48 »

Еще стоит отметить что структура статьи, нужна еще и для поведенческих факторов. Ведь когда удобно читать, то это плюс только.  дарю цветочек
Записан
Akara
Offline Offline

Пол: Женский
Сообщений: 33


Просмотр профиля
« Ответ #5 : 12 Февраль 2014, 16:29:56 »

Девочки, большое спасибо. Значит буду писать дальше)

Sunleo, да, конечно, это тоже может косвенно повлиять. Но суть в том, что для пользователя мы можем как угодно оформить статью с помощью файла стилей, используя при этом любые теги. И для человека все будет красиво, удобно и читабельно. А используя теги по назначению, мы как будто расставляем маячки для робота, типа: "Вот смотри это один абзац, это заголовок, это список" и тд. Таким образом, мы делаем делаем текст понятным, логичным, предсказуемым и для него.
Записан
АТВ
Как мотивировать себя что-то делать? Да никак - оставайтесь в жопе.(с)
Online Online

Сообщений: 748


Упорство, спонтанность, оригинальность - мой девиз


Просмотр профиля WWW
« Ответ #6 : 12 Февраль 2014, 17:27:55 »

Подписалась буду постоянным читателем дарю цветочек
Записан

Персональные лицензии для ESET (и не только) не дорого!
Продам МК
Ищу работу контент-менеджером
Марина13
Offline Offline

Пол: Женский
Сообщений: 2083



Просмотр профиля
« Ответ #7 : 12 Февраль 2014, 17:38:31 »

спасибо за ценную информацию
Записан
ewa
Я не ищу счастье, я его источник!!!
Offline Offline

Пол: Женский
Сообщений: 871



Просмотр профиля
« Ответ #8 : 12 Февраль 2014, 18:02:37 »

Танечка, статья супер. Все доходчиво написано, как по мне.  дарю цветочек
Записан

Gaume
Offline Offline

Пол: Женский
Сообщений: 675



Просмотр профиля
« Ответ #9 : 12 Февраль 2014, 20:14:25 »

Татьяна, спасибо за статью  Улыбка
С нетерпением буду ждать продолжения...
Записан
Valeriya
Offline Offline

Пол: Женский
Сообщений: 1582



Просмотр профиля
« Ответ #10 : 12 Февраль 2014, 20:17:54 »

Танюша, спасибо  дарю цветочек Жду продолжения  Улыбка
Записан
alenaDon
Offline Offline

Сообщений: 115



Просмотр профиля
« Ответ #11 : 13 Февраль 2014, 18:35:10 »

Танюша, спасибо большое!
Ждем продолжения. дарю цветочек
Лично мне еще было бы интересно почитать ваше мнение о простановке ссылок в статье (сколько и куда - на статьи, на рубрики, на главную) и распределении веса.
« Последнее редактирование: 13 Февраль 2014, 18:49:14 от alenaDon » Записан

Многолетняя проверенная партнерка, которая платит честно и принимает молодые сайты (от 100 уников на платном хостинге)
biovi
Offline Offline

Пол: Женский
Сообщений: 21


Оля, ко мне на ты =)


Просмотр профиля
« Ответ #12 : 13 Февраль 2014, 19:45:28 »

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

Девочки, присылайте фото не меньше 300кб каждое и размер не менее 1000 по ширине, благодарю за понимание
Mazajka
Всё-равно свой сайт не брошу. потому что он ХОРОШИЙ!
Offline Offline

Пол: Женский
Сообщений: 7411


Уже и аватарку нельзя поставить, какую хочу...


Просмотр профиля
« Ответ #13 : 13 Февраль 2014, 19:46:09 »

Я раньше тоже вставляла Н2 как раздел, а Н3 как подразделы, например:
Как приготовить ленивые вареники - Н2
Ленивые вареники с вишней - Н3
Ленивые вареники с картошкой - Н3
Ленивые вареники с творогом - Н3
Как подготовить посуду для ленивых вареников - Н2
Это логично, как по мне. Но СЕО_гуру, сказали, что так делать НИЗЯ!!! Только Н1, далее, Н2, и далее Н3-Н6. Теперь буду делать, как раньше, спасибо, Татьяна!
Записан


ingulec
Offline Offline

Пол: Женский
Сообщений: 341


Люблю свою страну, горжусь свои городом.


Просмотр профиля
« Ответ #14 : 13 Февраль 2014, 23:15:18 »

Отличная статья, спасибо  дарю цветочек Подписалась на тему.
А можно вопрос  стеснительный
Мне периодически на почту приходят письма от  мегаиндекс, что-то типа: "для вашего сайта такого-то только что был сделан новый SEO-аудит. Ознакомиться и рекомендациями по устранению ошибок: там-то. Я их обычно игнорирую, а вот сегодня решила посмотреть и первое, что увидела - замечания к Н1  (к нескольким)  Шокирован  Дословно: "количество слов: 8 (уровень проблемы 6)"
Т.е они хотят сказать, что количество слов в Н1 должно быть меньше? А сколько тогда оптимально?
Записан


Зарабатываю 
Страниц: 1 2 3
  Печать  
 
Перейти в:  

| Sitemap