Как оформить статью на сайте: шпаргалка для начинающих

Автор: | 25.07.2016

oformlenie-statej-na-sajteЗдравствуйте, уважаемые читатели!

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

Казалось бы, что фундамент заложен, сайт создан, статьи написаны… Но, не тут то было!

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

Вы ведь желаете удержать посетителя на вашем ресурсе?

А чтобы он стал вашим подписчиком/клиентом?

Ответ очевиден.

Именно правильное оформление статей на сайте даст требуемый результат.

Даже если писать и оформлять их вы будете не самостоятельно, а обратитесь к копирайтерам с eTXT, приведённые далее рекомендации будут вам всё равно полезны.

Используйте изложенные ниже требования в качестве инструкции по правильному оформлению статей на сайте при выдаче заказа, а также при его приёме — и высокие позиции в поисковой выдаче Google и Yandex вам обеспечены, т.к. поисковики обращают пристальное внимание на данный фактор.

Но не только поисковые системы так требовательны к оформлению ресурсов. Пользователи тоже обращают на это немалое внимание: красивое оформление статьи позволит вам не только задержать их на вашем сайте, но и вызовет желание обязательно посетить Вас снова в будущем :-)

Надеюсь, мне удалось вас немного замотивировать уделять время оформлению статей на сайте.

А теперь мы как раз рассмотрим, что нужно для этого сделать.

Что такое контент для сайта и как его оформить?

Контентом сайта является вся та информация, которая на нем размещена, а именно:

  • авторский текстовый материал;
  • графические и анимационные изображения;
  • видеоролики.

Также к контенту отдельной статьи можно отнести цитаты известных личностей, вырезки из научных публикаций, интересные факты.

Все эти составляющие имеют свои особенные правила в оформлении их на сайте, которые и будут подробно рассмотрены далее.

Как правильно оформить текст на сайте?

Начнем с самого главного контента на странице веб-сайта — текста.

Итак, перечислим основные правила оформления текста на сайте:

  1. Оптимальный размер шрифт текста для сайта/блога — 14-16 px.
    Именно такой размер шрифта хорошо воспринимается среднестатистическим читателем.
  2. Шрифт без засечек (типичный пример такого шрифта — Arial, с засечками – Times New Roman).
    Засечки «нагромаждают» текст, как-бы утяжеляя его для человеческого глаза.
    Поэтому от такого шрифта рекомендуется отказаться.
  3. Обширный материал разделяется на части с использованием тематических подзаголовков.
  4. Выделение подзаголовков статьи тегами H2…H6 (учитывая структуру статьи).
  5. Размер шрифта подзаголовков должен отличаться от шрифта основного текста на 4-6 px (к примеру, 18-20 px).
  6. Цвет подзаголовка может отличаться от цвета основного текста (к примеру, быть оформленным в стиле основных цветов дизайна веб-сайта).
  7. Отступ между абзацами – обязательное условие красивого оформления текста на сайте.
  8. Чем меньше объем абзаца (количество строк в нем), тем лучше.
    Данная рекомендация исходит из психологических особенностей человека.
    Нам кажется, что чем быстрее наш взгляд перейдет на следующую строчку, тем быстрее мы закончим чтение данного материала.
    Поэтому не стоит нагромождать статью огромными абзацами с нескончаемым потоком мыслей или фактов.
    4-5-ти строк на один абзац будет более чем достаточно.
    А 2-3 строчки – будет еще лучшим решением (особенно это касается повествовательных статей).
  9. Выделение жирным шрифтом, курсивом или подчеркиванием важных моментов в тексте воспринимается пользователем на «Ура».
    Именно на такие отличительные от всего текста слова и фразы в первую очередь падает взор человека.
  10. Использование списков в статье считается хорошим тоном и уважением к читателю.
    Перечисление каких-либо позиций в нумерованных и маркерованных списках упрощает восприятие информации пользователем, и она лучше запоминается.
  11. Гиперссылки должны выделяться в тексте другим цветом или подчеркиванием.
    При оформлении внутренней ссылки необходимо помнить про правило 3-х цветов в дизайне сайта, то есть оформить ссылку на статью на сайте одним из этих трех цветов.
  12. Рекомендуемое количество линков (гиперссылок) для одной статьи на 8-10 тыс.символов без пробелов – 5 штук.
    Для большего числа переходов по ним, их нужно равномерно распределить по тексту, а не «тулить» все в одном абзаце.
  13. Если в материале имеются сравнительные характеристики позиций двух и более рассматриваемых объектов, то есть смысл оформить эти данные в форме таблицы.
    Это упростит и ускорит процесс понимания читателем представленной информации.
  14. Шуточные моменты или сатирические высказывания в статье уместно подкрепить улыбчивым/подмигивающим смайликом.
    Это разбавит текст и придает ему настроение.
    А для научных материалов использование «рожиц» не приемлемо.
  15. Использование тега <blockquote> допустимо не только в оформлении цитаты известного человека.
    Им можно выделить отдельный ключевой момент из текста, примечание или же привести факт из жизни, истории и т.д.

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

