Сокращение отступа между абзацами
Вступительный текст для материалов блога
Любой материал должен не только содержать необходимую информацию, интересную и нужную для пользователя, но и иметь хорошее оформление, что называется "радующее глаз", однако при этом важно не перестараться, иначе вы можете получить обратный эффект.
Возьмём, к примеру, использование "гифок" – gif-изображений. Такие изображения очень неплохо смотрятся, особенно, если качественно и с умом сделаны, хорошо и со смыслом продуман "сюжет", а не просто что-то моргает на экране. С помощью таких изображений можно привлечь внимание, а можно и наоборот, оттолкнуть, вызвать неприятные ощущения при просмотре страницы, и зависит это не только от содержания: если "гифок" на странице много, то это больше мешает, раздражает глаз, поэтому сильно увлекаться такими изображениями не стоит.
Стиль оформления текста
Когда вы создаёте текст для сайта, то надо стараться выдержать все элементы в определённом стиле. Некоторые стили являются общепринятыми; в первую очередь это касается оформления ссылок – принято всегда их отображать синим цветом (большинство редакторов делают это автоматически) и если вы вдруг решите их "перекрасить", например, в красный, то редактор вам это сделать позволит, но пользователи могут вас не понять, так как уже все давно привыкли к синему цвету.
Большинство элементов оформления текста вы определяете сами. Текст должен легко читаться, а значит, разбит на абзацы, не иметь орфографических и пунктуационных ошибок. Некоторые слова или фразы, имеющие особое значение, можно выделить жирным начертанием, курсивом, подчёркиванием; определённый текст (например, формулы или строки кода) может быть выделен цветом (как на этом сайте!), но не забывайте, что если такого рода текст встречается на других страницах, то он тоже должен иметь такой же цвет.
Сокращение отступа между абзацами
При необходимости отступ, который система автоматически делает между абзацами, можно убрать, т.е. расстояние между определёнными абзацами сделать таким же, как и между строками. Так как делается это в редакторе кода страницы, то вы должны знать основы HTML-разметки, поэтому здесь мы не будем подробно рассматривать этот вопрос. Подробно о коде страницы вы можете отдельно прочитать и изучить в разделе "Языки программирования: HTML".
Оформление изображений
Изображения на страницах сайта должны быть как минимум качественными, хорошо понятными (пользователь не должен ломать голову над тем, что же здесь изображено). Очень важная деталь: все изображения должны быть оригинальными, т.е. копировать изображения с других сайтов, брать изображения из интернета нельзя. Во-первых, этим вы нарушаете авторские права тех, кто создал эти изображения (обращения в суд за это пока ещё никто не отменял!), во-вторых, поисковики это сильно не приветствуют и за такое "пиратство" ваш сайт, как минимум, будет понижен в выдаче, а как максимум – ваш сайт вообще будет удалён из выдачи. А в-третьих, пользователь, который видит одни и те же изображения на разных сайтах, теряет доверие к таким сайтам, потому, что на хорошем сайте всё должно быть в оригинале. Кстати, это касается и текстов!
Как оформлять изображения – решать вам. Например, здесь, как видите, все изображения оформлены в рамочки и имеют подписи, а изображений здесь не мало! Но зато смотрятся такие изображения намного приятнее, да и создание рамочек и подписей не занимает много времени: при правильно настроенном редакторе и небольшом имеющемся опыте это занимает всего около 30 секунд.
Изображения, которые автоматически вставляются системой в начале материала слева или справа от текста (в редакторе они не отображаются), настраиваются в менеджере материалов на вкладке "Изображения и ссылки". Здесь можно загрузить изображение для:
- вступительного текста (блог материалов);
- для полного текста материала.
Это может быть одно и тоже или разные изображения. Так же для таких изображений можно:
- выставить вариант выравнивания (слева или справа);
- альтернативный текст, который будет выводиться в случае, если изображение по каким-то причинам не может быть выведено;
- заголовок – текст под изображением.
Вставлять или нет такие изображения в начале статьи – решать вам, но имейте ввиду, что смотрится это довольно привлекательно (посмотрите в начало этой статьи - здесь применено gif-изображение)!
Вступительный текст для материалов блога
Как уже говорилось в главе 12, материалы на странице блога могут быть представлены в виде заголовков, а могут отображать некоторый текст, который называется вступительным. Этот текст может быть частью самого материала, но исключительно от начала до определённого места, а может быть написан отдельно и не отображаться на странице полностью открытого материала.
В качестве разделителя используется кнопка "Подробнее…":
Сначала в самом верху пишется вступительный текст, который может быть выполнен любым другим шрифтом, затем курсор ставится на конец текста и нажимается кнопка "Подробнее"; в результате текст будет отделён разделительной чертой. Далее всё зависит от того, какое значение будет выставлено в поле Вводный текст на вкладке Отображение в материале.
Если будет установлено значение "Скрыть", то вводный текст будет отображаться только на странице блога и скрываться при выводе полного материала, что намного удобнее.
Если останется значение "Показать" (установлено по умолчанию), то вводный текст будет выведен и на странице блога материалов, и при выводе всего материала. В этом случае вводный текст не прописывается отдельно вверху материала, а просто отделяется разделительной чертой в основном тексте, что не очень-то удобно. Во-первых, вы в этом случае сможете отделить только целый абзац. Во-вторых, оформление текста для блога останется таким же, как и для основного материала. В-третьих, в этом случае нельзя сделать ссылки на якоря в начале статьи.
В результате произведённых действий (не забудьте сохранить!) страница блога будет выглядеть так:
Как видите, помимо заголовка и вводного текста здесь присутствует кнопка > Подробнее . Эта кнопка настраивается в менеджере меню (редактирование пункта) на вкладке Отображение. Вы можете убрать заголовок с этой кнопки или вообще убрать саму кнопку (поля Показывать "Подробнее" и Убрать заголовок из "Подробнее"). Если кнопки убрать, то блог станет таким:
На этой же вкладке при необходимости вы можете убрать всю лишнюю информацию со страницы (автор, просмотры и т.д.); пр этом не забудьте, что все внесённые изменения будут касаться всех материалов данного блога.
Так же вы можете добавить изображения к вступительному и основному тексту (об этом было сказано выше), это всё делается исключительно на ваше усмотрение!
Кнопки "Вперёд" и "Назад"
И ещё об одной настройке, расположенной во вкладке Отображение или Параметры страницы (в зависимости от типа пункта) менеджера редактирования меню: поле "Навигация".
В конце каждой страницы, когда материал полностью открыт, находятся кнопки "Назад" и "Вперёд", которые позволяют переместиться к предыдущему или следующему материалу соответственно. Эти кнопки можно скрыть (выставить в этом поле соответствующее значение), а вместо этих довольно непривлекательных кнопок создать свои, как это сделано на данном сайте.
Создание кнопок в материале
При необходимости вы можете создать кнопку в любом месте материала. Для этого вы можете либо внести соответствующие изменения в код страницы, что требует знания языка HTML, либо прямо в текстовом редакторе поместить изображение кнопки и привязать к нему соответствующую ссылку (к любому изображению, так же как и к тесту, можно привязать ссылку).
На этом сайте в конце каждой главы имеются кнопки перехода к следующей; рассмотрим подробно как это сделано.
Ничего сложного здесь нет! Сначала в отдельном редакторе были созданы изображения всех кнопок, затем эти изображения были в вставлены в конце каждой главы с выравниванием по правому краю. Далее эти изображения были сделаны соответствующими ссылками на следующую страницу, по тому же принципу, как делается ссылкой слово или часть текста (см. главу 11, "Создание якорей и ссылок"):
Вставка маленьких рисунков
Помимо больших изображений текст можно красиво дополнить небольшими рисунками, например, для обозначения некоторых абзацев, содержащих определённую информацию. Такие рисунки вставляются точно так же, как и большие, но ориентируются не по центру, а по левому краю и имеют небольшой размер, что позволяет рядом разместить определённый текст. Это выглядит красиво, и в то же время указывает на тип содержащейся в абзаце информации (рис.147):
И последнее, что осталось сделать – прописать правильную информацию в мета-тэгах, так как от этого зависит индексация страниц поисковиками, но для начала несколько слов о том, что такое мета-теги.
В коде страницы, который, кстати, вы можете просмотреть в любой момент при помощи комбинации "быстрых" клавиш Ctrl + U, вы можете увидеть большое количество тегов, составляющих основу этого кода. Теги определяют элементы страницы, классы и многое другое; любая строка в коде начинается и заканчивается тегами (закрывающий тег в некоторых случаях не используется). Все теги в коде записываются так: <тег> (открывающий) и </тег> (закрывающий).
Мета-теги не определяют каких-либо элементов, их задача несколько иная. Все три мета-тега, о которых идёт речь ниже, располагаются на вкладке Публикация. На этой вкладке при необходимости можно выставить дату начала и окончания публикации, псевдоним автора и т.д., но основными и важными настройками здесь являются мета-теги.
Мета-тег Robots
Этот мета-тег определяет, как роботы поисковиков будут работать со страницей:
- По умолчанию – используются настройки, заданные для всего сайта (Система > Общие настройки);
- Index, follow – индексировать и переходить по ссылкам;
- No index, follow – не индексировать, но переходить по ссылкам;
- Index, no follow – индексировать, но не переходить по ссылкам;
- No index, no follow – не индексировать и не переходить по ссылкам.
При помощи этого мета-тега можно запретить или разрешить индексирование страницы и всего сайта в целом, а так же переход по ссылкам; соответственно, от этой настройки зависит, будет ли находится страница в выдаче или нет.
Какие страницы должны быть в выдаче, а какие не должны индексироваться? Конечно же, все основные материалы сайта должны быть проиндексированы, поэтому для них должно быть выставлено значение Index, follow. Материалы, которые содержать различную дополнительную или техническую информацию (например, формы обратной связи, контакты, дополнительная информация о сайте и так далее), как правило, не должны появляться в поиске, поэтому для них нужно выставить значение No index, no follow; ко всему прочему, это ускорит индексацию сайта. В некоторых конкретных случаях можно воспользоваться двумя другими вариантами или оставить значение По умолчанию.
Имейте в виду, что если для всего сайта будет выставлено значение No index, no follow, то независимо от значений, выставленных на страницах, индексация производиться не будет!
Не забывайте проверять эти значения как на страницах, так и общих настройках сайта!
Мета-тег Description
Этот мета-тег является не обязательным. В нём содержится краткое описание содержимого, которое поисковики могут показывать вместе со ссылкой на вашу страницу, однако наличие этого текста не гарантирует, что именно он будет выведен в качестве такого описания. При составлении такого текста лучше всего брать отрывок из самого материала, иначе если этот текст и содержание страницы будут разными, поисковик может принять такое различие за клоакинг (да, да, именно так это называется!). Этим словом обозначается ситуация, когда описание не соответствует содержимому страницы и из-за этого страница может быть удалена из выдачи.
Мета-тег Keywords
В этом мета-теге через запятую указываются ключевые слова, которые могут использоваться в поиске. По этим словам, а так же по содержанию самого материала роботы определяют соответствие этого содержимого поисковым запросам пользователей. Поэтому при составлении этого мета-тега, а так же текста материала старайтесь, что бы такие слова и фразы (соответствующие запросам) обязательно присутствовали, но не перестарайтесь: при большом переполнении такими словами и фразами вы можете добиться обратного эффекта и страница в лучшем случае не попадёт в выдачу (а в худшем - весь сайт) так как система посчитает, что вы специально составили текст под запросы пользователей для привлечения трафика к сайту.
Просмотреть наиболее часто встречающиеся запросы пользователей по вашей теме вы можете по адресу wordstat.yandex.ru.
Вот и всё! Теперь нужно применить полученные знания на деле и качественно оформить все материалы создаваемого сайта, после чего можно приступить к следующему этапу: загрузке модулей, плагинов и компонентов.
