Обучающая рассылка - Ведение бизнеса в интернете

Выпуск №37. "Большая стирка" Вашего сайта

Вводная часть. Начался "учебный год" Интернет-маркетинга

Здравствуйте, уважаемые клиенты и партнеры Megagroup.ru!

Новый сезон Интернет-маркетингаНаступила осень, а это значит: открывается сезон конференций по SEO, веб-аналитике, SMM.

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

Разумеется, компания Мегагрупп.ру не намерена оставаться в стороне от столь бурных событий. Обещаем по мере появления интересной и полезной для Вашего бизнеса информации делиться ею в будущих выпусках.

Ну а пока займемся вещами более приземлёнными :) 

Чистый код - необходимое условие грамотной оптимизации

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

1. Перенос текстов напрямую из Microsoft Word в систему управления 

Несовпадение стандартов разметкиПериодически наши клиенты сталкиваются с неприятной ситуацией: написав и разметив текст в файле вида .doc, .odt, .rtf, копируют его в редактор страницы сайта и… получают неожиданный (в плохом смысле слова) результат. Строки находятся на разном расстоянии друг от друга, цвета и размеры шрифтов перепутаны, изображения “разъезжаются”. Попытки исправить форматирование средствами текстового редактора TinyMCE, встроенного в систему управления (CMS), только ещё сильнее портят вид страницы. 

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

Причина же кроется в том, что офисные пакеты и редакторы для систем управления используют разные стандарты разметки. Переносить текст напрямую из документа в TinyMCE - то же самое, что пытаться поставить автомобиль на рельсы для железнодорожных вагонов. Возможно, и поедет… но недалеко.

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

Лишние теги при переносе из Word

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

1. Скопируйте статью в “Блокнот” (Notepad).
2. Перенесите текст из “Блокнота” в текстовый редактор.
3. Оформите страницу средствами TinyMCE (инструкции по работе с текстоминструкции по работе с изображениями).
4. Сохраните изменения.

Данной схемы действий следует придерживаться и при переносе контента в редактор писем сервиса рассылки Maliver.

Обратите внимание: если в исходном тексте были символы верхнего или нижнего индекса (например, м2), “Блокнот” сбросит и это форматирование (на выходе получится м2).
Поправить ситуацию можно с помощью специальной кнопки в редакторе (предварительно выделив нужный символ).

Кнопка индекса

 

2. “Красная строка” и центрирование текста с помощью пробела

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

Лишние теги пробелов

Пробелы оставляют лишние теги, “загрязняющие” код. Потому при необходимости выровнять заголовок (или фрагмент статьи) используйте специальные кнопки редактора.

Кнопки выравнивания

Что касается “красной строки” - она в принципе неактуальна в мире веб-технологий. Нет никакой необходимости делать подобные отступы.

Если же для оформления какой-то части статьи необходима “красная” строка, лучше всего сделать это таким образом. 

1) Поставьте курсор в начале абзаца.
2) Нажмите на кнопку “Редактировать CSS стиль”

Редактор CSS стиля

3) Перейдите в закладку “Блок” и установите нужное значение в пункте “Отступ текста”

Установка отступов

 

4) Нажмите “Обновить” и сохраните изменения.
 

3. Попытка изменить параметры основного шрифта средствами визуального редактора

Случается, что по ходу работы с сайтом вебмастера перестают устраивать изначально выбранные размер, цвет и стиль текста. Попытка изменить ситуацию следующая: выделяется весь текст, а потом с помощью TinyMCE выставляются новые параметры. Снаружи все в порядке, а что увидит робот?

Лишние теги при смене основного стиля шрифта

Опять те же лишние теги, затрудняющие нормальную индексацию текста.
Запомните, пожалуйста: менять шрифт с помощью визуального редактора допустимо, если требуется выделить какую-то фразу или предложение (то есть небольшой фрагмент, несколько слов). Если же Вы намерены изменить параметры основного стиля текста, есть два способа:

1) Внести соответствующие правки в файле .css (он находится в директории “Настройки” - “Файлы дизайна”). В этом случае Вам потребуется расширенный доступ к системе управления и, конечно, знание HTML и CSS.