О том, каким должен быть сам текст статьи и его содержимое, опытные копирайтеры и блоггеры со стажем непременно должны быть в курсе.

Но, если вы только начинаете пробовать свои силы в блоггинге, то вот вам несколько советов, как правильно писать SEO-статьи для их успешного продвижения в интернет-паутине:

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

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

Как красиво оформить статью на сайте при помощи изображений?

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

Поэтому без картинок в статьях никак не обойтись. И чтобы правильно оформить статью на сайте, обратите внимание на следующие 2 момента.

1. Правила размещения и оформления фото на сайте

Если вы планируете прикрепить к вашей статье только одну картинку, то ее рекомендуется размещать:

  • в начале или середине статьи;
  • по левому краю с обтеканием текста или же по всей ширине текстовой страницы.

Почему именно по левому краю?

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

Если же поставить изображение в начале статьи с правой стороны, то произойдет элементарный сбой мозга 😀

Размещая изображение по всей ширине страницы, вы ничем не рискуете. Главное, не делайте ее слишком большой по высоте, дабы она не отражалась на весь экран у пользователя.

Но использованием одной лишь картинки в статье мало кто обходится, и правильно делают.

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

Размещать картинки по тексту в статье можно:

  • с левого и с правого края, чередуя их, как на шахматной доске (но начинать всегда слева)
  • только с левого края;
  • только по ширине страницы;
  • по ширине страницы и с чередованием небольших картинок слева и справа.

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

Это может иметь следующий вид:

primer-oformleniya-tablicy-s-izobrazheniyami-na-sajte

2. Уникальность изображений

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

Как это сделать, если нет возможности создать своими руками единственную и неповторимую картинку (фото)?

Способ первый — Фотошоп спешит на помощь. :-)

Если вы нашли в Интернете подходящие для вашего материала изображения и желаете именно их разместить в статье, то этот способ для вас.

Представляем вам пошаговое руководство, как из картинки, найденной в сети, сделать уникальное изображение:

  1. Создать в Фотошопе новый файл необходимого размера и разрешения, выбрать прозрачный фон;
  2. Поместить в этот пустой файл нужное изображение, при необходимости подрезать.
  3. Произвести процесс «колдовства» над картинкой:
    • отразить ее по горизонтали;
    • повернуть под угол на несколько градусов (можно и больше),
    • выполнить цветокоррекцию;
    • замазать ненужные надписи (если таковые имеются).
  4. Сохранить полученное изображение через команду «Файл – Сохранить для Web…» В открывшемся окне выбрать формат jpg и качество 65-80% (ориентируясь на содержимое картинки, если имеется много мелких деталей — ставить 80%).
  5. Прописать название файла латинскими буквами.

