Содержание

Что должно быть на главной странице сайта? Требования для правильного оформления


Когда пользователь зайдет на сайт, он в считанные секунды составит свое впечатление о вашем бизнесе и первое, что он увидит – главная страница сайта. Будет ли она понятна, красива и удобна? От этого зависит останется пользователь на сайте и купит ваш продукт или нет. В этой статье мы собрали все основные принципы, которыми стоит руководствоваться при создании дизайна и наполнения главной страницы сайта компании. После прочтения этой статьи вам будет намного легче составить прототип главной страницы сайта или техническое задание для подрядчика.


Зачем нужна главная страница


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

  1. Информативность


  2. Отвечать запросу целевой аудитории


  3. Функциональность и удобная навигация


  4. Содержать призывы к действию


  5. Быть визуально привлекательной


Логотип


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


Навигация


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


Подвал на сайте


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


Каким должен быть оффер


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


Приоритет на целевом действии


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


Применение изображений


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


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


Главная страница интернет-магазина


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

  • товарный каталог с фильтрацией по ценам, популярности и брендам


  • «плитки» нескольких товаров из различных категорий (например, бестселлеры или товары со скидками)


  • информация об акциях


  • ссылки на личный кабинет и корзину


  • адрес и контактная информация


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


Главная страница сайта с услугами


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

  • преимущества работы с вашей компанией

  • перечень оказываемых услуг с кратким описанием

  • цены на основные виды услуг

  • портфолио с выполненными работами и отзывами от ваших клиентов

  • форма заявки и контактная информация


Главная страница «продуктового» сайта


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

  • подробное описание вашего продукта

  • фотографии продукта

  • преимущества продукта перед конкурентами

  • отзывы и обзоры на продукт

  • информацию о вашей компании

  • один или несколько блоков с призывом купить


Главная страница сайта компании


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

  • описание основных продуктов (для каждого из продуктов можно выделить отдельную «продуктовую» страницу)

  • преимущества работы с вашей компанией

  • миссию и историю компании


Что не должна содержать главная страница сайта


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

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


  • рекламные баннеры


  • нечитаемый шрифт


  • грамматические ошибки


  • очень большое количество элементов на сайте

Страница index.

Урок 12.

Что такое страница index? Это главная страница сайта.

У каждого сайта есть главная страница. Предположим у нас сайт автомобильной тематики имеющий 4 страницы. Это страница про автомобили Audi, вторая про BMW, третья про Mercedes и четвертая — это главная страница нашего сайта. Соответственно папка в которой находится наш сайт будет иметь 4 файла. Это audi.html, bmw.html, mercedes.html и index.html

Допустим наш сайт уже находится в интернете и имеет доменное имя «nemeckieavto.ru».
По ссылке nemeckieavto.ru/audi будет открываться наш файл audi.html
По ссылке nemeckieavto.ru/bmw будет открываться наш файл bmw.html
По ссылке nemeckieavto.ru/mercedes будет открываться наш файл mercedes.html
Теперь внимание! Для того, чтобы попасть на главную страницу нашего сайта, не нужно вводить в адресной строке nemeckieavto.ru/index, достаточно будет только ввести nemeckieavto.ru

Тем кто не понял, вот второй вариант объяснения:
1) Каждый сайт в интернете имеет доменное имя (домен).
2) Каждый сайт (за исключением одностраничных) имеет энное количество страниц (файлов), которые имеют свои названия.
3) Эти самые страницы (файлы) сайта будут доступны по адресу www.домен/название страницы
4) Главная страница сайта (файл index.html) будет доступна по адресу www.домен

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

Создаем еще три страницы html.

На 2-ом уроке мы создали папку «Сайт» и в ней создали файл с расширением html. Скорее всего этот файл у Вас называется «new 0». Сейчас давайте в этой папке создадим еще 3 файла. Чтобы не заморачиваться с расширением и с кодировкой (2 урок), можно просто сделать 3 копии нашего файла «new 0». Таким образом у нас получится 4 файла с расширением html. Перед тем как сделать копии, удалите все html коды, которые мы писали в процессе работы. Оставьте только теги относящиеся к структуре html страницы.

С этими файлами мы будем работать в следующих уроках. Теперь давайте переименуем файлы и дадим им имена audi.html, bmw.html, mercedes.html и index.html. Не используйте в названии файлов заглавные буквы, с чем это связанно, Вы узнаете из следующего урока. Внимание! Если я пишу, что файл должен иметь имя, например, bmw.html, то это не значит что нужно дать ему имя bmw.html, это значит ,что файл должен иметь имя bmw, а html — это расширение (тип) файла, а не часть его имени!

Для тех, кто в танке, в результате в папке «Сайт» у нас 4 файла с расширением html:

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

Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]

ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ

Как и что писать на главной странице сайта: основные блоки текста

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

Но вот создается впечатление, что о чем писать на главной станице сайта – тайна за семью печатями. Как иначе объяснить наличие всяких «Добро пожаловать, вы попали на сайт компании», «Рады приветствовать вас на сайте интернет-магазина» и полотен текстов вместе с ними? И нет, мы не выдумываем, количество такого контента до сих пор зашкаливает, хотя давно пора от него избавиться и писать для людей. Однако стоит заглянуть в выдачу, и вуаля:

Признайтесь себе честно, вынесли из этого текста что-то полезное? Да и вообще, стали бы его читать, визуально привлек он вас? Вот то-то и оно.

Или вот еще вариант покороче, но также не несущий никакой пользы:

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

Или еще такая главная с текстом:

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

Еще раз о важном: зачем писать текст на главную страницу?

Хороший текст на главной – это в первую очередь грамотный и внимательный продавец. Кто еще расскажет о вашем продукте или услуге и буквально за руку подведет к покупке?

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

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

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

Что писать на главной странице сайта?

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

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

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

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

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

Как писать текст на главную страницу?

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

Первый – поток сознания без какой-либо конкретики, или второй – хорошо структурированный, продуманный текст с фактами и разбивкой на смысловые блоки? Вывод напрашивается сам.

Интуитивно составленный текст обо всем и сразу хорошим «продажником» не будет. Фактически вы выливаете на человека ушат холодной воды, при этом не поясняете ничего и оставляете его с информацией один на один. Что он будет с ней делать и что должен с ней делать – это уже остается за кадром. Так делать нельзя. =)

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

При этом не надо изобретать велосипед, есть проверенные схемы продающих текстов:

  • AIDA (Внимание – Интерес – Желание – Призыв к действию)

  • ACCA (Внимание – Понимание, восприятие аргументов – Убеждение – Призыв к действию)

  • PAS (Проблема – Внимание – Решение)

  • ODS (Оффер – Ограничения – Призыв к действию) и т.д.

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

Какие блоки и информацию использовать?

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

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

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

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

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

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

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

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

Максимально полный список блоков при написании текста на главную страницу выглядит так:

  • заголовки;

  • теглайн в шапке;

  • УТП и текст в первом экране;

  • описание товара \услуги;

  • цены и их обоснование;

  • преимущества с упором на выгоды клиента;

  • гарантии;

  • сертификаты\документы;

  • наглядные и подробные кейсы;

  • схема работы;

  • акции\скидки\спецпредложения;

  • информация о сотрудниках компании;

  • отзывы;

  • дополнительная важная и полезная информация;

  • слайдеры;

  • призыв к действию.

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

Мастхевы или что не забыть написать на главной странице сайта

Цепляющие заголовки

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

Посмотрим на примерах:

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

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

Информация о продукте или услуге

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

Вот отличный пример того, как делать не стоит:

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

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

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

Цены

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

А) «не хочу, чтобы мои цены видели конкуренты, поэтому их никогда не укажу»;

Б) «у меня нет фиксированной стоимости, все просчитывается индивидуально».

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

Представьте, вы пришли в «Эльдорадо» за чайником, а там вместо ценников на всех товарах табличка «запросите прайс у продавца». Оно вам надо? Логичнее и проще пойти в «М-Видео», посмотреть цены и купить.

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

Несколько примеров реализации для вдохновения:

  1. Указываем диапазон цен и даем пояснение, от чего они зависят – берем котика для дома, племенного разведения или для выставок.

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

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

Преимущества с упором на выгоды клиента

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

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

Сплошное «мы-мы-мы» и одна вода. Какие сроки, как качество проверить – тайна, покрытая мраком.

Рассказывайте о вещах в мире клиента: «доставим до двери в течение 1 дня – вам не придется ждать товара неделями», «дадим вам гарантию в 50 лет, т.к. уверены в качестве нашего товара». Продавайте не себя, а выгоды. Как это сделать, мы подробно писали в этой статье.

Призыв к действию

Прямо пишите, что должен сделать посетитель после прочтения текста: позвонить, написать, нажать кнопку, перейти в каталог и т.д. Целевое действие, оно же CTA, фактически является элементом гипноза. Оно стимулирует, дает пользователю четкую инструкцию, что и как следует сделать для получения товара или услуги.

Часто сталкиваемся с такой ситуацией, когда клиент просит убрать CTA и все прочие «очевидные элементы» – мол его посетители и так догадаются что к чему, не надо из людей идиотов делать. Так вот, не догадаются: представьте, вы пришли на сайт, пролистали 5 экранов текста и вдруг он резко закончился. Ни телефона, ни ссылки, ни формы, ни кнопки. Куда обращаться-то? В шапку вернуться – это опять что-то листать и прокручивать. А если и там не будет контактов компании – вообще беда, искать на других страницах уже никто не будет. Поэтому получается такая картина: вроде написали на главную страницу сайта текст, причем неплохой, человек им заинтересовался, а как с вами связаться – элементарно не указали. Как итог, клиента потеряли.

Вот несколько хороших примеров оформления CTA:

Доставка, оплата, схема работы

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

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

Это снимет лишние вопросы и повысит доверие – все четко, прозрачно, а значит никаких подводных камней и обмана.

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

От чего сразу и бесповоротно можно отказаться на главной

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

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

