Пишем сайт: Создание веб-сайта. Курс молодого бойца / Хабр

Содержание

Создание веб-сайта. Курс молодого бойца / Хабр

Как-то меня попросили провести небольшой семинар в лицее, где я когда-то учился, по созданию веб-сайта. В процессе написания речи я подумал, что она может вылиться в материал, который, возможно, будет полезен многим начинающим в области веб-дизайна, вёрстки веб-страниц и пр. Я не претендую на истину в первой инстанции и всё изложенное носит чисто личностный взгляд на работу с дизайном и кодом. Статья даёт поверхностный взгляд на понятия и средства, которые, на мой взгляд, могут стать неплохим стартом для того, кто готов идти дальше.

Условно процесс создания сайта (web-проекта) можно разделить на 3 этапа:

Данный этап можно разделить на несколько подэтапов:

Создание идеи

Разработка структуры проекта

Проработка макета проекта

Создание идеи

На данном этапе нам необходимо определиться с тематикой проекта (сайта, сервиса). Далее, в соответствии с выбранной темой, необходимо собрать соответствующие материалы: текстовые, графические.

Разработка структуры проекта

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

Проработка макета проекта

После того, как мы определились со структурой проекта можно составить макет проекта (схематично).

Для отрисовки наброска можно использовать бумагу и ручку, Photoshop, любой другой редактор графики (раньше часто использовали Adobe Fireworks). Важно отметить, что данный этап – это не отрисовка готового дизайн-макета, а всего лишь схематичный набросок, выполненный для понимания того, как на сайте будут располагаться основные информационные блоки, графика и прочие элементы дизайна.

Основные элементы страницы

Зачастую основными элементами страницы являются:

содержащий блок (wrapper, container)

логотип

навигация

контент

футер (нижний колонтитул)

свободное пространство

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

Содержащий блок (контейнер)

Роль контейнера на странице может выполнять непосредственно элемент body или же div. Ширина содержащего блока может быть резиновой (fluid), а может быть фиксированной (fixed).

Логотип

Текстовая или графическая составляющая проекта и выделяющая его среди других. Логотип чаще всего располагается в верхнем левом углу страницы или же посередине (в зависимости от идеи, макета).

Основная навигационная панель содержит ссылки на основные разделы сайта. Навигационная панель часто располагается в верхней части страницы (в независимости от того вертикально или горизонтально располагаются элементы навигации).

Контент

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

Нижний колонтитул (footer)

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

Резиновый и фиксированный макет

Фиксированный макет

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

Резиновый макет

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

В данном контексте стоит уяснить такие понятия, как отзывчивый веб-дизайн (Responsive Web Design aka. RWD) и адаптивный веб-дизайн (Adaptive Web Desing aka. AWD). Первое понятие укладывается в концепцию «резинового» и означает, что при изменении размера экрана ваш сайт подстраивается под него, второе понятие подразумевает, что при разработке вы определяете основные разрешения (размеры экрана), под которые будет подстраиваться (адаптироваться) ваш контент. В обоих случаях следует разрабатывать не один, а несколько макетов, которые будут соответствовать разным разрешениям экрана. Часто создаётся 3 макета под разрешения iPhone (Android Phone), iPad (Android Tablet) и Desktop.

На данном изображении показаны оба подхода. Сверху блок «отзывается» на любые изменения размера контейнера, снизу «адаптируется» под определённую ширину

Полезные ссылки по теме:

Почему при «резиновом» дизайне создаётся несколько макетов, а не используется один?

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

Модульная сетка

Перед составлением схемы проекта так же необходимо уяснить понятие модульной сетки. Модульная сетка подразумевает под собой разделение страницы на отдельные колонки по вертикали и выстраивание контента, при разработке дизайн макета, именно по этой сетке.

Наиболее популярной системой является модульная сетка 960 Grid System (http://960.gs), которая максимально делит страницу на 12, 16 и 24 колонки. Максимум в ширине сетка имеет 960 пикселей. Данное решение основано на том, что большинство современных мониторов, на момент создания сетки, имели разрешение не меньше 1024 на 768 пикселей. Создание макета на основе данной сетки, в дальнейшем, поможет ускорить процесс разработки (вёрстки).

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

Модульная сетка 960GS отвечает концепции «фиксированного» дизайна, для «резинового» дизайна можно обратить внимание на адаптацию этой же сетки на сайте http://www.designinfluences.com/fluid960gs/ или воспользоваться сеткой, которую предлагает фрэймворк Bootstrap (http://getbootstrap.com/css/#grid).

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

Модульная сетка, по сути, – это некая визуальная абстракция, визуальное деление страницы на равные по ширине столбцы с равными отступами между ними. Визуализировать данную модель можно посредствам направляющих или отдельного слоя, на котором будут изображены эти столбцы. Именно такое решение вы найдёте в шаблонах сетки 960gs.

Полезные ссылки и материалы:

Макеты веб-страниц

Среди всего многообразия составления макета веб-страницы можно выделить четыре наиболее распространённых:

Навигация в левом столбце

Навигация в правом столбце

Навигация в трёх столбцах

Горизонтальная навигация. На данном этапе сайты с таким типом навигации составляют большинство. Удобство такого подхода легко объяснить тем, что в данном случае у нас остаётся больше пространства для контента, составляющего наш сайт.

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

На первых двух сайтах можно посмотреть какие цвета использовались в дизайне.

Mobile First

С учётом тенденций последних лет данный подход плотно занимает свою нишу в разработке и дизайне сайтов. Тенденция такова, что практически около 60% пользователей интернета используют для доступа в сеть мобильные устройства, поэтому правилом хорошего тона становится разработка не только десктопной версии сайта, но и мобильной версии. При использовании данного подхода разработка макета сайта, дизайна и вёрстки начинается с мобильной версии, а затем уже прорабатываются макеты для других разрешений: добавляются блоки, баннеры, дополнительные элементы дизайна и пр.

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

Усвоив всё вышесказанное можно переходить к следующему этапу – Дизайн.

После создания макета проекта можно переходить непосредственно к созданию дизайн-макета. На данном этапе начать стоит с определения цветовой гаммы проекта.

Один из способов определения основного цвета в проекте – это составление mood board. Для этого необходимо выписать себе все синонимы, связанные с темой проекта, а затем каждый синоним набрать в поиске по картинкам Google или Yandex. На основе найденных изображений выписать себе цвета, которые чаще всего встречаются на них (каких цветов больше). Найденные цвета будут составлять визуальное восприятие нашего проекта и вызывать у пользователя соответствующие чувства.

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

Color Scheme Designer 3 (http://colorschemedesigner.com/csd-3.5/). Помимо выбора цветовой схемы данный сервис позволяет посмотреть пример того, как выбранные цвета будут смотреться на сайте

Adobe Color CC (https://color.adobe.com/ru/). Данный ресурс, в отличие от Color Scheme Designer 3, позволяет создавать палитры ещё и на основе загруженных изображений (которые, например, могли появиться у нас на этапе составления mood board). Так же данный сервис обладает большим архивом палитр других пользователей.

COLORlovers (http://www.colourlovers.com/). Обширное сообщество, где можно подобрать различные палитры.

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

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

Элементы Call to Action

Понятие призыва к действию относится к интерактивным элементам сайта: кнопки, баннеры и пр. Данные элементы оформляются таким образом, что пользователю должно хотеться непременно на них нажать. Например, это может быть кнопка с призывом к действию (Нажми, Купи, Сэкономь), яркий баннер с заманчивым предложением, яркой картинкой и пр.

Данное понятие хорошо вписывается в принцип AIDA (Attraction Interest Desire Action).

AIDA

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

Привлечение внимания

Интерес

Желание

Действие

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

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

Схема просмотра страницы

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

Визуальные направляющие

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

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

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

Фрэймворки

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

Bootstrap

Foundation

Material Design Lite

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

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

_{Готовые элементы дизайна из Bootstrap, Foundation и Material Design Lite (MDL)}

Трэнды

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

Во-первых, стоит упомянуть о так называемых лэндинговых страницах, которые подразумевают под собой длинную страницу, разделённую на соответствующие секции и знакомящие пользователя с основным контентом сайта. Часто лэндинг является единственной страницей, на которой сразу удаётся показать всю необходимую информацию, не заставляя пользователя переходить по страницам. Лэндингам обычно сопутствует хороший дизайн, выверенная и продуманная подача информации, элементы call-to-action, интерактивность (счётчики, анимация и пр.).

Стоит так же сказать о внешнем виде страниц и вспомнить такие понятия как скевоморфизм и плоский дизайн.

Скевоморфизм

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

Плоский дизайн

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

Не маловажную роль на тренды в веб-дизайне оказало развитие мобильных операционных систем. Чаще всего двигателем прогресса становятся решения от компании Apple, которая в своих дизайн-решениях iOS сначала использовала имитацию реальных объектов, а затем всё упростила до плоского дизайна (Flat UI). Сейчас в вебе главенствует Flat дизайн и Material дизайн, который активно развивает Google.

Неплохой сайт-сравнение двух концепций: http://www.flatvsrealism.com/

По основам веб-дизайна и прототипированию неплохим подспорьем может стать данная книга: Джейсон Берд: Веб-дизайн. Руководство разработчика.

Итак, процесс дизайна макета страницы плавно перетекает в процесс «оживления» сделанного на предыдущих этапах. Прежде чем сразу начинать писать HTML, CSS и JS стоит немного поговорить о редакторах кода и структуре проекта.

Редакторы кода

Из наиболее популярных редакторов кода на сегодня можно выделить три:

От части, все эти редакторы похожи по принципу работы, когда при установке мы получаем редактор, в который затем можем «доставить» необходимые модули и плагины, так сказать, «редакторы на стероидах». Разница лишь в технологиях, которые были использованы при написании редакторов, если Sublime Text написан при помощи C++ и Python, то 2 других используют JavaScript, HTML, CSS (Less). За счёт этой разницы Sublime Text может работать чуть быстрее своих коллег.

Существуют так же более продвинутые IDE (студии) такие, как Web Storm, PHP Storm и пр., но для вёрстки проекта вполне подойдёт редактор кода, а не целая студия (IDE).

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

Обзоры текстовых редакторов:

Структура проекта

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

Лучше всего отдельные категории файлов помещать в свои папки: картинки в папку images или img, css в папку css, javascript в папку js. В корне будет лежать только index.html и страницы сайта, либо только index.html, а страницы в отдельной папке pages. Соблюдая эти правила вы никогда не запутаетесь в проекте.

Так же стоит сказать и об именовании файлов проекта. Чаще всего применяются следующие имена: главная страница – это index.html, стили проекта styles.css, скрипты scripts.js или app.js, минимизированные версии файлов имеют префикс .min, картинки носят не пространные названия на русском языке или набора цифр, а отражают то, что на них изображено, например, button.png, download-icon.png, logo.png и т.д.

Работа над проектом

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

Учитывая вышесказанное, мы можем условно разделить работу над проектом на следующие этапы:

Написание HTML

Сейчас при написании HTML кода уже смело можно использовать тэги и элементы разметки, которые появились вместе с стандартом HTML5, если вам необходимо поддерживать старые браузеры, то можно использовать, например, плагин html5shiv (

https://github.com/afarkas/html5shiv

), который обеспечивает поддержку новых стандартов в старых браузерах или библиотеку Modernizr (

https://modernizr.com/

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

При вёрстке сайтов в настоящее время, априори, используется блочный подход, никаких таблиц, iframe’ов и пр. Таблицы выполняют только свою прямую роль – представление информации в виде таблицы. В вёрстке таблицы используются лишь при работе с электронными письмами.

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

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

Правила именования классов

В проекте во всём должен быть порядок: от структуры проекта до имен классов, разметки и написания кода. Если при разметке важно следить за типом информации и размещением её в соответствующих блоках (заголовок, список, ссылка, строчный элемент, параграф и пр.), то при именовании классов и идентификаторов важно соблюдать здравый смысл. Классы должны давать абстрактное понятие о блоке, к которому они относятся, чтобы код было легче читать, а затем и писать стили. В принципе здесь не должно быть ничего сложного, если мы размечаем меню, то логично содержащему блоку дать класс .nav или .navigation, если это блок с текстом, то можно дать ему класс .block-text и т.д.

БЭМ

На сегодняшний день есть один популярный подход, который касается принципов построения проекта в целом, но на данном этапе нас интересует именно именование классов. Подход называется

БЭМ

и расшифровывается, как

Блок Элемент Модификатор

Вкратце можно описать данный подход, как некое соглашение по именованию классов и представлению разметки страницы. Каждый элемент страницы являет собой сущность, которая может существовать независимо от контекста, тогда мы говорим о Блоке (.block) или же только в контексте другой сущности, тогда мы говорим об Элементе (.block__element). Каждый Блок или Элемент могут иметь различные модели представления: цвет, форму, прозрачность и пр. За подобные свойства будет отвечать Модификатор (.block__element_mod).

Таким образом мы представляем наш код, как композицию блоков, элементов и их модификаций.

Более полная информация о методологии: https://ru.bem.info/

SMACSS

Так же существует подход

SMACSS

(расшифровывается данный акроним как Scalable and Modular Architecture for CSS – Масштабируемая и Модульная Архитерктура для CSS), который разделяет понятие о классах и разметке на несколько уровней: базовый, макет, модуль, состояние, тема.

К базовому уровню будет относиться всё, что касается непосредственно тэгов html.

К уровню макета мы будем относить всё, что касается основных составляющих страницы: секции.

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

Уровень Состояние описывает как будут выглядеть модули и секции в том или ином состоянии: отображаются или не отображаются, сжатые или раскрытые, активны или неактивны и пр.

Уровень темы чем-то схож с уровнем Состояния и отражает как модули или секции могут выглядеть.

В данном подходе используются следующие соглашения по именованию. Уровни определяются при помощи префиксов и соответствующего буквенного обозначения:

Макет: .l- или .layout-

Так как модули составляют основную часть проекта именовать их, используя префикс module- избыточно. Поэтому для них используются имена как есть, например: .example {}, .afisha {} и пр.

Состояния имеют префикс .is-, например .is-hidden {}

Уровень Темы именуется подобно модулям.

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

Информация о методологии и онлайн книга: https://smacss.com/

Русскоязычный перевод книги по SMACSS: https://github.com/andrew—r/smacss

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

Небольшой курс по основам HTML: Смотреть

Написание CSS

Правила именования классов подводят нас к следующему этапу. Когда написана html структура проекта, определены классы можно переходить к написанию CSS стилей и нарезке макета.

Стоит упомянуть о 2-х CSS файлах-дополнениях: normalize.css и reset.css.

Reset.css

Изначально в проектах повсеместно использовался

reset.css

, написанный Эриком Мейером. Цель данного свода правил – сбросить стили браузера, которые он по умолчанию использует для отображения элементов разметки. Таким образом при использовании reset.css нам не нужно переписывать стили браузера, по сути мы работаем с «чистым листом» и можем сосредоточиться на написании собственных стилей с нуля.

Normalize.css

наоборот, не сбрасывает все стили «в ноль», а нормализует их, приводит отображение стилей проекта к более-менее однообразию во всех современных браузерах.

У обоих сводов правил есть свои плюсы и минусы, на данный момент популярен normalize.css. Популярность данного свода правил обусловлена ещё и тем, что вам не приходится при разработке заново прописывать основные свойства для базовых элементов страниц, а лишь модифицировать их по необходимости.

Так же стоит упомянуть о, так называемом, «быстром сбросе», когда мы абсолютно для всех элементов страницы с помощью селектора * прописываем свойства {margin: 0; padding: 0}. Таким образом мы сбрасываем все внутренние и внешние отступы для всех элементов страницы. Но данную технику не рекомендуется использовать, так как она замедляет процесс отрисовки страницы, да и по сути имеет мало смыла (на мой взгляд).

Так же стоит отметить, что все размеры и отступы берутся непосредственно из дизайн-макета. Для получения данных значений нам необходимо использовать инструмент «линейка» и направляющие (речь про инcтрументарий Adobe Photoshop), а затем переносить полученные значения в код. Если мы работаем с фиксированным макетом, то значения переносятся в пикселях как есть, если же у нас «резиновый», то значения нужно переводить в проценты. Основная формула – это ширина элемента, делённая на ширину контекста (ширина содержащего блока). Например, если блок, содержащий текст и картинку имеет на макете ширину 400px, а блок с текстом в нём должен иметь ширину 340px, то в процентном выражении это будет (340 / 400) * 100%, то есть 85% будет занимать блок с текстом.

Не стоит перегружать ваши стили чрезмерной специфичностью, например, если мы хотим, чтобы ссылка внутри списка имела красный цвет, то не обязательно записывать всю линейку классов и тэгов: .main –nav ul li a, достаточно просто указать .main-nav a. Слишком «специфичные» правила делают правила контекстно зависимым и заставляют вас писать лишний код, а так же влияют на скорость отрисовки страницы, так как при разборе правил CSS парсер читает их справа налево и ему сначала, если брать описанный выше пример, нужно взять все ссылки (a), затем отбросить все ссылки, которые не лежат в li и т.д. пока он не доберётся до содержащего класса.

Специфичность кода, так же означает чрезмерную привязку к базовым тэгам. Например, если мы хотим, чтобы элемент внутри .block был синим и при разметке использовали элемент span (в правилах мы написали .block span {background-color: blue}), то при замене его на div, например, нам нужно будет написать новое правило уже для div внутри .block. Таким образом наш код будет обрастать ненужными правилами, которые по сути дублируют друг друга. Гораздо проще определить всего лишь один класс (класс элемента), который при присвоении внутренним элементам будет приводить нас к желаемому результату.

Ещё один пример контекстной зависимости кода – это использование имен тэгов вместе с именами классов, например, div.block {display: block}. Если мы захотим тот же класс применить к span, то нам придётся написать опять span.block {display: block} или span.block, div.block {display: block}, что в любом случае приведёт к увеличению кода на лишнюю строчку.

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

Если, вы используете правила, относящиеся к спецификации CSS3, то не поленитесь проверить необходимость использования браузерных префиксов на сайте http://caniuse.com.

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

Полезные ссылки и материалы:

Написание JS

Итак, заключительным этапом является написание JS скриптов. При создании веб страниц стало, практически, стандартом использование библиотеки jQuery, которая позволяет с лёгкостью манипулировать элементами web-страницы (DOM узлами), навешивать прослушку событий, отправлять запросы на сервер, обрабатывать результат выполнения и пр. Но не стоит слепо доверять трендам, на сегодняшний день нативный JavaScript достиг такого уровня, что вам возможно уже не нужен jQuery. Поэтому, прежде чем слепо прикреплять jQuery, стоит задуматься, так ли он нужен для ваших задач и не достаточно ли встроенных возможностей языка JavaScript.

Есть неплохой ресурс, который приводит альтернативы одних и тех же манипуляций на языке JavaScript и с помощью библиотеки jQuery: http://youmightnotneedjquery.com/, так же неплохим подспорьем является сайт https://developer.mozilla.org/ru/, на котором, помимо описания методов и свойств JavaScript, можно найти полифиллы для тех или иных методов (библиотека или часть кода, которая добавляет в старые браузеры поддержку возможностей современных функций и методов JavaScript).

Важно отметить, что не рекомендуется использовать JavaScript для стилизации, то есть не стоит для того или иного объекта DOM (элемента страницы) добавлять портянку CSS свойств с помощью JavaScript, чтобы выделить его состояние и пр. Рекомендуется использовать классы, то есть заранее в CSS определить классы-состояния (активный, не активный, скрытый, использованный и пр.) и при манипуляции элементами просто добавлять или убирать соответствующие классы.

Например, у нас есть элемент списка с классом .list__item, для того, чтобы показать активный элемент в данный момент (выбран пользователем) или нет, можно просто добавить класс (.list__item—active), а не прописывать все стили, присущие этому классу в JS:

document.querySelector(‘.list__item’).style.color = ‘red’;

и т.д.

Небольшой пример с возможными способами присваивания класса (присвоение модификатора происходит при нажатии на зелёный квадрат):

http://jsbin.com/

Не рекомендуется решать задачи, которые явно относятся к уровню CSS с помощью JavaScript, пытаясь как-то выровнять объект или добавить ему стили при наведении и пр.

Опять-таки, возвращаясь к теме Mobile First, нельзя не упомянуть о 2-х концепциях, которые коррелируют с данной техникой. Progressive Enhacement и Graceful Degradation, что переводится как прогрессивное улучшение и последовательное ухудшение. Данные принципы описывают 2 разных подхода к разработке: в первом случае мы разрабатываем наш сайт, пишем скрипты с учётом старых браузеров и систем или же определяем поведение при невозможности запуска скриптов, а затем постепенно улучшаем скрипт, вводя современные функции и методы, таким образом мы получаем сайт, который будет одинаково хорошо работать в старых и новых браузерах и средах (то же касается и css).

При Graceful Degradation подход противоположный – мы разрабатываем для современных браузеров и, лишь, потом начинаем вносить доработки и изменения с учётом старых версий.

Подход Mobile First чем-то схож с Progressive Enhacement.

Проверка кода

После написания html, css и js для нашей страницы необходимо проверить всё ли сделано верно. Для этого можно использовать online средства:

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

Статьи с рекомендациями по написанию JS, HTML и CSS:

Средства автоматизации

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

960GS

Мы уже говорили об этом средстве разработки в разделе про модульные сетки и дизайн. Нужно сказать, что 960GS предлагает не только макеты для создания дизайна, но и свою систему именования классов. Используя предлагаемые классы при вёрстке и при подключении css файла системы в проект, блоки сайта будут выстроены по этой сетке, что сэкономит время на написании практически того же самого самостоятельно.

<div>
  <div>
      <div>
          ...
      </div>
      <div>
          ...
      </div>
      <div>
          ...
      </div>
  </div>
  <div>
      ...
  </div>
</div>

Emmet

Emmet – это средство работы с html и css (

http://emmet.io/

). Плагин для работы с данным средством можно установить, например, в Sublime Text, тогда у вас появляется возможность не писать громоздкие куски кода на html и css, а записывать их в строчку, раскрывая затем в полноценную разметку. Например, строка

.block>ul.list>li.list__item*3

, может быть раскрыта в полноценный код:

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Затем вам просто необходимо вписать текстовые значения в элементы списка. То же касается и css: строка

w:100px+h:150px+bgc:#ff0

раскрывается в:

width: 100px;
height: 150px;
background-color: #ff0;

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

Jade

Далее стоит упомянуть и о таком языке работе с шаблонами, как jade (

http://jade-lang.com/

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

https://nodejs.org/en/

http://nodejs.ru/

Командная строка

Работа в командной строке так же может ускорить некоторые этапы работы над проектом, например, создание папок и файлов. Запустив консоль в директории проекта и набрав в ней всего лишь одну строку:

mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html

После нажатия enter мы получим папку project в которой будут находиться папки css, images, js, в папках css и js файлы styles.css и app.js, соответственно, а в корне project лежать файл index.html. Таким образом мы сэкономили время на создание папки, написание её названия, создание файлов и пр. Так же командная строка используется для работы с остальными средствами автоматизации.

Sass

Далее стоит поговорить о таком языке как Sass (

http://sass-lang.com

/). Данный язык упрощает работу с css. Благодаря Sass можно записывать вложенные классы, проводить математические вычисления прямо в коде, выносить переиспользуемые величины в качестве переменных в отдельные файлы или в начало файла, что в значительной степени упрощает дальнейшую работу со стилями и упрощает изменение тех или иных величин, так как они все будут храниться в одном месте и не нужно будет «ходить» по всему проекту и вносить соответствующие правки. Так же, благодаря Sass в проекте можно придерживаться принципа модульности, храня части разметки в соответствующих файлах и подключать их все в основной, затем с помощью консольной команды можно собрать весь код в один css файл, так же поддерживается сборка результирующего файла на лету по мере написания стилей. Опять-таки для работы с Sass потребуется командная строка. Процесс установки пакета можно изучить здесь:

http://sass-lang.com/install

HTML5Boilerplate

HTML5Boilerplate (

https://html5boilerplate.com/

) представляет собой заранее скомпонованный проект, в котором уже есть index.html, normalize.css и пр. В index.html, например, уже заранее прописаны основные куски кода, которые необходимы при написании html страницы. Проект позволяет скачать архив со всеми файлами как есть или же использовать кастомную сборку:

http://www.initializr.com/

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

Gulp и Grunt

Gulp (

http://gulpjs.com/

) и Grunt (

http://gruntjs.com/

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

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

Оба сервиса используют различный подход в описании выполнения задач, но суть их работы одинакова. Полезным будет данное сравнение: http://frontender.info/gulp-grunt-whatever/

Так же многие сервисы вроде autoprefixer (автоматическая простановка браузерных префиксов), jshint (проверка JS кода на валидность) могут быть установлены как сторонние плагины в текстовом редакторе (Sumblime Text, Atom, Brackets) и инициализированы при нажатии определённого сочетания клавиш.

Bootrstrap, Foundation, Material Design Lite

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

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

Со всеми возможностями и примерами можно ознакомиться на соответствующих сайтах:

Данное описание не является исчерпывающим и представляет собой лишь поверхностный взгляд на некоторые технологии. Но прежде чем пускаться во все тяжкие, используя средства автоматизации, библиотеки, framework’и, готовый код и прочее, стоит, всё-таки, изучить основы работы с html, css и js.

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

Создание веб-сайта. Курс молодого бойца / Хабр

Условно процесс создания сайта (web-проекта) можно разделить на 3 этапа:

Данный этап можно разделить на несколько подэтапов:

Создание идеи

Разработка структуры проекта

Проработка макета проекта

Создание идеи

Разработка структуры проекта

Проработка макета проекта

После того, как мы определились со структурой проекта можно составить макет проекта (схематично).

Основные элементы страницы

Зачастую основными элементами страницы являются:

содержащий блок (wrapper, container)

логотип

навигация

контент

футер (нижний колонтитул)

свободное пространство

Содержащий блок (контейнер)

Логотип

Контент

Нижний колонтитул (footer)

Резиновый и фиксированный макет

Фиксированный макет

Резиновый макет

Полезные ссылки по теме:

Почему при «резиновом» дизайне создаётся несколько макетов, а не используется один?

Модульная сетка

Полезные ссылки и материалы:

Макеты веб-страниц

Среди всего многообразия составления макета веб-страницы можно выделить четыре наиболее распространённых:

Навигация в левом столбце

Навигация в правом столбце

Навигация в трёх столбцах

Горизонтальная навигация. На данном этапе сайты с таким типом навигации составляют большинство. Удобство такого подхода легко объяснить тем, что в данном случае у нас остаётся больше пространства для контента, составляющего наш сайт.

На первых двух сайтах можно посмотреть какие цвета использовались в дизайне.

Mobile First

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

Усвоив всё вышесказанное можно переходить к следующему этапу – Дизайн.

Color Scheme Designer 3 (http://colorschemedesigner.com/csd-3.5/). Помимо выбора цветовой схемы данный сервис позволяет посмотреть пример того, как выбранные цвета будут смотреться на сайте

Adobe Color CC (https://color.adobe.com/ru/). Данный ресурс, в отличие от Color Scheme Designer 3, позволяет создавать палитры ещё и на основе загруженных изображений (которые, например, могли появиться у нас на этапе составления mood board). Так же данный сервис обладает большим архивом палитр других пользователей.

COLORlovers (http://www.colourlovers.com/). Обширное сообщество, где можно подобрать различные палитры.

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

Элементы Call to Action

Данное понятие хорошо вписывается в принцип AIDA (Attraction Interest Desire Action).

AIDA

Привлечение внимания

Интерес

Желание

Действие

Схема просмотра страницы

Визуальные направляющие

Фрэймворки

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

Bootstrap

Foundation

Material Design Lite

_{Готовые элементы дизайна из Bootstrap, Foundation и Material Design Lite (MDL)}

Трэнды

Стоит так же сказать о внешнем виде страниц и вспомнить такие понятия как скевоморфизм и плоский дизайн.

Скевоморфизм

Плоский дизайн

Неплохой сайт-сравнение двух концепций: http://www.flatvsrealism.com/

Редакторы кода

Из наиболее популярных редакторов кода на сегодня можно выделить три:

Обзоры текстовых редакторов:

Структура проекта

Работа над проектом

Учитывая вышесказанное, мы можем условно разделить работу над проектом на следующие этапы:

Написание HTML

https://github.com/afarkas/html5shiv

), который обеспечивает поддержку новых стандартов в старых браузерах или библиотеку Modernizr (

https://modernizr.com/

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

Правила именования классов

БЭМ

БЭМ

и расшифровывается, как

Блок Элемент Модификатор

Таким образом мы представляем наш код, как композицию блоков, элементов и их модификаций.

Более полная информация о методологии: https://ru.bem.info/

SMACSS

Так же существует подход

SMACSS

К базовому уровню будет относиться всё, что касается непосредственно тэгов html.

К уровню макета мы будем относить всё, что касается основных составляющих страницы: секции.

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

Уровень Состояние описывает как будут выглядеть модули и секции в том или ином состоянии: отображаются или не отображаются, сжатые или раскрытые, активны или неактивны и пр.

Уровень темы чем-то схож с уровнем Состояния и отражает как модули или секции могут выглядеть.

Макет: .l- или .layout-

Так как модули составляют основную часть проекта именовать их, используя префикс module- избыточно. Поэтому для них используются имена как есть, например: .example {}, .afisha {} и пр.

Состояния имеют префикс .is-, например .is-hidden {}

Уровень Темы именуется подобно модулям.

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

Информация о методологии и онлайн книга: https://smacss.com/

Русскоязычный перевод книги по SMACSS: https://github.com/andrew—r/smacss

Небольшой курс по основам HTML: Смотреть

Написание CSS

Стоит упомянуть о 2-х CSS файлах-дополнениях: normalize.css и reset.css.

Reset.css

Изначально в проектах повсеместно использовался

reset.css

Normalize.css

Полезные ссылки и материалы:

Написание JS

document.querySelector(‘.list__item’).style.color = ‘red’;

и т.д.

http://jsbin.com/

Подход Mobile First чем-то схож с Progressive Enhacement.

Проверка кода

Статьи с рекомендациями по написанию JS, HTML и CSS:

Средства автоматизации

960GS

<div>
  <div>
      <div>
          ...
      </div>
      <div>
          ...
      </div>
      <div>
          ...
      </div>
  </div>
  <div>
      ...
  </div>
</div>

Emmet

Emmet – это средство работы с html и css (

http://emmet.io/

.block>ul.list>li.list__item*3

, может быть раскрыта в полноценный код:

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Затем вам просто необходимо вписать текстовые значения в элементы списка. То же касается и css: строка

w:100px+h:150px+bgc:#ff0

раскрывается в:

width: 100px;
height: 150px;
background-color: #ff0;

Jade

Далее стоит упомянуть и о таком языке работе с шаблонами, как jade (

http://jade-lang.com/

https://nodejs.org/en/

http://nodejs.ru/

Командная строка

mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html

Sass

Далее стоит поговорить о таком языке как Sass (

http://sass-lang.com

http://sass-lang.com/install

HTML5Boilerplate

HTML5Boilerplate (

https://html5boilerplate.com/

http://www.initializr.com/

Gulp и Grunt

Gulp (

http://gulpjs.com/

) и Grunt (

http://gruntjs.com/

Bootrstrap, Foundation, Material Design Lite

Со всеми возможностями и примерами можно ознакомиться на соответствующих сайтах:

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

CGI: пишем простой сайт на Python. Часть 1: Hello world

Проще всего создать динамические страницы на Python при помощи CGI-скриптов. CGI-скрипты — это исполняемые файлы, которые выполняются веб-сервером, когда в URL запрашивается соответствующий скрипт.

Сегодня я расскажу про то, как написать Hello world, как CGI-скрипт.

Настройка локального сервера

В Python уже есть встроенный CGI сервер, поэтому его настройка элементарна.

Для запуска из консоли (для любителей linux-систем). Запускать нужно из той папки, где мы хотим работать:

python3 -m http.server --cgi

Для сидящих на Windows чуть проще будет запуск Python файла (заметьте, что он должен находиться в той же папке, в которой мы планируем работать!):

from http.server import HTTPServer, CGIHTTPRequestHandler
server_address = ("", 8000)
httpd = HTTPServer(server_address, CGIHTTPRequestHandler)
httpd.serve_forever()

Теперь откройте браузер и в адресной строке наберите localhost:8000

Если у вас примерно такая же картина, значит, у вас все заработало!

Hello world

Теперь в той папке, где мы запустили сервер, создаём папку cgi-bin (у меня она уже создана).

В этой папке создаём скрипт hello.py со следующим содержимым:

#!/usr/bin/env python3

print("Content-type: text/html")
print()
print("<h2>Hello world!</h2>")

Первая строка говорит о том, что это Python скрипт (CGI-скрипты можно не только на Python писать).

Вторая строка печатает заголовок. Он обозначает, что это будет html файл (бывает ещё css, javascript, pdf и куча других, и браузер различает их по заголовкам).

Третья строка (просто символ новой строки) отделяет заголовки от тела ответа.

Четвёртая печатает Hello world.

Теперь переходим на localhost:8000/cgi-bin/hello.py

И радуемся!

Если у вас не работает, проверьте, установлены ли права на выполнение.

Также в консоли запущенного сервера появляются сообщения об ошибках. Например, убрал скобочку и обновил страницу:

В следующей части мы рассмотрим обработку данных форм и cookies.

Сайт «Дунбэйван» стал партнером «Российской газеты» — Российская газета

К проекту контент-сотрудничества «Российской газеты» присоединились СМИ Китайской Народной Республики. Подписано соглашение с официальным сайтом новостей провинции Хэйлунцзян — сетевым изданием «Дунбэйван».

Партнерские отношения между СМИ сложились еще пять лет назад и активно развивались все эти годы. Теперь они обрели дополнительные формы. Это уже не только обмен контентом, но и помощь в организации комментариев. И что не менее важно — международный обмен опытом.

«Дунбэйван» — единственный официальный сайт новостей и интернет-портал в провинции Хэйлунцзян. В настоящий момент он является самым влиятельным и посещаемым в Северо-Восточном Китае. В 2006 году для развития сотрудничества между КНР и РФ была открыта онлайн-платформа на русском языке — сайт «Партнеры».

За годы работы русскоязычный канал приобрел аудиторию более, чем в 30 странах мира. Средняя ежедневная посещаемость раздела — миллион пользователей. Северо-Восточный сайт («Дунбэйван») и его русская версия «Партнеры» стали важным связующим звеном между СМИ провинции Хэйлунцзян и Дальнего Востока России.

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

Справка «РГ»

Проект контент-партнерства с региональными СМИ существует с 2018 года. В нем принимают участие 576 изданий из 64 российских регионов.

Партнеры обмениваются контентом, готовят совместные редакционные материалы, запускают спецпроекты. СМИ-партнеры также принимают участие в информационных мероприятиях «РГ» и устанавливают более тесное сотрудничество с ведомствами и экспертами федерального уровня.

В этом году к проекту присоединились и СМИ Кыргызской Республики

Редакция любого местного издания или интернет-портала, интересующаяся партнерством с «Российской газетой», может обратиться по электронной почте [email protected]

Пишем сайт на Perl и Mojo. Часть 1

Пишем сайт на Perl и Mojo. Часть 1 — Выбираем необходимый софт и окружение.

В последнее время, вокруг языка Perl складывается очень много сказок и небылиц. То Perl «умер», то он очень сложен для новичка, то создать на нем сайт/веб-приложение сложно и «старомодно» ну и т.д. и т.п.
Любой человек, программирующий на Perl, наверняка слышал о таком web-фреймворке как Catalyst. Лично мне, очень нравится Perl, но вот до освоения Catalyst дело так и не дошло (за исключением каких-то базовых вещей). И вот, относительно недавно, появился новый и очень интересный фреймворк для разработки web-приложений на Perl — mojolicious.

Хочу представить серию статей, целью которых является рассказать и показать читателям, что создавать веб-сайты на Perl и Mojolicious, не сложнее чем на PHP и Codeigniter и даже интересней.

Часть 1 — Выбираем необходимый софт и окружение.

У меня есть ноутбук, на котором установлена WINDOWS VISTA (да, да, будем писать на Perl и Mojo именно под Windows, ведь у большинства тоже Win, не так ли?).

Первое, что на понадобится и без чего мы не сможем двинуться дальше — это собственно сам Perl.

Тут есть несколько вариантов:

1. Взять сборку Perl от ActiveState

2. Взять сборку strawberryperl
3. Можно посмотреть все варианты получения Perl вот здесь www.perl.org/get.html

Пусть вас не пугает слово «сборка», ничего «собирать» и «компилировать» не придется =)!

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

Разработчики Mojo, при работе на MS Windows рекомендуют использовать strawberryperl.com.

И так скачиваем последний дистрибутив Perl (на момент написания статьи это strawberry-perl.googlecode.com/files/strawberry-perl-5.10.1.0.msi) и приступаем к установке.

Установка проходит в «3 клика».

Соглашаемся с лицензионным соглашением, поставив соответствующую галочку, жмем «Install».

После 30 секунд копирования файлов установка завершена!

Вот и все! Perl установлен и готов к использованию!

Теперь установим (если его еще нет) текстовый редактор или IDE, для написания кода.

Тут, как говорится, дело вкуса. Можно писать в «родном» блокноте для Windows, но лучше выбрать что-нибудь более подходящее.

Лично я могу посоветовать следующее:
Komodo edit
Notepad++
Intype
Padre

Я остановил свой выбор на Komodo edit. В его установке нет ничего сложного — простое Windows приложение, которое устанавливается, как и сам Perl, в «3 клика» (Если вы вдруг перейдете на Linux — нет проблем — Komodo Edit работает и там).

Теперь у нас есть работающий Perl + возможность комфортно писать код на нем!

В следующей части мы уставим Mojolicious, рассмотрим основы работы с ним и напишем «Hello World»!

На сегодня все!

use Perl or die;

Приложение 1 Пишем для сайтов и блогов

онлайн-развлечения для детей на эту неделю / Новости города / Сайт Москвы

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

Освоение новых навыков

Желающих стать популярными блогерами приглашают на онлайн-урок «Инстаблог», посвященный видеоконтенту. Его подготовили сотрудники парка культуры и отдыха «Ходынское поле». Из нового выпуска можно будет узнать, чем отличается IGTV от обычных видео в социальной сети «Инстаграм», какие видеоредакторы существуют и как правильно публиковать видеоконтент. Научиться делать специальные видеоролики можно будет 18 декабря в аккаунтах парка в социальных сетях «Инстаграм», «В контакте» и «Фейсбук». Начало в 12:00.

Юные кулинары тоже найдут себе занятие по душе — для них запланирован мастер-класс «Простая кулинария», который проведет Парк Горького. Ребята научатся готовить трюфели в домашних условиях. Урок состоится 20 декабря в 15:00 на официальных страницах «Зеленой школы» парка в социальных сетях «Инстаграм», «В контакте» и «Фейсбук».

Подготовка к Новому году

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

Делать необычные снежинки в технике квиллинг (техника шитья из лоскутов) научат на онлайн-занятии «Волшебная снежинка» библиотеки № 196. Матер-класс пройдет 15 декабря на странице читальни в социальной сети «В контакте». Начало в 15:00.

Украсить новогоднюю елку можно и необычными игрушками из глины. Объяснят, как их сделать своими руками, на онлайн-мастер-классе «Лепка не минимализм» 16 декабря в 15:00. Трансляцию занятия можно будет посмотреть на официальных страницах «Зеленой школы» Парка Горького в социальных сетях «Инстаграм», «В контакте» и «Фейсбук».

Практика английского языка

Библиотека № 195 приглашает учеников пятых — седьмых классов на урок чтения на английском и русском языках #TimetoRead. Занятие пройдет 15 декабря в 18:00 в аккаунте читальни в социальной сети «Инстаграм».

Внеклассное чтение

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

Например, вечером, перед сном, включить сказку французского поэта Шарля Перро «Кот в сапогах». Читать произведение будут 16 декабря в 20:00 на официальной странице библиотеки № 174 в социальной сети «Фейсбук».

Насладиться чтением рассказа датского писателя Ганса Христиана Андерсена «Истинная правда» предлагает библиотека № 187. Послушать поучительную историю о вреде слухов и сплетен можно будет 17 декабря на YouTube-канале библиотеки. Начало в 15:00.

Для юных любителей дикой природы есть возможность прослушать аудиоверсию книги из серии «Занимательная зоология. Я лев». Познать мир семейства кошачьих можно будет 17 декабря в 15:00 на странице библиотеки № 196 в социальной сети «В контакте».

Смотрим спектакли дома

Парк культуры и отдыха «Таганский» предлагает всем желающим старше 12 лет посмотреть онлайн-спектакль по всемирно известному роману Оскара Уайльда «Портрет Дориана Грея». Насладиться сюжетом мистической истории и игрой актеров театра «Опыты драматических изучений» и творческого объединения «Звездный циферблат» можно 15 декабря в инстаграм-аккаунте парка. Начало в 19:30.

Те, кто грезит космосом, смогут виртуально побывать там и познакомиться с необычными жителями неизведанных планет вместе с героями сказки «Космическое приключение Миши и Чуши». Зрители увидят интересную и волшебную историю от центра культуры «Гармония» в исполнении актеров Русского театра марионеток. Интерактивный спектакль покажут 18 декабря в 17:00 на YouTube-канале центра.

11 золотых правил написания контента для вашего сайта

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

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

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

Узнайте, как запустить свой сайт сегодня!

1. Знайте свою аудиторию

Звучит просто, но многие писатели кладут перо на бумагу или палец на клавиатуру, прежде чем задумываться о том, кого именно они пытаются достучаться. Прежде чем приступить к составлению контента, задайте себе следующие вопросы: Кто моя основная аудитория? А как насчет вторичной аудитории, которая может влиять на мою основную аудиторию и информировать ее? Как они найдут мой сайт в Интернете?

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

Аудитория находит веб-контент множеством разных путей — через социальные сети, ссылки с других веб-сайтов, через электронную почту и поисковые системы.Этот последний метод особенно важен, когда вы пишете для Интернета. Текст может быть очень хорошо написанным и информативным, но если он не оптимизирован для поисковых систем, скорее всего, мало кто его найдет. Подумайте еще раз о своей аудитории: какие поисковые запросы они будут вводить в Google? Если вы публикуете резюме в Интернете или создаете веб-сайт для своей внештатной работы, какую работу вы ищете? Обязательно включайте эти термины в заголовки и подзаголовки.

2. Следуйте модели «перевернутой пирамиды»

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

Например, предположим, что вы создаете веб-страницу о конференции. Наиболее важные детали — описание темы, даты и места — будут отображаться вверху страницы. Вспомогательные детали, такие как докладчики и их темы лекций, будут следовать. Менее важная информация, такая как организаторы конференций, история серии конференций или список связанных ресурсов, будет отображаться внизу страницы.

Развивайте свой бизнес в сети с Jimdo.

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

Эти два графика могут помочь вам составить представление о структуре вашего сайта.

3. Пишите короткие простые предложения

Длинные предложения предназначены для Чарльза Диккенса — при небольшом объеме внимания современного читателя требуются предложения из 35 слов или меньше. Таким образом, доступный и легкий для чтения контент веб-сайта, естественно, достигнет более широкой аудитории.

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

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

Можно ли легко понять ваш текст на уровне чтения с 7-го по 9-й класс? Чтобы узнать это, проверьте его баллы на уровне оценок Флеша-Кинкейда.

4. Придерживайтесь активного голоса

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

Active voice помогает создавать лаконичные, удобные для чтения предложения. Кроме того, он более прямой; когда вы говорите непосредственно с аудиторией («Вы можете это сделать»), это более увлекательно, чем сказать: «Это можно сделать». Это также важно на странице часто задаваемых вопросов на вашем веб-сайте.

5. Покажи, не скажи

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

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

или

Мы сделали игрушку для собак «Rough Rover» из прочного, 100% натурального каучука, разработанного, чтобы противостоять проколам и разрывам даже самых преданных любителей жевания.

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

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

Нам нравятся описания продуктов на веб-сайте Зингермана — они очень подробно объясняют, почему их деликатесы — лучший выбор.Вот еще несколько советов по написанию отличных описаний продуктов для вашего интернет-магазина.

Нам нравятся описания продуктов на веб-сайте Зингермана — они с аппетитными подробностями объясняют, почему их деликатесы — лучший выбор.

6. Избавьтесь от жаргона

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

Рассмотрим это предложение:

Журналист схватил SOT из MOS, поехал обратно на станцию и положил историю в консервную банку.

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

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

Этот совет особенно важен, если вы работаете в технической сфере, но хотите, чтобы ваш веб-сайт привлекал неопытных клиентов.Помните, что вам нужно писать для своей аудитории (см. Пункт №1), а не для своих коллег. Доступный язык поможет вам выглядеть доступным и открытым — именно то, что вы хотите донести до будущих клиентов.

7. Смешайте свой выбор слов

Слова похожи на печенье — у всех нас есть свои любимые. Но когда дело доходит до заинтересованности посетителей, ключевым моментом является разнообразие! Облака слов забавно использовать и могут помочь вам разнообразить выбор слов, визуализируя, какие слова вы используете чаще всего.Просто скопируйте и вставьте свой текст в бесплатный инструмент для создания облака слов. Чем больше вы используете слово, тем крупнее оно будет выглядеть в вашем облаке. Вы злоупотребляли определенным словом? Введите его на Thesaurus.com, чтобы найти новые синонимы для улучшения вашего текста.

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

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

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

Использование: накладная.

Не: счет

Использование: фотосессия

Not: фотосессия, фотосессия, съемка

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

8. Сделайте текст доступным для сканирования

Помимо самой важной информации, убедитесь, что текст легко пролистывать. Большинство веб-читателей будут сканировать страницу, чтобы найти конкретную информацию, которую они ищут, — если они не найдут ее легко, они продолжат.

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

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

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

Также важно разделить контент на разделы с описательными подзаголовками. Например, веб-страница об изменении климата может содержать информацию под следующими заголовками:
- Что такое изменение климата?
- Драйверы изменения климата
- Текущие и прогнозируемые воздействия изменения климата
- Решения по сокращению выбросов
- Узнать больше

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

9. Добавьте мультимедиа

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

Легко читаемая диаграмма или диаграмма также могут лучше объяснить сложную тему, чем простой текст. Если вы не являетесь графическим дизайнером по профессии, существует множество способов использования визуальных элементов на вашем веб-сайте и несколько отличных сервисов, которые помогут вам создавать графику самостоятельно, например Canva и Piktochart.

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

10. Слой содержимого веб-сайта

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

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

Создание этих внутренних ссылок на вашем собственном сайте также помогает вашему SEO, но имейте в виду, что ссылки всегда должны быть релевантными и полезными. Визуально, если вы перегружаете свой текст ссылками, люди не будут знать, на что нажимать.Google рекомендует поддерживать количество гиперссылок на странице на «разумном уровне».

11. Оставьте их желать большего

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

Хорошие веб-сайты заканчивают каждую страницу сильным призывом к действию (или для краткости CTA). Есть ли человек, к которому читатель должен обратиться за дополнительной информацией? Интересное видео, которое им стоит посмотреть? Как насчет соответствующей записи в блоге, которую они могут прочитать, или отчета, который они могут скачать? Эта стратегия помогает направлять читателей в другие разделы вашего веб-сайта и побуждает их продвигать ваш контент среди своих друзей и семьи.

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

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

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

Развивайте свой бизнес в сети с Jimdo.

Как написать контент для веб-сайта за 9 шагов

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

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

Быстрые ссылки: как писать контент для веб-сайта?

Готовы начать? Вот так!

Шаг 1. Определите цель содержания веб-сайта

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

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

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

Шаг 2. Изучите аудиторию

Помните: вы пишете для читателей.Люди! То, что вы скажете и как вы это скажете, будет зависеть от таких вещей, как:

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

Как вы исследуете свою аудиторию?

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

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

Изучение конкурентов также даст важные выводы.

Шаг 3. Исследование конкурирующих веб-сайтов

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

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

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

Как вы исследуете конкурентов?

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

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

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

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

Шаг 4. Спланируйте, как контент сочетается на вашем веб-сайте

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

Если вы переделываете веб-сайт или создаете новый, вам может быть полезно создать каркас. Это может быть так же просто, как набросок списка страниц и тем, которые они будут освещать.

Продумайте:

Какие страницы вам понадобятся и назначение каждой
Как люди будут переходить на каждую страницу

Контент веб-сайта бывает разных форм и размеров. От развернутого контента и сообщений в блогах до объявлений на боковой панели и описаний продуктов — копии готовятся и отображаются различными способами для различных целей.

Связанный: 3 совета, которые помогут улучшить ваши практические статьи

Шаг 5: Напишите содержимое для каждой страницы

Теперь пора углубиться в пошаговые инструкции по написанию текста для ваших веб-страниц. Начните с понимания цели страницы, которую вы собираетесь написать.

Определите цель страницы.

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

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

Возможно, вы также пишете контент для целевых страниц. Unbounce описывает целевые страницы как страницы, «разработанные для одной конкретной цели.”Они предназначены для того, чтобы побудить пользователя к действию и созданы для одной из следующих целей:

Переходы по ссылкам: страница, предназначенная для перенаправления пользователя на другую веб-страницу
Лидогенерация: страница, предназначенная для того, чтобы побудить пользователя ввести свою информацию в форме согласия
Покупка: страница, предназначенная для того, чтобы побудить пользователя совершить покупку

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

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

Найдите лучшее ключевое слово для страницы.

Ключевое слово — это основной термин, который поисковые системы должны связывать с вашей страницей.Прежде чем вы начнете писать, определите лучшее ключевое слово для таргетинга.

Как найти лучшее ключевое слово?

Чтобы определить лучшее ключевое слово для вашей страницы, используйте инструмент Alexa’s Keyword Difficulty.

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

Сложность ключевого слова Alexa фильтрует действие по ключевой фразе «календарь содержания».

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

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

Исследование популярных и конкурирующих страниц.

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

Один из способов сделать это — просто ввести целевое ключевое слово в Google и посмотреть, какие сайты в настоящее время отображаются на первой странице результатов. Просмотрите их один за другим и обратите внимание на:

Длина содержимого страницы
Темы, рассматриваемые на страницах
Как они форматируют информацию (списками или абзацами?)

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

Самый популярный контент Twitter по термину «ювелирные изделия с бриллиантами», обнаруженный с помощью инструмента Content Exploration от Alexa.

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

Напишите план и соберите ресурсы.

Чтобы написать хороший контент для веб-сайта, начните с наброска.

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

Затем создайте свой первый черновик копии веб-страницы.

Напишите копию страницы.

Погрузитесь в письменность. При написании контента для страниц своего веб-сайта помните об этих советах.

Знайте свою цель, прежде чем начать. Ранее в этом посте мы говорили об определении цели вашей страницы.Помните об этой цели, когда пишете. Создавайте весь свой контент с намерением побудить вашу аудиторию совершить желаемое действие.
Используйте перевернутую пирамиду. Это означает предоставление читателю наиболее важной информации в начале и менее важной информации в нижней части. Стиль перевернутой пирамиды соответствует тому, как люди читают в Интернете.
Сосредоточьтесь на преимуществах перед функциями. По мере того, как вы выделяете продукты, услуги, стимулы или предложения, покажите читателю, что это для них выгодно.Вместо того, чтобы перечислять функции, объясните, какую пользу каждая функция приносит читателю. Например, не стоит говорить о системе передач велосипеда; поговорить о способности велосипеда обеспечивать плавность хода.
Объясните преобразование. Дайте читателю представление о том, как продукт, услуга, поощрение или предложение изменят их ситуацию. Объясните, на что похожа жизнь до и после того, как они начнут действовать, и расскажите читателю, как их жизнь улучшится, когда они сделают следующий шаг.
Будьте лаконичны и ясны. Используйте короткие предложения и фразы. Избегайте сложных формулировок, которые теряют читателей, и вырезайте любую ненужную или витиеватую информацию. Говорите только то, что читателю нужно знать.
Избегайте модных словечек и жаргона. Не сбивайте с толку и не теряйте читателей, используя терминологию высокого уровня, которую они не понимают. Пишите на том же языке, на котором говорят ваши слушатели.
Используйте маркеры и форматирование. Помогите читателям найти наиболее важные моменты в вашем тексте, разбив текст на части.Выделите основные моменты, используя маркеры, полужирный шрифт, курсив и варианты стилей и размеров шрифтов. Большинство читателей сканируют, поэтому убедитесь, что ключевые моменты выделяются.
Говорите напрямую с читателем. Копия более эффективна, когда направлена прямо на вашу аудиторию. Используйте тот же язык, на котором вы бы разговаривали со своим читателем лично. Используйте такие слова, как «вы» и «ваш», и, когда это уместно, включайте такие слова, как «нас» и «мы».
Отойти от правил грамматики — если это звучит естественно. Хотя вы не хотите, чтобы ваш текст содержал явные грамматические ошибки, можно отклониться от строгих правил академического письма. Если вам кажется более естественным закончить предложение предлогом или использовать неполное предложение, нарушите правила. Но нарушайте правила только в том случае, если это добавляет ясности и естественности звучанию копии. Не раздвигайте границы настолько, чтобы ваша копия выглядела неотшлифованной и неряшливой.

Обратите особое внимание на то, как вы завершаете страницу.

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

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

Веб-сайты

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

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

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

Пересмотрите свой заголовок.

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

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

Заголовки для содержания веб-сайта должны быть:

Ясно: Каракули или хитроумные заголовки могут иногда работать для сообщений в блогах или социальных сетях, но избегайте их использования для заголовков целевой страницы.Всегда переходите сразу к делу и четко объясняйте, о чем эта страница.
Релевантно: Заголовок должен соответствовать содержанию страницы, призыву к действию и ссылке, которая привела пользователя на страницу. Сопоставьте заголовки с языком призыва к действию, объявления или продвижения, которые привели аудиторию на страницу. Затем убедитесь, что остальная часть текста и призыв к действию соответствуют основному заголовку страницы.
Ориентация на желания: Используйте заголовок как возможность представить действие, которое вы хотите, чтобы пользователи совершили, когда они получили от вашей страницы то, что им нужно.В заголовке укажите основное решение, пользу или результат, которые принесет действие.

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

Шаг 6. Добавьте элементы страницы без копирования

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

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

Изображений
Пуговицы
Текстовые вызовы
Иконки
Белое пространство
Gif-анимации
Диаграммы и графики
Видео
Разрывы строк
Варианты цветов фона и изображений

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

Шаг 7. Внесите правки

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

На этом этапе вы, вероятно, найдете возможность:

Правильные опечатки
Улучшение выбора слабых слов
Переписать непонятные разделы
Усилить заголовок
Ссылка на другой контент на вашем сайте

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

Шаг 8. Оптимизация страницы для SEO

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

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

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

Помимо использования ключевого слова в основной части текста, также используйте его в следующих элементах контента SEO:

Заголовок страницы (заголовок, который виден на странице)
По крайней мере, один подзаголовок (копия, отформатированная с h3, h4, h5 и т. Д.)
Тег заголовка (заголовок страницы из 50-60 символов, встроенный в код страницы)
Метаописание (сводка страницы из 150–160 символов, встроенная в код страницы)
Альтернативные теги изображения (текст, описывающий изображение и появляющийся, если изображение не загружается должным образом)

Ссылка на новую страницу с других страниц вашего сайта.

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

Еще раз проверьте элементы SEO на странице.

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

Введите URL-адрес вашей страницы и основное ключевое слово в средство проверки SEO на странице.

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

Шаг 9. Планирование обновления содержимого позже

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

Рассмотрите возможность A / B-тестирования содержимого целевой страницы на своем веб-сайте.

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

Создавайте версии своей страницы с разными вариациями:

Заголовки
Подпозиции
Призывы к действию
Цвет пуговиц
Изображения
Макеты
Характеристики

Затем выполните A / B-тестирование ваших страниц, чтобы увидеть, какие из них больше связаны с пользователями и дают наилучшие результаты.

Дополнительные советы о том, как писать контент для веб-сайта

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

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

Блог Советы по SEO: Контрольный список для написания SEO-дружественных сообщений

Что такое контент-маркетинг?

Создавайте дополнительные материалы для совместного использования с помощью этого контрольного списка и 7 полезных инструментов

И, наконец, не забудьте подписаться на бесплатную 14-дневную пробную версию нашего Расширенного плана; он дает вам доступ ко всем упомянутым здесь и многим другим инструментам, которые помогут вам повысить эффективность ваших веб-страниц.

Эта статья была первоначально опубликована 17 мая 2017 г. и обновлена 8 октября 2019 г.

14 советов по написанию отличного содержания веб-сайта

Это первая строка, которой я должен привлечь ваше внимание и показать ценность статьи. У меня есть 15 секунд, как у вас, когда вы создаете контент для своей аудитории. У меня получилось?

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

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

Что такое веб-копия?

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

Так что же делает сайт хорошим контентом?

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

Вот некоторые из наших лучших советов по написанию, которые помогут вам в этом:

Как писать контент веб-сайта

Мы разделили наши рекомендации на три группы: советы перед написанием, советы по написанию и советы после написания .

Советы перед написанием

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

Совет №1: Определите свою цель

Самая важная вещь для любого автора копии — это понимать ее цель. Знание своей конечной цели с самого начала поможет вам создать идеальный контент и идеальный призыв к действию (я расскажу больше о CTA в Writing Tips).

Цель копии соответствует целям бизнеса.Итак, ответьте на вопросы по этому поводу:

Предназначен ли сайт для продажи товара или услуги?
Направлено ли оно на увеличение трафика с целью увеличения доходов от рекламы или спонсорства?
Направлено ли оно на привлечение новых клиентов и создание потенциальных клиентов?
Основная цель — привлечь подписчиков или создать сообщество?

Совет № 2: Определите свою целевую аудиторию

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

Чтобы написать текст, который зацепит ваших потенциальных клиентов, вам нужно понять их образ мышления:

Кто люди приходят на ваш сайт?
Какие проблемы они хотят решить?
Какие условия поиска они вводят в строку поиска?

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

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

Совет № 3: знайте своих конкурентов

Это также хороший ход для исследования веб-сайтов ваших конкурентов.

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

Самый простой способ сделать это — просто выполнить поиск вашего основного продукта, услуги или темы в Google, выяснить, какие сайты ранжируются, и изучить, что они делают:

Какую основную услугу они предлагают?
Какой тип контента они используют на своих главных страницах — истории успеха, видео, статистику?
На какую аудиторию они нацелены?

Лили Рэй, @lilyraynyc:

«Посмотрите на результаты поиска, чтобы определить, насколько возможно даже ранжировать, как мы должны структурировать наш контент, анализ тона / настроения, какие избранные / расширенные фрагменты мы можем заработать. , и следует ли сосредоточиться на информационном и / или транзакционном содержании.»

Кайл Уигхэм, @Whigsy:

« Определите, какие элементы контента способствуют вовлечению, будь то трафик (конечно), лайки, репосты и т. Д. Социальные сигналы ясно показывают, чем вы поделились. аудитория считает ценным и интересным. Используйте эти страницы и сравните заголовки страниц, метаописания и тип контента (длинная / краткая форма, видеоконтент и т. Д.) ».

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

Советы по написанию

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

Совет №4: Привлекайте читателей с первой строки

Как я уже сказал в начале, у вас может быть всего 15 секунд, чтобы привлечь внимание читателя. Если вы справитесь с этим, ваша новая задача — заставить читателя оставаться на сайте.

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

Совет № 5: сделайте вашу копию сканируемой

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

Совет № 6: Помогите читателям сориентироваться.

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

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

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

Совет № 7: разговаривайте с читателями, как с другом

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

Активный голос: используйте структуру предложения, например «Вы можете заказать наши услуги» вместо «Наши услуги можно заказать.«Пассивный залог уместен, когда вы хотите звучать более формально; в других случаях используйте активный голос, чтобы звучать более индивидуально.
Прямая адресация: используйте «вы» для обращения к читателю, «мы», чтобы говорить с точки зрения компании, и «я» для индивидуального голоса.

Совет № 8: Говорите в условиях непрофессионала

Продолжая идею краткости вашей копии, делайте ее простой. Исследование, проведенное The Literacy Project, показывает, что средний американец читает в 7-8-м классе.Если вы используете простой язык, ваши читатели с большей вероятностью поймут и запомнят больше.

Убедитесь, что вы:

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

Совет № 9: Избегайте орфографических, грамматических или пунктуационных ошибок

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

Совет № 10: Побуждайте читателей действовать

Помните, как я говорил, что вы должны знать свою цель с самого начала? Пора применить эти знания.

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

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

Совет №11: Продемонстрируйте доказательство того, что призыв к действию того стоит

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

Совет №12: Добавьте наглядные материалы

Люди запоминают только 20% того, что они читают, но 80% того, что они видят и делают. Если вы добавите в свою копию инфографику, изображения, графики или видео, это поможет людям обрабатывать информацию и привлечь их внимание.

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

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

Советы после написания текста

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

Совет № 13: Оптимизация для поисковых систем

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

Тем не менее, важно избегать перенасыщения ключевыми словами, так как это может повредить вашему рейтингу в поисковых системах. Стремление к плотности ключевых слов 1-2% — это правильно.

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

Включите ключевые слова в заголовки и подзаголовки. Добавьте основное ключевое слово к заголовку и h2 и 5-10 дополнительных к подзаголовкам и основному тексту.
Позаботьтесь о метаданных . Опишите конкретную веб-страницу в 1-2 предложениях, чтобы побудить пользователя перейти по вашей ссылке, а не по ссылке ваших конкурентов.
Сделайте ваши URL-адреса удобочитаемыми. Помогите читателям понять, что находится на странице.
Добавьте релевантные и полезные ссылки. Таким образом, вы побудите посетителей дольше оставаться на сайте, и ваша оценка Google повысится.
Оптимизируйте визуальный контент. Измените размер изображений, чтобы ускорить загрузку сайта, и добавьте теги alt для поисковых систем.

Совет № 14: Поддерживайте актуальность своего веб-сайта

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

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

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

Контент веб-сайта Killer от Semrush

Мы рассмотрели несколько ключевых тактик для обеспечения высочайшего качества вашей веб-копии. Сохраняя простоту, сосредотачиваясь на клиенте, но при этом помня о важности SEO, вы сможете превратить посетителей в клиентов и помочь большему количеству потенциальных клиентов найти ваш сайт.

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

Вы платите за содержание своего веб-сайта в зависимости от его длины: 300, 500, 1000 или 1500 слов. Ознакомьтесь с тарифами на написание контента и сроками обработки нашего веб-сайта здесь.

Сделайте свой веб-сайт выдающимся

с содержанием, написанным профессионалами.

Написание для Интернета | Usability.gov

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

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

Почему это важно

Люди читают в Интернете иначе, чем при чтении печатных материалов — пользователи Интернета обычно ищут информацию.В исследовании поведения чтения в Интернете Якоб Нильсен обнаружил, что «на средней веб-странице пользователи успевают прочитать не более 28% слов во время среднего посещения; 20% более вероятно ».

Определите основные задачи ваших пользователей

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

Знание основных задач пользователей может помочь вам определить:

Контент для размещения на вашей домашней или целевых страницах
Заголовки страниц и подзаголовки
Логическая структура содержания каждой страницы

Как писать удобный контент

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

Используйте слова, которые используют ваши пользователи. Используя ключевые слова, которые используют ваши пользователи, вы поможете им понять текст и поможете оптимизировать его для поисковых систем.
Разбейте контент на части. Chunking делает ваш контент более поддающимся сканированию, разбивая его на управляемые разделы.
Загрузите важную информацию в первую очередь . Используйте журналистскую модель «перевернутой пирамиды». Начните с контента, который наиболее важен для вашей аудитории, а затем предоставьте дополнительные сведения.
Используйте местоимения . Пользователь — это «ты». Организация или государственное учреждение — это «мы». Это создает более чистую структуру предложений и более доступное содержание.
Использовать активный голос . «Правление предложило закон», а не «Правление было предложено правлением.”
Используйте короткие предложения и абзацы. . Идеальный стандарт — не более 20 слов в предложении, пять предложений в абзаце. Используйте тире вместо точки с запятой или, еще лучше, разбейте предложение на две части. Можно начинать предложение с «и», «но» или «или», если оно делает вещи ясными и краткими.
Используйте маркеры и нумерованные списки . Не ограничивайтесь этим для длинных списков — одно предложение и два маркера легче читать, чем три предложения.
Используйте четкие заголовки и подзаголовки . Вопросы, особенно с местоимениями, особенно эффективны.
Используйте изображения, диаграммы или мультимедиа для визуального представления идей в содержании. Видео и изображения должны усиливать текст на вашей странице.
Используйте пробел. Использование белого пространства позволяет уменьшить шум за счет визуального разделения информации.

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

Помните, что разработка веб-копии простым языком в федеральном правительстве является законом. Узнайте больше о правительственном стандарте простого языка и найдите контрольный список, который поможет вам в ваших проектах.

Проверка читаемости вашего документа

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

Список литературы

Авторы контента веб-сайтов — Услуги по написанию веб-контента

Почему написание контента для веб-сайтов так важно?

Содержание веб-сайта важно, потому что оно помогает вам привлекать потенциальных клиентов на свои веб-страницы с помощью поисковой оптимизации (SEO). Как только они попадают на ваш сайт, контент помогает людям решить, подписаться ли для получения дополнительной информации и стать лидами.Если у вас есть товары на продажу, контент также помогает им принимать решения о покупке. Контент веб-сайта также является важным компонентом в обеспечении присутствия вашего бизнеса в Интернете. Вот почему имеет смысл нанять профессионального автора контента для создания контента вашего веб-сайта.

Каковы ключевые элементы выдающегося содержания веб-сайта?

Качественный контент — это веб-контент, созданный специально для достижения целей вашего бизнеса. Вам часто понадобится несколько разных типов контента, чтобы удовлетворить разные потребности и обратиться к разным типам клиентов.Один из ключевых способов создания высококачественного контента — это использовать поисковую оптимизацию (SEO) при разработке контента. Это включает в себя стратегию использования ключевых слов, а также включение ключевых слов в заголовки и заголовки, метаописания, текст и многое другое. Отличное содержание веб-сайта также включает актуальные высококачественные изображения.

Как часто мне следует обновлять содержимое моего веб-сайта? Почему?

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

Почему контент важен для SEO?

Поисковая оптимизация (SEO) направлена на улучшение вашего контента для повышения рейтинга в поисковых системах Google.Без качественного содержания ваш сайт не будет отображаться в первых результатах поиска. В результате посетителям и потенциальным клиентам будет сложнее найти ваш сайт во время поиска. Хороший контент оптимизирован как для поисковых систем, так и для людей. Когда вы используете правильные ключевые фразы в нужном месте, ваш контент будет отображаться в результатах поиска, для которых он наиболее релевантен.

Как узнать, хорошее или плохое качество содержания моего веб-сайта?

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

Как я могу определить голос и тон моего сайта?

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

23 Советы по написанию веб-контента для начинающих И профессионалов

Не нужно быть профессионалом, чтобы знать, как выглядит хорошее написание контента.Если вы когда-либо искали что-то в Google и находили действительно полезную страницу — поздравляем, вы испытали хороший контент!

Но вот в чем дело: если вы здесь, вы не просто хотите написать хорошую копию — вы хотите написать отличную копию.

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

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

Почему предприниматели должны учиться писать контент?

Хорошее написание контента — ваш лучший сотрудник. Исследование Salesforce / Pardot показало, что потребители считают, что доверие к контенту компании в 3 раза важнее, чем доверие к фактическим сотрудникам бренда. 97% респондентов того же опроса также заявили, что плохой контент негативно влияет на их доверие к бренду.

97% потребителей, опрошенных @Pardot, заявили, что плохой контент негативно повлиял на их доверие к брендам. #marketing Нажмите, чтобы твитнуть [/ raw]

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

23 Советы по написанию контента

1. Написание хорошего контента начинается с исследования ключевых слов.

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

Исследование ключевых слов расскажет, какие темы Google (и ваша целевая аудитория) считает релевантными.

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

Непревзойденная рентабельность инвестиций . Сайт TCF генерирует органический трафик на сумму более 400 000 долларов в год (например, нам пришлось бы потратить более 400 000 долларов на AdWords, чтобы получить такое же количество посещений).И все, что требуется, — это немного дополнительного времени на исследование и периодические корректировки для обновления контента и таргетинга по ключевым словам.

2. Наполнение ключевыми словами — это всегда плохо

Ключевые слова — это средство сделать ваш контент ценным, читаемым и удобным для поиска. Но когда вы начинаете набивать ключевые слова, происходит прямо противоположное.

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

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

3. Стремитесь к убедительным призывам к действию (CTA)

Что вы хотите, чтобы читатели делали с создаваемым вами контентом? Если ваш единственный ответ: «Ну, я думаю, прочтите», вам нужно вернуться к чертежной доске.Прежде чем вы даже начнете писать сообщение в блоге, вам нужно знать, каким будет ваш призыв к действию, и вы должны сделать его достаточно убедительным, чтобы читатели не могли не нажать. Так вы связываете написание контента с маркетинговыми целями и подтверждаете рентабельность инвестиций.

Какие призывы к действию следует использовать в своем контенте?

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

Желаемое действие пользователя: загрузите ресурс. Загрузите наше бесплатное руководство, чтобы получить дополнительные советы экспертов по [теме].
Желаемое действие пользователя: подписаться на рассылку новостей. Подпишитесь на эксклюзивные ресурсы в своем почтовом ящике каждую неделю.
Желаемое действие пользователя: получить демоверсию. Запланируйте бесплатную демонстрацию [название программы / приложения], чтобы узнать, сколько часов вы можете сэкономить каждый день.
Желаемое действие пользователя: делиться контентом в социальных сетях. Знаете кого-нибудь, кто мог бы воспользоваться этими советами? Поделитесь этой статьей и отметьте своего коллегу!
Желаемое действие пользователя: совершить покупку. Нажмите здесь и используйте код предложения «СОДЕРЖАНИЕ», чтобы сэкономить 30% на покупке [продукта или услуги].

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

4.Электронная почта против электронной почты, Интернет против Интернета и другие дискуссии о стилях.

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

Точно так же «электронная почта» долгое время считалась правильным термином такими крупными авторитетами, как AP и The New York Times , но одна за другой они уступали.То же самое и со строчными буквами «интернет». Есть люди, которые до сих пор считают его именем собственным, но никто из них не работает редактором в The Guardian , The Economist или BBC.

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

Не рискуйте, следуя правилам AP или другому уважаемому руководству по стилю, или создавая свое собственное руководство по стилю дома, которое придерживается современных правил использования.Будьте последовательны и современны.

«Грамматические снобы, примите к сведению: каким бы ни был ваш язык, ваш онлайн-текст предназначен для вашей аудитории, а не для вас. #marketing »- Content Factory

5. Всегда гиперссылка на свои источники

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

Цитирование не только является правильным делом, но и помогает получать обратные ссылки.

Часто сайты, на которые вы ссылаетесь, будут видеть ваши усилия и благодарить вас за них ответной ссылкой или цитатой.

Прочтите «14 способов получить обратные ссылки» для получения дополнительной информации об эффективной стратегии создания ссылок.

6. Заставьте читателя что-нибудь почувствовать.

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

Но почти все вирусные статьи объединяет одна общая черта: эмоциональное воздействие.

В недавней статье Hubspot опросил трех разных маркетологов о том, почему контент становится вирусным. Хотя каждый подчеркивал разные факторы, все три подчеркивали важность создания веб-контента, вызывающего эмоциональную реакцию у читателя. Меган Конли, стратег по контент-маркетингу в HubSpot, сформулировала это так:

У всех нас есть мнения о том, какие типы контента становятся вирусными: беззвучное социальное видео, объяснение с подкрепленными данными, идеально синхронизированный новостной журнал.Но вне зависимости от формата, все сводится к эмоциям. Эта история вызывает у вас ярость, вдохновение, понимание? Со всем, что вы создаете, вы должны спросить: если это будет прокручиваться в моей ленте новостей, мне будет все равно? Если ответ отрицательный, оно того не стоит. Ваши привычки к онлайн-контенту — ваш лучший судья.

Итак, в следующий раз, когда вы будете создавать рекламный текст или писать в Интернете, спросите себя: «Что хорошего в этой истории? Как я могу сделать это более эмоционально? » Найдите его, и, возможно, у вас на руках будет вирусный контент.

«Хотите попробовать # вирус? Спросите себя: «Что хорошего в этой истории? Как я могу сделать это более эмоционально? » #marketing »- Content Factory

7. Сохраняйте действие в своем содержании, написав

Написание для Интернета должно быть мощным, прямым и энергичным. Для этого ваша структура предложения, выбор слов и стиль должны подчеркивать действие.

Например, возьмем обычный совет по письму: «не используйте пассивный залог».

Пассивный залог возникает, когда вы меняете тему и объект в предложении.Вместо «лев напал на деревню» у вас есть «на деревню напал лев».

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

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

Наконец, не забудьте изменить стиль предложения.

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

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

«Content #writing PSA: откажитесь от пассивной передачи голоса. «Пассивный голос должен быть отброшен # маркетологами» звучит ужасно «. — The Content Factory

8. Когда вы пишете для Интернета, рубите его.

Если вы пишете следующий Великий американский роман, можно заканчивать абзацы, когда паузы кажутся естественными. Однако писать для Интернета — это совсем другой мир.Охват внимания в Интернете НАМНОГО меньше, чем в Книжном клубе Опры, и ваши абзацы должны это отражать.

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

Не беспокойтесь, если идея не кажется полностью «завершенной», прежде чем нажимать эту клавишу ввода. Сделайте ошибку в отношении коротких абзацев и порежьте их!

9. Обновите свои ссылки

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

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

Это всего лишь часть обновления старого, вечнозеленого контента для улучшения SEO. (Подробнее об этом позже!)

10. Инвестируйте в хороший набор инструментов для SEO.

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

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

SEMrush — один из инструментов SEO, который помогает найти правильный баланс. На самом деле, мы такие фанаты, что даже стали партнером!

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

Серьезно, взгляните на этот снимок экрана:

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

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

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

Если вы хотите попробовать SEMrush, нажмите здесь, чтобы получить бесплатную 7-дневную пробную версию SEMrush Pro!

11. Не забывайте передовые методы SEO.

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

Если вы используете WordPress, Yoast может помочь вам улучшить SEO.

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

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

12. Дайте вашим читателям повод для беспокойства с первого предложения

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

Но к этому моменту ваш читатель уже давно ушел.

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

«Совет по написанию контента: ваш веб-сайт — это не литература. Ваши читатели здесь, чтобы решить проблему, а не пускаться в разговоры о риторических приемах. #marketing »- Content Factory

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

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

Напоследок напоминаем, зачем мы вам нужны: вы не хотите тратить время зря — «вам нужна рентабельность инвестиций». Так что добавьте эту статью в закладки и ссылайтесь на нее, когда будете писать.

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

13. Нарисуйте картинку

Прочтите этот абзац:

«Это только мы, или некоторые люди говорят о свиданиях геев, как будто это сложный фокус? Даже неопытные геи или квиры могут подойти к идее свиданий с таким жалким страхом, который испытываешь, открывая инструкции по приобретению нового предмета мебели IKEA. «Правильно ли я делаю это?» — могут спросить они себя спустя месяцы, годы и даже десятилетия своей карьеры в свидании.

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

Дело в том, что написание контента сильно отличается от написания отчета по книге 7-го класса.

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

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

14.«Что можно и чего нельзя» или «Что можно и чего нельзя» — что правильно?

Последний! Ничто так не сводит нас с ума, как люди, вставляющие апострофы в слова во множественном числе.

Если сомневаетесь в правописании, написании заглавных букв или грамматике, погуглите! Это подводит нас к…

15. Если вы не уверены, посмотрите

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

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

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

Скоро вы будете писать в своем блоге советы по написанию веб-контента!

16.Dictionary.com — ваш друг, поэтому заходите на сайт чаще.

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

Бонус: подпишитесь на Merriam-Webster в Twitter, чтобы повысить свой словарный запас и узнать лингвистическую сторону новостей.

Поиск словаря в Твиттере может показаться не таким уж захватывающим, но поверьте нам: это качественный читатель.

17. Не называйте банан продолговатым желтым плодом.

Не используйте слово за 3 доллара, когда будет достаточно слова за 10 центов, если только вы не претендуете на награду «Самый претенциозный автор веб-контента».

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

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

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

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

18. Обновите сообщения до максимальной ценности

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

Это означает, что не существует такой вещи, как контент-стратегия «установил и забыл» (ну, если вы хорошо разбираетесь в том, что делаете).

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

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

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

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

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

19. Веб-сайт против веб-сайта против веб-сайта

Какой из них? Во имя любви ко всему удивительному, это веб-сайт (по крайней мере, так гласит AP Stylebook, что-то вроде библии для авторов веб-контента). Ни веб-сайт, ни веб-сайт, ни какой-либо другой вариант, о котором вы можете подумать.

Хотя термин «веб-сайт» когда-то был приемлемым, это все равно что называть Blackberry «сотовым телефоном» — это заставляет вас выглядеть так же оторванным от технологий.

20. Сохраняйте низкий уровень чтения

В целом, чем легче будет читать вашу статью, тем лучше.Сложный контент не знает Знаете ли вы, какой показатель Flesch Kincaid Reading Ease для вашего фрагмента контента? Есть множество бесплатных инструментов, которые помогут вам его найти. Эти инструменты просматривают ваш контент, анализируют ваш словарный запас и оценивают вашу удобочитаемость по классу.

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

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

21. Обеспечьте дополнительную ценность

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

Это не должно вам ничего стоить. Это может быть ссылка на бесплатный веб-семинар (например, наш веб-семинар о бесплатном освещении в СМИ), шаблон Google Диска или даже рабочий лист. Поделитесь с читателями ценным опытом, и они не просто будут рассматривать ваш сайт как отличный ресурс — они также порекомендуют своих друзей!

22. Никогда не редактируйте свою работу самостоятельно (по крайней мере, не сразу)

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

Это только в том случае, если у вас по какой-либо причине нет другого человека, который мог бы редактировать вашу работу. Даже с хорошей проверкой орфографии вы многое пропустите. Убедитесь, что в вашей организации есть кто-то, кто отлично умеет писать и редактировать, и может дать вашей работе второй взгляд.Помните, что за каждым хорошим писателем — будь то автор бестселлеров, журналист Washington Post или копирайтер вирусной маркетинговой кампании — стоит отличный редактор.

Если Стивену Кингу нужен редактор, то и нам, простым смертным, тоже!

Чтобы понять, насколько трудным и необходимым может быть редактирование, попробуйте пройти тест The New York Times «Скопируйте, отредактируйте это»!

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

Вы бы ответили правильно? Пройдите тест, чтобы узнать!

23. Повысьте свои навыки с помощью курсов по написанию онлайн-контента и SEO.

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

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

Не кажется ли вам, что контент веб-сайта слишком сложен для самостоятельной работы? Напишите нам свой контент на аутсорсинг.Щелкните здесь, чтобы связаться с нами сегодня.

Фотография заголовка Дэна Конселла на Unsplash

Как писать отличное веб-содержимое: ваше полное руководство

Факт: В Интернете слишком много плохого контента.

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

Как показал опрос Gallup, доверие людей к средствам массовой информации в значительной степени подорвано.Это недоверие не случайно — Интернет во многом помог посеять эти семена.

Итак, что происходит, когда вы набираете точный и ценный веб-контент?

Это свет в темноте.

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

Лучше всего то, что вы даете читателям именно то, что они хотят, нуждаются и жаждут.

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

Полное руководство: как писать отличный веб-контент

7 способов написать отличный веб-контент для блогов-блокбастеров

1. Сделайте заголовок понятным

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

2. Предоставьте самую лучшую информацию во вступлении

Начни с крючка
Скажите им, ПОЧЕМУ им это должно быть небезразлично

3.Организуйте свои очки

Объясняя концепцию? От простого к сложному
Написание памятки? Переходите от наиболее важного к менее важному
Написание руководства? Пошаговая инструкция

4. Ссылка и ссылка на высококачественные источники

5. Проверьте свое исследование

6. Напишите правильную длину сообщения в блоге

7. Проиллюстрируйте свою точку зрения изображениями

4 способа написания отличного веб-контента для целевых страниц и веб-страниц

1.Напишите активный заголовок

2. Сделайте копию основной части легко просматриваемой

3. Пребывание с упором на получение льгот

4. Напишите призыв к действию, кричащий читателю

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

5 примеров написания отличного веб-контента (хорошего, плохого и уродливого), Plus:

Вот как писать отличный веб-контент

Примеры некачественного веб-содержания — не делайте этих ошибок!

Создавая качественный веб-контент, вы помогаете установить стандарт публикации полезной и точной информации в Интернете.Подробнее в сегодняшнем руководстве от @JuliaEMcCoy. Нажмите, чтобы твитнуть.
Узнайте, как создавать устойчивый и надежный веб-контент, из нашего полного руководства по этой теме через @JuliaEMcCoy. Нажмите, чтобы твитнуть.

Что такое анатомия отличного веб-контента?

Чтобы написать хороший веб-контент, нужно попасть в целую серию «бычьих глаз».

Все они связаны с удовлетворением вашей аудитории. (Неудивительно, что там.)

Независимо от того, для какой отрасли вы пишете, какую бы тему вы ни освещали, величие всегда следует за этой анатомической структурой:

Мозг : Образовательный, информативный или практический?
Скелет : Хорошо ли он организован? Имеет ли это смысл в целом?
Мускулы : Это вас втягивает? Это заставляет вас хотеть / нужно , чтобы продолжить чтение?
Сердце : Вас это развлекает? Это резонирует?

Чтобы ваш веб-контент попадал в цель, включите каждую из этих жизненно важных частей.

Вот как.

7 способов писать отличный веб-контент для блогов-блокбастеров

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

Найдите время, чтобы отметить каждый из этих полей, и вы будете на пути к величию веб-контента.

1. Заставьте заголовок петь

Отличный кусок веб-контента на вес золота начинается с потрясающего заголовка.

Мы много писали о том, как оптимизировать заголовок для SEO, но как создать заголовок, который понравится читателям? Как создать простой хороший ?

3 способа писать лучшие заголовки

1.Обращение к мозгу человека

Люди действительно предсказуемы.

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

Вот что мы знаем. Учтите эти моменты при написании заголовков. Попробуйте включить один (или несколько) в свою фразу / предложение:

Человеческий мозг привлекают числа .Фактически, часть клеток нашего мозга предназначена исключительно для распознавания и интерпретации чисел. Когда вы включаете их в заголовки, вы подключаетесь к человеческому желанию количественно оценить ценность.
- Примеры : «5 простых способов сэкономить деньги», «10 советов по приготовлению вкусного торта», «3 веские причины открыть сберегательный счет»
Люди ненавидят чувство неуверенности . Скажем так: неуверенность = беспокойство = стресс. Если вы оставите заголовки слишком неоднозначными, вы вызовете нежелательную неуверенность и отпугнете людей.Согласно известному исследованию Conductor, большинство людей предпочитают откровенные заголовки, которые помогают им понять, что их ждет, если они читают ваш блог или статью.

Часть клеток нашего мозга предназначена исключительно для распознавания и интерпретации чисел. Когда вы включаете их в заголовки, вы подключаетесь к человеческому желанию количественно оценить ценность. @JuliaEMcCoy Нажмите, чтобы твитнуть

Люди задают вопросы в поиске. В частности, все больше и больше людей используют голосовой поиск для получения информации и задают вопросы полными предложениями. Отвечай им в заголовках! Обрамление заголовков в виде ответов также поможет вам ранжироваться по популярным запросам голосового поиска.
- Примеры : «Как завести автомобиль» «Как испечь именинный торт» «Вот почему вам следует открыть сберегательный счет»

2. Сохраняйте ясность, но не оскорбляйте их интеллект

При написании заголовков многие люди забывают о ключевом ингредиенте: ясности.

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

Конечно, так же легко пойти в другом направлении и придумать слишком упрощенный и очевидный заголовок. Показательный пример:

Вместо того, чтобы констатировать очевидное, сосредоточьтесь на удобочитаемости.

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

Просто вставьте заголовок в текстовое поле, и инструмент автоматически присвоит ему буквенную оценку в зависимости от того, насколько легко его читать.

Буквенная оценка основана на множестве различных показателей и шкал, включая Flesch-Kinkaid.

Еще один бесплатный инструмент, который работает аналогично, — это инструмент проверки читаемости WebpageFX. Просто вставьте заголовок в поле «Проверить прямым вводом» и нажмите «Рассчитать удобочитаемость».

Стремитесь к низкому уровню обучения — это означает, что это поймет практически любой, кто ее прочитает.

3.Используйте лучшую формулировку

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

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

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

Возьмем, к примеру, скромный заголовок:

« Как испечь торт »

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

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

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

Вот несколько советов, которые сделают заголовки ярче:

Будьте конкретны — У меня нет времени на общие слова; Интернет кричит на меня со всех сторон, и мое внимание ограничено. Скажи мне, что меня ждет. (То есть, какой торт я научусь печь? Торт на день рождения? Шоколадный торт? Лимонный торт? Фруктовый торт?)
Используйте прилагательные, но не слишком много. — Прилагательные делают заголовок более привлекательным и подталкивают читателей к эмоциональной реакции.Например, добавление положительных слов, таких как «хорошо», «отлично», «лучший», «замечательный», «захватывающий» и т. Д., Поможет создать эту положительную ассоциацию / эмоцию. Включите хотя бы одно прилагательное , чтобы вызвать эмоции, которые вы хотите, чтобы читатели почувствовали, когда они прочитают настоящий пост.
- Однако, , не попадайтесь в ловушку, набивая заголовок как можно большим количеством прилагательных. Согласно тому исследованию Conductor, на которое мы уже ссылались, большинству людей нравится видеть хотя бы один дескриптор или превосходную степень в заголовках, но не более того.

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

Когда я использую описанные выше методы для улучшения заголовка, он трансформируется:

« Как испечь торт » (* зевает *)

OR « Как приготовить самый лучший торт на день рождения »

Какой блог ВЫ хотите прочитать?

2.Расскажите о своей лучшей информации во вступлении

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

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

1. Начните с крючка

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

Вы не можете сделать это с помощью онлайн-письма.

Как вы пишете контент для веб-сайта?

Начать надо с крючка.

Верно.

Чтобы создать качественный веб-контент, с самого начала поделитесь своей основной мыслью, лучшей информацией. @JuliaEMcCoy Нажмите, чтобы твитнуть

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

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

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

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

2. Скажите им, ПОЧЕМУ им это должно быть небезразлично

Причина, по которой вы хотите сразу же поделиться своим лучшим материалом, — это концентрация внимания онлайн-читателя — это короткий .

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

Итак, РАССКАЖИ ИМ.

Начните с «почему». Дайте им повод остаться в вашем блоге — немедленно .

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

3. Организуйте свои очки

Как создатель контента, ваша задача — легко направлять читателя через ваши исследования и мыслительные процессы.

Читать сообщения в блоге не должно быть трудом.

Огромная часть упрощения — это логическая организация ваших точек. Конечно, лучший подход к этой организации зависит от того, о чем вы пишете.

1. Объяснение концепции? Перейти от простого к сложному

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

С чего начать? Как вы им это раскладываете?

Начните с общего и основного, а затем переходите к более сложным аспектам.

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

Затем мы углубляемся в особенности теории струн, от самых простых до самых сложных:

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

2.Написать листок с подсказками? От самого важного к наименее важному

Если вы пишете серию советов, приемов или приемов, вам не нужно писать их в каком-либо определенном порядке — но сначала вы должны попытаться поделиться своими самыми важными и лучшими советами. @JuliaEMcCoy Нажмите, чтобы твитнуть

Подобно тому, как вы должны начать с «почему» во введении, этот метод помогает удерживать читателя на странице.

Итак, сначала расставьте свои пункты с наиболее интересными или полезными советами, а затем переходите к более общим или общеизвестным.

C) Написание руководства? Пошаговые инструкции

С точки зрения организации написание руководства очень близко к объяснению концепции.

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

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

4. Ссылка и ссылка на высококачественные источники

Написание хорошего веб-контента — это не только о том, как вы систематизируете свои мысли или представляете информацию. Это также касается доказательства того, что ваши утверждения и утверждения точны и основаны на исследованиях / знаниях. .

Как вы это делаете? Убедитесь, что вы ссылаетесь и ссылаетесь на высококачественные источники.

Вот когда цитировать источник и давать ссылку:

Каждый раз, когда вы указываете статистику , т.е.е. «8 из 10 человек прочитают заголовок вашего блога».
Каждый раз, когда вы указываете факт, о котором никто не знает.
Каждый раз, когда вы ссылаетесь на другой веб-сайт, , т.е. «Hemingway Editor — отличный инструмент для самостоятельного редактирования».

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

Как судить о качестве интернет-источника

Чтобы повысить рейтинг вашего сайта в поисковых системах, вы должны пытаться ссылаться только на качественные и авторитетные веб-сайты.

Как узнать, качественный ли сайт? Быстрый способ узнать:

Загрузите расширение для браузера SEO, например SEOquake или MozBar.
Для каждого веб-сайта, на который вы хотите создать ссылку, сначала проверьте рейтинг авторитетности домена (DA). Чем выше оценка, тем авторитетнее сайт.
сайтов будут оценены по шкале от 1 до 100. В общем, любой сайт с рейтингом выше 50 является достаточно авторитетным, чтобы на него можно было ссылаться. Moz оценивает все объявления в результатах поиска, что упрощает поиск авторитетных источников:

4.Вы также можете проверить DA веб-сайта прямо на их странице. Он будет отображаться в MoBar так:

Помните: известные веб-сайты и бренды, вероятно, не нуждаются в проверке. (Вспомните The New York Times, Content Marketing Institute или Forbes.)

5. Проверьте свое исследование

Наряду с проверкой источников вы также должны еще раз убедиться, что вы ссылаетесь на исходных источников.

Что я имею в виду?

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

Например, есть много статистических обзоров, подобных этому:

Здесь перечислено множество ценных статистических данных о контент-маркетинге, но эта страница сама по себе не является источником .

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

В инфографике, полной статистики, обычно внизу мелким шрифтом:

Чтобы упростить поиск статистики, которую вы хотите процитировать, на исходной странице источника, воспользуйтесь функцией поиска в браузере.(Для пользователей Chrome просто нажмите «Ctrl + F» на клавиатуре. Затем введите статистику или фразу, о которой идет речь, чтобы найти ее на странице.)

Вы также можете искать PDF-файлы следующим образом:

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

6. Напишите правильную длину сообщения в блоге

Отличное содержание веб-сайта — это до .

И, как правило, тщательный = исчерпывающий = полный .

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

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

Однако имейте в виду, что, по данным Buffer, 74% читаемых сообщений в блогах длится менее 3 минут.

Это составляет не менее 1600 слов.

Контент, который получает наибольшее количество репостов обычно зависит от аудитории. Например, Buffer обнаружил, что их самые популярные сообщения содержат более 2500 слов.

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

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

7. Проиллюстрируйте свои мысли изображениями

Вот еще один фактор, присущий большинству видов мощного, вдохновляющего и отличного веб-контента:

Изображения перемежены текстом.

Лучшие примеры этого исходят от Нила Пателя — каждый пост наполнен примерами, скриншотами и инфографикой, которые расширяются по пунктам в тексте.

В этом есть смысл. Изображения добавляют визуальный интерес, ясность и даже юмор или азарт веб-контенту.

Изображения рядом с текстом также делают его более интересным для чтения.

Вы согласны?

Главное — использовать изображения, соответствующие тону голоса вашего бренда. Если у вас более формальная или элегантная атмосфера, вы, вероятно, не стали бы использовать гифки (как показано выше) в своих блогах. Вместо этого вы можете использовать графики, диаграммы и иллюстративные изображения.

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

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

Как написать отличный веб-контент для целевых страниц и веб-страниц

Целевые страницы отличаются от сообщений в блогах.

Этот тип веб-контента служит другой цели, поэтому требует другого подхода.

Целевые страницы

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

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

Вот пример одной из наших наиболее эффективных целевых страниц. Этот генерирует несколько подписчиков ежедневно. Эта конкретная страница позволяет вам загрузить наш Контрольный список стратегии содержания Easy ABC:

Весь контент на этой странице помогает вам сделать одно дело :

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

Как видите, целевые страницы невероятно ценны для конверсии трафика в потенциальных клиентов.

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

1. Напишите активный заголовок

Отличное веб-содержимое целевой страницы начинается и заканчивается призывом к действию. Начните с сильного и включите это в свой заголовок. Вот как:

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

Вот хороший пример от HubSpot:

Заголовок содержит мотивирующий глагол: « Get Started »

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

Через CoSchedule

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

Вот целевая страница с слишком длинным заголовком (не кем иным, как Adobe):

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

Что еще хуже, CTA просто читается как «Отправить».

Не хорошо.

Используйте слово «вы». — Согласно исследованию HubSpot, призывы к действию, которые напрямую обращаются к читателю (с использованием слова «вы»), на 42% лучше конвертируют его.Таким образом, поговорите с читателем в заголовке веб-контента и сделайте его в 10 раз более мощным.

Вот отличный пример веб-контента от Copy Hackers, в котором используются все вышеперечисленные принципы:

2. Сделайте основной текст легко просматриваемым

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

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

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

Это означает несколько вещей:

Короткие абзацы
Множество разрывов строк
Использование нумерованных и маркированных списков с логическими
Использование h3s, h4s и даже h5s при необходимости

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

Изображение из Daily Egg

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

3. Сосредоточение внимания на преимуществах пребывания

При написании веб-контента оставаться ориентированным на преимущества также означает оставаться ориентированным на пользователя.

Это потому, что преимущества передают особенности вашего продукта / услуги так, как они относятся к считывателю .

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

Вот пример веб-контента, ориентированного на преимущества, с целевой страницы программы членства Barnes & Noble. Льготы подчеркнуты красным:

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

4. Напишите призыв к действию, кричащий читателю

Веб-контент без призыва к действию неэффективен. Период. Когда пользователи попадают на страницу, они не будут знать, что им делать, если вы им не укажете.⏭️ @JuliaEMcCoy Нажмите, чтобы твитнуть

Итак, направьте их! Вот несколько простых способов сделать это.

1. Ориентируйтесь на заголовок

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

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

Вот пример сильного призыва к действию от CoSchedule.

Заголовок гласит: « Пора отказаться от импровизированного маркетинга». Обожаю!

Между тем, CTA отражает заголовок: « Удалите импровизированный маркетинг на обочину »

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

2. Поощряйте, вдохновляйте и мотивируйте читателя действовать

Хороший призыв к действию действительно мотивирует.

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

Возьмем CTA выше в качестве отличного примера: « Перенесите импровизированный маркетинг на обочину ».

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

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

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

Один из наших CTA в EW делает именно это, вдохновляя вас думать о создании контента, например о выпечке хлеба или приготовлении свежего блюда. Чтобы получить свежий конечный продукт, который понравится их аудитории, все, что им нужно сделать, это подойти к нашей «прилавке» и заказать:

Помогите своей аудитории подумать о новых действиях — отличный способ вдохновить их.

Как писать отличный веб-контент: 5 хороших, плохих и уродливых примеров

Хотите узнать, как написать хороший контент для веб-сайта?

Учись на собственном примере.

Вот несколько хороших (и не очень).

Вот как написать отличный контент для вашего веб-сайта

Вдохновляйтесь этими блогами и веб-страницами:

1. CoSchedule

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

2. SmartBlogger

Примеры отличных сообщений в блогах, которые интересно читать и информативно, можно найти в SmartBlogger. Этот блог, в частности, хорошо организован и изобилует ценной информацией.

3. Аэродром

Хотите великолепные примеры целевых страниц и веб-страниц? Посетите веб-сайт Airstory — они разбираются во всех аспектах качественного веб-контента.

примеров некачественного веб-содержания — не делайте этих ошибок!

Плохой веб-контент.Вот несколько примеров, которые помогут прояснить различие.

1. Сбивает с толку и отвлекает

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

Серьезно, что мне делать на этой странице?

2. Тонкий и тусклый

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

Эээ, что?

Кроме того, содержание отсутствует — нет информации о его вкусе, предложений по сервировке, советов по украшению или идей для вариаций. Мы просто получаем очень расплывчатые ингредиенты и инструкции.

Короче говоря, для меня здесь нет ничего ценного.

Последние шаги для написания хорошего веб-контента

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

Пишем сайт: Создание веб-сайта. Курс молодого бойца / Хабр

Создание веб-сайта. Курс молодого бойца / Хабр

Создание идеи

Разработка структуры проекта

Проработка макета проекта

Основные элементы страницы

Содержащий блок (контейнер)

Логотип

Навигация

Контент

Нижний колонтитул (footer)

Резиновый и фиксированный макет

Фиксированный макет

Резиновый макет

Почему при «резиновом» дизайне создаётся несколько макетов, а не используется один?

Модульная сетка

Макеты веб-страниц

Mobile First

Элементы Call to Action

AIDA

Схема просмотра страницы

Визуальные направляющие

Фрэймворки

Трэнды

Скевоморфизм

Плоский дизайн

Редакторы кода

Структура проекта

Работа над проектом

Написание HTML

Правила именования классов

БЭМ

SMACSS

Написание CSS

Reset.css

Normalize.css

Написание JS

Проверка кода

Средства автоматизации

960GS

Emmet

Jade

Командная строка

Sass

HTML5Boilerplate

Gulp и Grunt

Bootrstrap, Foundation, Material Design Lite

Создание веб-сайта. Курс молодого бойца / Хабр

Создание идеи

Разработка структуры проекта

Проработка макета проекта

Основные элементы страницы

Содержащий блок (контейнер)

Логотип

Навигация

Контент

Нижний колонтитул (footer)

Резиновый и фиксированный макет

Фиксированный макет

Резиновый макет

Почему при «резиновом» дизайне создаётся несколько макетов, а не используется один?

Модульная сетка

Макеты веб-страниц

Mobile First

Элементы Call to Action

AIDA

Схема просмотра страницы

Визуальные направляющие

Фрэймворки

Трэнды

Скевоморфизм

Плоский дизайн

Редакторы кода

Структура проекта

Работа над проектом

Написание HTML

Правила именования классов

БЭМ

SMACSS

Написание CSS