2) Поручить данную работу нашим специалистам (это бесплатно). Пришлите, пожалуйста, письмо (support@megagroup.ru) с указанием, какие размер, тип и цвет (лучше всего оттенок подобрать тут и выслать нам его номер) шрифта нужно установить на Вашем сайте.

Напоследок вспомним ещё раз уроки девятого выпуска

Многие ошибки в оформлении сайта возникают из-за ложного сходства TinyMCE и офисных пакетов. Важно запомнить: если в случае с обычными текстовыми файлами действует принцип “бумага всё стерпит”, то в CMS неправильно выбранные методы корректировки отразятся в коде страницы и будут негативно оценены роботом-индексатором.

Что делать, если владелец сайта уже успел “наворотить” на своём веб-ресурсе лишних тегов? Всё просто: выделите текст страницы и нажмите кнопку “Очистить формат”.

Кнопка очистки формата

Удачи Вам и хороших позиций в поисковой выдаче!

Совет дня. Галерея ссылок на скорую руку

Довольно интересный приём в оформлении страниц - создание так называемой галереи ссылок - ряда картинок с подписями, которые по клику приведут на нужный подраздел. Пример Вы можете увидеть на сайте http://lekus.ru/.

Существуют разные способы создания такого элемента. Рассмотрим наиболее простой, не требующий знания HTML и CSS - таблицу с невидимыми краями.

1. Нажмите кнопку “Добавление/Изменение таблицы”.

Кнопка добавления таблицы

2. Выставьте необходимые параметры. В нашем случае мы делаем галерею из трёх ссылок.

Параметры таблицы

 

3. Нажмите “Обновить”.

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

Кнопка выравнивания

5. Проставьте необходимые ссылки (инструкция по работе с ними).

6. Оцените полученный результат:

Галерея ссылок в невидимой таблице

7. Сохраните изменения.

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

В свете вышесказанного крайне рекомендуем Вам изучить правила работы с таблицами.

Полезные ссылки.
  1. Академия SEO-фитнесаАкадемия SEO-фитнеса: здесь Вы можете прочитать тот выпуск, который пропустили; посмотреть статью в архиве, если не открываются изображения в письме; распечатать то, что нужно иметь под рукой для составления программы ежедневного SEO-фитнеса :)



     
  2. Самоучитель HTML и CSSHtmlbook - самоучитель по работе с HTML и CSS

Хотите получать информацию от лидера рынка и не пропустить что-либо важное?!

Подпишитесь на бесплатную обучающую рассылку!

Отзыв №1728221

очень помогли!!! нашла ответы на многие вопросы и "раскрыли глаза" на создание страницы сайта!!! Спасибо!

Отзыв №1728021

Спасибо за обзоры))) очень информативно, решпект!

Отзыв №1727821

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

Отзыв №1727621

первый раз дочитал до конца, спасибо ! :)

Отзыв №1727421

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

Отзыв №1727221

Форматирование мелочь, а оказывается нет. Спасибо, а то раньше мучался!

Отзыв №1727021

Ваши статьи нам очень нравятся, всегда ждем с нетерпением новых советов от Мегагруп!

Отзыв №1726821

Спасибо за полезную информацию. Лично у меня не получаются красивые таблицы. Сделайте, пожалуйста, еще рассылку как правильно и грамотно создавать таблицы в редакторе. Многие, в том числе и я, будут благодарны. Спасибо.

Отзыв №1726621

Побольше интересных уроков!

Отзыв №1726421

Выпуск супер!!! Ждем следующий!!!

Оставить отзыв


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

    ООО "ВИТАЛ-ОПТИМ"
  •  Спасибо за Вашу работу, за Ваше понимание, успехов Вам в дальнейшей деятельности. Очень рад, что выбрал именно Вашу компанию. Рекомендую Вашу компанию всем своим друзьям и компаньонам.

    Владимир. Юридическое агентство
  • Очень нравится работа компании Мегагрупп - всегда подскажут, помогут, очень много информации по настройкам сайта и прочее, рассылки по продвижению, различные подсказки и советы - все, что необходимо для тех, кто недавно в сети. Огромная благодарность от компании Best-Gate!

    Компания Best-Gate