Вместо выводов

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

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

Большое руководство по созданию структуры и планированию контента для веб-сайта

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

Пример структуры веб-сайта (Блоки кликабельны)

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

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

Начало

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

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

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

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

Звучит многообещающе? Тогда начинаем!

Основной совет

Навигация и футер

Прежде всего сфокусируйтесь на панели навигации и футере вашего сайта.

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

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

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

Максимизируйте CTR

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

Поэтому, разместив наиболее ценную информацию и элементы призыва к действию CTA (call-to-action) в эффективном первом поле экрана, вы увеличите показатель кликабельности (CTR — click-through rate) и завладеете вниманием посетителя. Речь идет буквально о 3-4 секундах, за которые посетитель сканирует экран и, не найдя быстро нужной информации, чаще всего сразу покидает страницу.

Призыв к действию (CTA)

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

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

Политика конфиденциальности GDPR

Если ваша целевая аудитория — это клиенты из стран ЕС, то обработка данных пользователей должна соответствовать правилам обработки персональных данных GDPR (General Data Protection Regulation), принятых в Европе.

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

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

Структура

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

Вот эти страницы, из которых состоит грамотно сбалансированная структура сайта:

  • Главная

  • О нас

  • Продукты / Услуги

  • FAQ

  • Вакансии

  • Блог

  • Контакты

  • Ошибка 404

  • Правовая информация

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

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

  • Главная

  • О нас

  • Продукты / Услуги

  • Контакты

  • Правовая информация

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

Цель каждой страницы, включенной в структуру вашего сайта — преобразовывать посетителей в клиентов. Страницы образуют последовательности, постепенно подогревая интерес перемещающихся по ним посетителей, чтобы те в итоге очутились на странице вашего продукта или услуги. Все остальное является частью user flow (пользовательского потока).

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

Главная страница

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

Содержание:

  • Hero image / Основной визуальный посыл

  • Продукт / Услуги

  • Ключевые преимущества

  • О нас

  • Вакансии

  • Отзывы (тематические исследования, рекомендации)

  • CTA

Пример главной страницы — iea.org

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

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

“Главная страница — это как лобби отеля. Хотя это и важная часть отеля, но это не то место, где ваши гости хотели бы остановиться. Они хотят попасть в свой номер.”

Hero image

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

Чтобы лучше понять какой посыл должно нести это изображение, ознакомьтесь с концепцией JTBD (jobs-to-be-done), краткий смысл которой состоит в том, что у клиента на данный момент есть конкретная задача / проблема, которую надо выполнить, и он ищет лучшее решение (продукт), который поможет ему в этом. Ваша же цель — дать ему понять, что ваш продукт решает эту задачу.

Ваши продукты / услуги

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

Обозначьте характеристики и преимущества продукта

Как сказал Саймон Синек в своей знаменитой речи — люди покупают не то, ЧТО вы делаете, они покупают то, ПОЧЕМУ вы делаете это.

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

Социальное влияние

Люди склонны прислушиваться и доверять своему окружению. Еще один прекрасный способ быстро внедрить и распространить информацию — это добавить отзывы о вашей компании или продуктах. Сосредоточьтесь на вашей целевой аудитории и добавьте соответствующие отзывы. Чем более известен и публичен автор отзыва, тем лучше. Не беспокойтесь, если вы еще не засветились на TechCrunch или Forbes; ваши посетители должны быстро установить положительный эмоциональный контакт с рецензентами, вот что важно на данный момент.

О нас

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

Содержание:

  • История / timeline

  • Цели и миссия компании

  • Отзывы

  • Команда

  • Партнеры

  • Видео

  • Статистика

  • Интересные факты

Пример страницы О компании — hines.com/about

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

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

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

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

История компании

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

Ваши основные принципы

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

И снова отзывы

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

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

Люди за кулисами

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

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

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

Партнеры

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

Если это имеет отношение к делу — добавьте эту информацию.

Запишите видео

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

Статистика и интересные факты

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

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

Продукты / услуги

Зачем создавать: продемонстрируйте свои продукты детально и обрисуйте в общих чертах их ценности.

Содержание:

  • Изображения

  • Описание

  • Особенности и преимущества

  • Цены

  • Отзывы / рекомендации

  • Контактная форма

  • FAQ

Пример страницы Услуги/Продукты — stripe.com/payments

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

Вместе или раздельно

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

Визуальный язык

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

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

Описание продукта

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

Особенности и преимущества (ценность)

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

Цены

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

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

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

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

Актуальность обратной связи

Мы уже коснулись важности отзывов и рекомендаций. Добавление отзывов клиентов по конкретным продуктам — отличный способ показать ценность продукта для вашей целевой аудитории.

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

Будьте на связи

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

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

Подготовьте ответы на вопросы заранее

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

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

Навигация

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

FAQ

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

Содержание:

  • Вопросы и ответы

  • Поиск

  • Живой чат

Пример страницы Помощь / FAQ — help.dropbox.com

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

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

Разделение по темам

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

Поиск

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

Отвечайте на вопросы напрямую

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

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

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

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

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

Вакансии

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

Содержание:

  • Преимущества работы у нас

  • Вакансии

  • Фильтры

  • Форма заявки

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

Пример страницы Вакансии — spotifyjobs.com

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

Чем вы лучше остальных?

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

Кого конкретно вы ищете?

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

Отдельная страница для каждой вакансии

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

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

Аргументируйте

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

Блог

Зачем создавать: делиться своими знаниями и опытом, исследованиями и идеями, получать мощную поддержку SEO.
Содержание:

  • Контент, который создает ценность

  • Привлекательные изображения

  • Видео

  • Комментарии

  • CTA

  • Ссылки на профили в соцсетях

Пример страницы Блог — goodonyou.eco/category/stories

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

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

“Напрасно ты приобрел знания, если не передал их другим”

Дварим Рабба (комментарий к Книге Второзаконие)

Если ваш блог регулярно обновляется, поисковые системы видят, что ваш сайт “живой” и чаще индексируют ваш сайт.

Мы уже упоминали про рейтинг по релевантным ключевым словам. Для этого убедитесь, что ваши тексты имеют относительно большой объем, не менее 250 слов. Для лонгридов — от 800 слов. Осторожно придерживайтесь SEO оптимизации текстов.

Добавив блог, вы естественным образом получаете еще одно преимущество: увеличение продолжительности сеансов пользователей, которое поднимает вас в поисковой выдаче. Чем более интересны ваши посты и записи, тем больше времени посетители будут тратить на их чтение и, кстати, не переписывайте (rewrite) чужие блоги, это неэффективно.

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

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

Заманите читателя

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

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

С точки зрения Pillar модели это позволит URL-адресам, таким как «https://yoursite.com/blog/#seo», выступать в качестве идеальных хабов для накопления органического трафика со смежных кластерных страниц. Роботы идентифицируют страницы как смежные, если они правильно сшиты.

Упорядочьте содержимое

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

Изображения и видео

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

Позвольте аудитории высказаться

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

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

Кнопки навигации

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

Расшарьте контент

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

Страница новостей

Что у нас по новостям? Похоже, что на сайтах компаний менее 1% посетителей считают новости стоящими своего времени. Кроме того, корпоративные новости часто воспринимаются как слишком субъективные и самовосхваляющие. Изучите поведенческие паттерны групп пользователей; возможно, вы обнаружите, что тот небольшой процент посетителей, интересующихся вашими новостями — это те, кто конвертируются лучше остальных.

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

Контактная информация / связаться с нами

Зачем создавать: позволить посетителям оперативно связаться с вашей компанией и улучшить SEO.

Содержание:

  • Номера телефонов, e-mail (для разных целей)

  • Форма обратной связи

  • Карта

Пример страницы Контакты — rndhouse.com/contact

Хотя страница контактной информации является одной из базовых страниц для любого веб-сайта, она также является одной из самых важных.

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

Категоризация

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

Создайте форму

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

Местоположение

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

Ошибка 404

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

Содержание:

  • Изображения / видео / интерактивные элементы

  • Сообщение об ошибке

  • Ссылки на другие страницы сайта

Пример страницы Ошибка — netflix.com/notfound

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

Ключевые моменты

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

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

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

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

Правовая информация

Зачем создавать: расскажите о своем соответствии требованиям законодательства.

Содержание:

  • Политика конфиденциальности

  • Уведомления об авторских правах

  • Правила и условия пользования

  • Дисклеймер

  • Злоупотребление или жалобы контактная информация

  • Патенты

  • Корпоративная политика

Пример страницы Privacy Policy — samuelsre.com/privacy-policy

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

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

  1. Содержит всю необходимую информацию, разбитую на пронумерованные абзацы

  2. Написана в понятной для большинства людей форме

  3. Соответствует общему дизайну сайта

Заключение

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

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

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

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

Какой должна быть структура сайта — Онлайн-курсы Яндекса

1. Немного теории

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

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

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

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

Каждая статья или товар должны размещаться на отдельной странице со своим уникальным адресом (URL).

Желательно, чтобы по адресу можно было определить, что находится на странице и в каком разделе и подразделе её можно найти. Например, для статьи про сосновые стулья подошел бы адрес http://siteforyandex.com/mebel/stool/stool-sosna. Адрес может быть написан и на кириллице, и на латинице — важно, чтобы он был понятным. Помимо адреса, путь до страницы можно выводить на сайте в виде дополнительного меню. Такое меню называется «хлебными крошками»: по ним пользователь может вернуться к более общему разделу сайта.

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

Как оформить главную страницу сайта?

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

  2. Какие есть правила эффективной главной страницы?

  3. Что учитывать для сайта по продаже товаров?

  4. Какие основные правила при создании главной странице на сайте, предлагающем какие-либо услуги?

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

  • Какое впечатление сложится у посетителя.

  • Будет ли человек побужден перейти на другие разделы сайта.

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

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

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

  1. Посмотреть на собственный сайт и его главную страницу глазами пользователя.

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

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

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

Что должно быть на главной странице любого сайта

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

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

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

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

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

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

  • Заголовок.

  • Шапка сайта.

  • Навигация.

  • УТП.

  • Конверсионная форма.

  • Футер.

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

Эффективный заголовок – побуждение к действию

От качественного заголовка ожидается, чтобы он привлекал внимание посетителя сайта и побуждал его просматривать страницу дальше. Создавая такой заголовок, необходимо одновременно преследовать несколько целей – он должен привлекать внимание посетителя, четко показывать, что его ожидает на этой странице и сайте в целом. Хорошо работают такие заголовки, которые создают интригу у посетителя или положительные образы/сравнения. Можно выделить 6 основных типов заголовков для главной страницы сайта:

  1. заголовок-вопрос;

  2. заголовок-лозунг;

  3. заголовок-заявление;

  4. информационный заголовок;

  5. креативный заголовок;

  6. заголовок-цитата.

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

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

Какой должна быть шапка сайта

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

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

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

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

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

Меню навигации – быстрый и удобный переход в необходимый раздел сайта

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

  • Одноуровневая.

  • Двухуровневая.

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

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

УТП – мощный инструмент в продажах

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

  1. Проведите аудит конкурентов, подчеркивая для себя сильные и слабые стороны использующегося ими УТП.

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

  3. Определите свою целевую категорию, которая потенциально может воспользоваться вашим предложением.

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

  5. Составьте и отредактируйте текст УТП.

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

Конверсионные формы – мощное средство захвата

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

  • Позвонить менеджеру.

  • Подписаться на рассылку.

  • Купить товар.

  • Заказать услугу и пр.

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

Футер сайта – техническая информация, которой нельзя пренебрегать

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

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

  • Иконки социальных сетей.

  • Контакты и другая информация о компании.

  • Карта проезда.

  • Другая техническая информация.

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

  1. Какой должна быть главная страница интернет магазина.

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

Как должна выглядеть главная страница интернет магазина

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

  • Скидки/акции.

  • Блок новинки.

  • Популярные товары.

Эффективный блок «Скидки/акции»

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

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

 

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

Блок «НОВИНКИ» больше, чем информация

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

«Популярные  товары» — создавайте спрос

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

ОкаyCMS – все, что нужно для интернет-магазина

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

  • Отзывов, вызывающих доверие.

  Сравнения товаров, позволяющем определиться с наиболее подходящими моделями.

·Просмотренных товаров и многого другого.

Примеры удачного оформления главной страницы интернет-магазина

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

  1. Coffeeok.com.ua – интернет-магазин, специализирующийся на продаже кофе, чая, посуды и сопутствующих товаров. Его главная страница удачно сочетает в себе информационные и продающие функции. А набор лидогенерирующих элементов в виде призывов и кнопок хорошо способствует увеличению продаж.

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

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

  1. arc.com.ua – хороший пример интернет-магазина с двухуровневой системой навигации на платформе Окай. Компания предлагает достаточно большой перечень товаров. Благодаря каталогу, пользователь быстро найдет то, что ему нужно, а пункты меню навигации позволяют всего-лишь в несколько кликов перейти на нужную страницу сайта.

Как должна выглядеть главная страница сайта услуг

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

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

  1. Каталог услуг.

  2. Портфолио.

  3. Отзывы.

Каталог услуг – вызовите интерес к своему предложению

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

Портфолио – подтверждение профессионализма

Благодаря качественно выполненному блоку с портфолио, заявления об опыте и профессионализме переходят из разряда лозунгов в разряд фактов. Размещайте в этом разделе только примеры своих реальных работ, а не скопированные фото из интернета. Также, в услугах хорошо работают фотографии «до/после».

«Отзывы» — вызывают доверие, подтверждают заявления

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

Примеры удачного оформления главной страницы сайта услуг

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

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

  1. Goodfix. Преимущество данного сайта является ненавязчивость и практичность. Разработчики решили свести элементы к минимуму и оставить только наиболее важное – это эффективный инструмент конверсии.

3.Sharplaw.ru. Сайт юридической компании с хорошо проработанным дизайном главной страницы. Также отлично выдержана верстка страницы по экранам. Хорошо составлен контента, но недостаток главной в том, что на ней нет заголовка и УТП.

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

Как создать WEB-страницу или знакомство с HTML : WEBCodius

Здравствуйте, уважаемые читатели блога. С этой статьи мы начнем изучать основы языка HTML.

Вам скорей всего уже известно, что основным языком Internet-а является язык гипертекстовой разметки HTML (HyperText Markup Language). В этой статье мы узнаем базовые понятия HTML и научимся создавать простейшие WEB-страницы.

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

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

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

Любой такой щелчок заставляет браузер сделать запрос на html-страницу web-серверу, получить ответ и отобразить страницу в своем окне. Именно при отображении страницы начинает работать язык HTML, он сообщает браузеру все о структуре и содержимом web-страницы.

С помощью команд — тегов, HTML указывает браузеру, где начинаются абзацы текста, какая часть текста является заголовком и указывает куда вставлять таблицы, и даже картинки. А теги это слова в угловых скобках, например «p», «h2», «table».

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