Способ второй – поискать подходящие картинки на фотостоках.

Фотостоки – это такие базы хранения фотографий различных фотографов, которые выкладывают свои работы для использования их различными сервисами и компаниями в своих целях. Они бывают двух видов: платные и бесплатные.

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

Поэтому представляем вам список бесплатных баз фотографий:

  1. firestock.ru
  2. pixabay.com
  3. freerangestock.com
  4. flickr.com
  5. stockvault.net
  6. pexels.com
  7. lifeofpix.com
  8. morguefile.com
  9. photogen.com
  10. stocksnap.io

Поблагодарите нас, нажав на кнопочки соц. сетей под статьей 😉

Оформление контента сайта – видеоролика

Наличие видеоролика в теле статьи в данное время стало уже практически обязательным условием при ее оформлении.

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

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

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

Вот такая вот неоценимая польза от внедрения видеоплеера в статьи на вашем блоге! И грех этим не воспользоваться!

К тому же видеоролик, прикрепленный к вашей статье, вовсе и не должен быть уникальным.

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

Вообще утопия получается :-)

Но если своего канала у вас нет, не отчаивайтесь. На помощь вам придут чужие видеоролики, коих огромное количество и на YouTube, и на других видео-хостах.

Давайте рассмотрим, как поместить чужое видео с наиболее популярного на сегодня видео-хостинга — YouTube, на свой сайт. Для этого вам нужно:

  1. Открыть требуемый видеоролик на YouTube и под плеером нажать на кнопочку «Поделиться».
  2. Далее перейти на вкладку HTML-код.
  3. Скопировать отобразившийся код и вставить его в текстовый редактор статьи.

Также вам будет нужно установить желаемые размеры (ширину и высоту) для видеоплеера. Для этого просто измените числа в параметрах width и height.

Чтобы сделать отражение видеоплеера по всей ширине страницы задайте значение параметру width  — 100%, а с параметром height поэкспериментируйте.

А вот вам и видеосюжет о том, как разместить видео с YouTube на ваш сайт :-)

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

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

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

И зачем вы тогда старались, тщательно отбирая и анализируя изложенный материал?

Так что при оформлении статьи на блоге 100 раз подумайте, прежде чем разместить видеоролик где попало. Вам ведь нужна от него максимальная отдача!

Цитаты в оформлении статьи сайта

Такой элемент, как цитата, обычно оформляется на сайте с помощью тега <blockquote>.

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

Пример интересного и дизайнерского оформления цитаты со скрытым призывом к действию:

primer-oformleniya-citaty-na-sajte

Тег <blockquote> имеет свой отличительный стиль от всего текста и поэтому в него можно поместить элементы, которые вы хотите выделить в своем материале.

Это могут быть:

  1. Выводы или извлеченные правила из вышесказанного.
  2. Примечания или советы, косвенно относящиеся к основной теме статьи.
  3. Примеры из собственного опыта.
  4. Интересные факты из истории.
  5. Призыв к действию, будь то переход к прочтению другой статьи, приобретение инфокурса или подписка на рассылку статей.

Это далеко не весь перечень вариантов, ваша фантазия способна подсказать вам и другие способы использования этого тега.

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

А чтобы быстрее индексировались страницы вашего сайты, можете размещать ваши посты вот в этом каталоге.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
26 голосов, в среднем: 4.7 из 5

4 комментария к статье "Как оформить статью на сайте: шпаргалка для начинающих"

  1. андрей

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

  2. Дмитрий Ушаков

    Спасибо! Узнал о фотостоках, думаю это очень облегчит мне работу над моим сайтом!

  3. Rafael

    Если не умеешь рисовать, купи картинку за доллар на шатерстоке, там есть все….времени потратишь 10 минут, что окупит твои затраты…

  4. kinogrant

    Очень полезная статья, мне помогла! Спасибо вам

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *