Привіт, шановні читачі!

Якщо ви зараз перебуваєте на даній сторінці, то можна припустити, що ви - початківець блогер, і у вас вже є свій Інтернет-проект і матеріали до нього.

Здавалося б, що фундамент закладений, сайт створений , Статті написані ... Але, не тут то було!

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

Адже ви бажаєте утримати відвідувача на вашому ресурсі?

А щоб він став вашим передплатником / клієнтом?

Відповідь очевидна.

Саме правильне оформлення статей на сайті дасть необхідний результат.

Навіть якщо писати і оформляти їх ви будете не самостійно, а зверніться до копірайтерів з 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. Правила розміщення та оформлення фото на сайті

Якщо ви плануєте прикріпити до вашої статті тільки одну картинку, то її рекомендується розміщувати:

• на початку або в середині статті;
• по лівому краю з обтіканням тексту або ж по всій ширині текстової сторінки.

Чому саме по лівому краю?

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

Якщо ж поставити зображення на початку статті з правого боку, то станеться елементарний збій мозку 😀

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

Але використанням однієї лише картинки в статті мало хто обходиться, і правильно роблять.

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

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

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

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

Це може мати наступний вигляд:

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>.

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

Приклад цікавого і дизайнерського оформлення цитати з прихованим закликом до дії:

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

Це можуть бути:

1. Висновки або витягнуті правила з вищесказаного.
2. Примітки або поради, побічно пов'язані з основної теми статті.
3. Приклади з власного досвіду.
4. Цікаві факти з історії.
5. Заклик до дії, будь то перехід до прочитання іншої статті, придбання Інфокурси або підписка на розсилку статей.

Це далеко не весь перелік варіантів, ваша фантазія здатна підказати вам і інші способи використання цього тега.

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

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

PS: якщо вам потрібен сайт або необхідно внести правки на існуючий, але для цього немає часу і бажання, можу запропонувати свої послуги.

Більше 5 років досвіду професійної розробки сайтів. Робота з PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular і іншими технологіями web-розробки.

Досвід розробки проектів різного рівня: Лендінзі, корпоративні сайти, Інтернет-магазини, CRM, портали. У тому числі підтримка і розробка HighLoad проектів. Надсилайте ваші заявки на email [email protected] .

І з друзями не забудьте поділитися 😉