Язык HTML и его теги

Первая версия языка HTML появилась еще в 1992 году. На момент 2013 года разрабатывается спецификация новой версии HTML под номером 5. Разработкой данной спецификации занимается организация World Wide Web Consortium, или сокращенно W3C.

Организация W3C занимается разработкой и других Web-стандартов. Ознакомится с этими стандартами вы можете на их сайте www.w3.org. Кстати, Многие Web-браузеры уже поддерживают некоторые возможности HTML 5.

Предлагаю начать изучение языка HTML сразу с примера. Поэтому давайте создадим нашу первую Web-страничку. Для создания WEB-страниц подойдет любой текстовый редактор.

Я предлагаю для начала воспользоваться встроенным в Windows Блокнотом (Notepad)(вообще в дальнейшем для редактирования html-кода я советую использовать бесплатный текстовый редактор Notepead++). Найти его можно: «Пуск — Все программы — Стандартные — Блокнот». Давайте создадим страничку об автомобилях. Итак, откроем Блокнот и наберем в нем текст:

код для создания странички

Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:

Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:

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

Что такое тег?

Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент:

фрагмент кода

Здесь мы видим текст, который отображается на странице как заголовок, заключенный в тег «h2». Что же такое тег в html языке?

Тег HTML — это обычные слова и символы, заключенные в угловые скобки, например «h2», «p», «body». Так тег «h2» является открывающим тегом, тег «/h2» закрывающим тегом, а текст между ними называется содержимым тега.

Также тег «h2» и тег «/h2» называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще элементы состоящие из одного открывающего тега:

Так парный тег «h2» определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы «h2» — «h6».

Элементы бывают блочные и строчные (текстовые). Блочные элементы осуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы осуществляют непосредственное форматирование текста или логическое форматирование. Элемент h2 является блочным элементом.

Далее идет парный тег «p», который создает на HTML-странице абзац. Содержимое данного тега станет текстом этого абзаца. Элемент «p» также является блочным элементом и как мы видим он начинается с новой строки и между заголовком h2 и абзацем есть отступ.

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

Данный тег «strong» вложен внутрь содержимого тега «p». Это значит, что содержимое тега strong будет отображаться как часть абзаца. Такие вложенные теги называются дочерними, а теги в которые вложены другие теги называются родительскими. Таким образом, тег «strong» является дочерним, а тег «p» — родительским. Такая вложенность тегов встречается в HTML сплошь и рядом.

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

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

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

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

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

Структура WEB — страницы. Основные html теги.

Для корректного отображения страницы в браузере, в html-коде обязательно наличие следующих парных тегов: html, head и body.

Во-первых весь ваш html-код должен быть заключен в теги «html» и «/html». Они сообщают браузеру, что страница содержит html-код.

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

пример заголовка страницы

Тело документа выделяется с помощью тегов «body» и «/body». Сюда помещается весь контент страницы, то что будет отображаться в браузере.

Подводя итог вышесказанному, любая html-страница имеет следующую структуру:

структура любой хтмл-страницы

Метаданные html страницы

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

строки кода

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

Следующий метатег «meta» сообщает браузеру кодировку нашего документа. В данном случае мы создали нашу web-страницу в кодировке utf-8. Информацию о кодировке мы передали браузеру с помощью атрибута «content» тега «meta».

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

Тип HTML документа (doctype)

Осталось рассмотреть один тег нашей первой WEB-страницы, который находится в самом начале html-кода: «!doctype html». Данный тег задает версию языка HTML, на котором написана страница, и его версию.

Он необходим, чтобы браузер понимал согласно какому стандарту отображать веб-страницу. Метатегов doctype существует несколько видов, и они различаются в зависимости от версии языка, на котором написан html-код. Так, наш тег !doctype html указывает на версию языка HTML5.

Итак, подведем итоги:

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

2. HTML — это язык, который используется для создания web-страниц. HTML — это аббревиатура HyperText Markup Language (язык гипертекстовой разметки).

3. WEB-страницы состоят из html-тегов и их содержимого. Теги состоят из символов и имени внутри них. Имена тегов можно писать как прописными(большими), так и строчными(маленькими) буквами. Между символами и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк. Теги бывают парные и одиночные, а также теги могут быть вложенными друг в друга.

4. Открывающий тег + содержимое + закрывающий тег образуют элемент. Бывают также элементы состоящие из одного открывающего тега. В HTML есть блочные элементы и строчные. Блочные элементы всегда выводятся с новой строки и имеют отступ сверху и снизу от соседних элементов. Строчные элементы осуществляют логическое форматирование текста.

5. Открывающие HTML-теги могут содержать атрибуты, которые помещаются между именем тега и символом и отделяются от имени тега пробелом. Если в теге несколько атрибутов, то они отделяются друг от друга пробелами. Атрибуты бывают обязательные и необязательные.

6. Любая WEB-страница должна содержать в себе две секции: секция заголовков head и секция тела body. Эти секции должны находиться внутри тега html. Это основные теги html, без которых не обходится ни одна html-страница.

7. Вначале HTML-кода должен идти метатег doctype, указывающий версию языка.

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

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

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

На этом у меня все!!! До встречи в следующих постах!

Что в имени? (2012)

Списки пользователей

Связанные списки от пользователей IMDb

список из 39 наименований

создано 2 месяца назад

список из 44 наименований

создано 29 июля 2018 г.

список из 37 наименований

создано 9 месяцев назад

список из 29 наименований

создано 13 мар 2018

список из 27 наименований

создано 26 февраля 2013 г.

.

Неофициальные страницы Elder Scrolls

Последние новости

Готово

монет к 25-летию УЭСП! — 25 сентября 2020 г.,

Мы только что получили изображение готовых монет к 25-летию Unofficial Elder Scrolls Pages. Мы рады сообщить, что все наши нынешние покровители получат по одному! Кроме того, любой, кто поддерживает наш Patreon до 31 декабря на любом из годовых уровней (самый дешевый — от 21,60 долларов в год), также получит монету вместе с другими преимуществами этого уровня.

Вы можете узнать больше об этих монетах и ​​о том, как поддержать этот сайт, на нашем Patreon.

Creation Club должен вернуться к концу года — 2 октября 2020 года

После почти целого года отсутствия релизов было объявлено, что Creation Club скоро вернется, с текущей целью выпустить релиз до конца года. Первоначально релиз был запланирован на март, но все новые Creations были отложены из-за перехода Bethesda на удаленную работу в связи с COVID-19.По словам Картогриффи, менеджера сообщества Bethesda по контенту сообщества, несмотря на то, что все было готово, включая патч, переход сделал невозможным его выпуск, как есть по причинам, которые не были раскрыты.

Кроме того, хотя Bethesda планирует выпустить некоторые творения до конца года, они утверждают, что не прекращали разработку творений в течение этого года и что им, скорее всего, придется выпустить несколько выпусков из-за количество проделанной работы. Хотя конкретные подробности о большей части контента в настоящее время не были предоставлены, менеджер по контенту сообщества упомянул, что было одобрено экспериментальное создание для The Elder Scrolls V: Skyrim и Fallout 4 , которое будет сосредоточено исключительно на квесте, вместо награды за предмет или локацию.Однако с задержкой объем обоих этих экспериментов был увеличен, и теперь в них будут представлены заметные награды за предметы.

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

Событие «Утраченные сокровища Скайрима» успешно завершено — 2 октября 2020 г.

Событие «Потерянные сокровища Скайрима» успешно завершено сообществом Elder Scrolls Online .Для тех, кто не был знаком с событием, игроки должны были в период с 23 сентября по 5 октября выкопать нераскрытое количество древностей в обмен на различные награды. Ранее сегодня команда ESO объявила, что игроки уже достигли цели, и у них осталось три дня. Игроки, владеющие главой Greymoor , могут до 15 октября в 10:00 по восточному времени получить награды в бесплатном наборе в Crown Store. Игроки, которые заберут набор, получат:

  • Ужас внутри отметин на лице и теле
  • Олень из долины Орхидей
  • Антикварная Альпийская галерея и Антикварный дом Федра

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

Bone Wolf Creation временно бесплатно — 01 октября 2020 г.

В ознаменование наступления самого жуткого месяца в году Creation Club предлагает бесплатно создание Bone Wolf Creation в течение текущего периода распродажи. Выкупив его в течение этого периода, он будет навсегда разблокирован для вашей учетной записи даже после окончания текущей распродажи.Кроме того, в продаже есть набор Безумного бога, Создание гоблина, Чума мертвых и Ужас мертвеца со скидками от 25 до 40 процентов от обычной цены.

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

Microsoft приобретает ZeniMax Media — 21 сентября 2020 г.

Elder Scrolls Online: Markarth и подробности об обновлении 28 — 20 сентября 2020 г.

Команда Elder Scrolls Online провела стрим, чтобы обсудить Elder Scrolls Online: Markarth , а вместе с ним и заключение сюжетной линии Dark Heart of Skyrim.Как и предполагалось, Маркарт и Предел будут служить основным местом действия дополнения, наряду с другим ранее неизведанным сегментом Черного Предела. DLC покажет, что вы формируете слабый альянс с кланами Ричменов в этом районе, такими как те, которые возглавляет деспот Маркарт, против Серого воинства и планов Рады аль-Саран. Разработчики также дразнили, что будет раскрыт главный секрет Verandis Ravenwatch.

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

.

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

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

Обсуждались также новые и предстоящие события. Особо следует отметить предстоящее мероприятие «Потерянные сокровища Скайрима», посвященное системе «Античность» и награду за участие в которой получит сообщество. Также было объявлено об акции под названием Tamriel Together , хотя было только упомянуто, что она будет включать в себя розыгрыши, соревнование гильдий и другие необъявленные функции.График оставшихся мероприятий на год включает:

Расширение будет доступно 2 ноября для платформ PC, Mac и Stadia. Игроки на консолях смогут пройти Dark Heart of Skyrim 10 ноября. DLC будет немедленно доступен для всех подписчиков ESO Plus или будет доступен для покупки в Crown Store. DLC можно будет испытать в начале PTS 21 сентября.

Официальный анонс можно увидеть здесь. Большой пост с подробным описанием боевых изменений в обновлении 28 можно прочитать на официальных форумах.Кроме того, здесь можно увидеть анонс Lost Treasures of Skyrim.

Elven Hunter Creation временно бесплатно — 20 сентября 2020 г.

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

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

Elder Scrolls Online: Markarth подтверждено для расширения четвертой четверти — 10 сентября 2020 г.

Команда Elder Scrolls Online объявила название заключительной главы сюжетной линии Dark Heart of Skyrim, Маркарт . Название предполагает, что расширение будет сосредоточено на самом Каменном Городе, и что расширение будет происходить внутри и вокруг Предела, как предполагалось ранее.Хотя ранее было объявлено, что расширение в четвертом квартале будет называться Darkstorm , ZeniMax Online Studios утверждает, что они изменили название по той простой причине, что они предпочли Markarth , а не Darkstorm .

В субботу, 19 сентября, в 15:00 по восточноевропейскому времени команда ESO проведет стрим на официальном канале Twitch от Bethesda, чтобы рассказать о расширении. Кроме того, они будут делать объявления о будущих игровых событиях и раскрывать новую акцию.В качестве дополнительного стимула для просмотра те, кто просматривает трансляцию в прямом эфире, получат питомца Purple Torchbug, изображенного в этой истории.

Вы можете просмотреть официальное объявление здесь.

Dragonscale и Nix-Hound Creations временно бесплатно — 7 сентября 2020 г.

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

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

Elder Scrolls Online Начало празднования Имперского города — 3 сентября 2020 г.

Elder Scrolls Online в настоящее время проводит свое мероприятие по случаю празднования Имперского города, пятое подобное мероприятие в истории игры.Поскольку DLC Imperial City по-прежнему является бесплатным в Crown Store, все игроки могут участвовать, если захотят, хотя игроки, которые еще не владеют им или не имеют ESO Plus, должны добавить DLC в свою учетную запись. Во время события вы получите больше камней Тел Вар за убийство монстров, у вас будет больше шансов получить питомца Каменного Огня и Скинущую душу оболочку, вы получите удвоенное количество фрагментов ключа и бонусную добычу от Трофейных Бродяг и Хитрых Бродяг. Кроме того, в первый раз, когда вы выполните ежедневное задание в Имперском городе или победите последнего босса в тюрьме Имперского города или Башне Белого Золота, вы получите Славный ларец Legion Zero.Славный ларец Legion Zero может содержать некоторые из ранее упомянутых наград, а также страницы с мотивами Xivkyn или стилями Legion Zero Vigiles и Tools of Domination. Выполнение большего количества материалов в тот же день даст вам шанс получить более приземленный ларец Legion Zero.

Более подробную информацию можно увидеть в официальном анонсе здесь или в нашей статье.

Обновление 27 ESO и выход Stonethorn — 24 августа 2020 г.

The Elder Scrolls Online только что выпустила Обновление 27 и его последний DLC для набора подземелий, Stonethorn для платформ ПК / Mac, Steam и Stadia.Релиз DLC включает в себя два одноименных подземелья, Stone Garden и Castle Thorn. Эти подземелья являются продолжением продолжающейся сюжетной линии Dark Heart of Skyrim и создают основу для предстоящего завершения сюжетной арки. Обновление также включает в себя новые наборы снаряжения, достижения и коллекционные предметы. Кроме того, был включен ряд исправлений ошибок и улучшений производительности, а также новая система перемещения персонажей для игрового жилья.

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

Dwarven Mail and Camping Creations временно бесплатно — 24 августа 2020 г.

В рамках продолжающейся распродажи предметов Клуба творчества для The Elder Scrolls V: Skyrim Special Edition , гномья почта и творения для кемпинга временно доступны бесплатно. Выкупив их в течение этого периода, они будут навсегда разблокированы для вашей учетной записи даже после окончания текущей распродажи. Исходя из наблюдаемых тенденций, предложения Creation Club обычно обновляются каждые две недели в четверг, поэтому не забудьте получить их до 3 сентября.

Саундтрек Greymoor выпущен — 19 августа 2020

The Elder Scrolls Online подтверждено для Xbox Series X и PlayStation 5 — 6 августа 2020 г.

Команда The Elder Scrolls Online поделилась планами выпуска консолей следующего поколения. ESO будет доступен на Xbox Series X и PlayStation 5, хотя они не смогли сообщить дату выпуска игры на этих платформах. Они также описали новые версии консолей как «обновленные», хотя в настоящее время не известны какие-либо особенности, помимо совместимости с новыми консолями.Игроки Xbox One и PlayStation 4, которые владеют ESO на своих консолях или купят его до выпуска версии игры следующего поколения, получат обновленную версию игры без дополнительной платы.

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

Официальный анонс можно увидеть здесь.

.