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

26 октября 2017 Web

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

Чек-лист основан на многолетнем опыте фронтенд – разработчиков. Давайте взглянем на него:

  1. Заголовок;
  2. HTML;
  3. Веб-шрифты;
  4. CSS;
  5. Изображения;
  6. JavaScript;
  7. Безопасность;
  8. Производительность;
  9. Доступность;
  10. SEO.

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

В нашей статье мы используем 3 уровня важности элементов:

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

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

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

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

  • ?: Документация или статья;
  • ?: Онлайн инструмент;
  • ?: Медиа контент.

Приступим к обзору чек-листа.

Здесь вы сможете найти список всего, что должно быть в теге head HTML – документа.

Метатеги

[ ] Doctype: предназначен для указания типа текущего документа. Этот мета тег всегда находится в самом начале странички и имеет вот такой вид:

  <!doctype html>
  • ? Определение кодировки символов – HTML5 W3C

Следующие 3 метатега (Charset, X-UA Compatible и Viewport) должны быть первыми в теге head.

[ ] Charset: метатег, предназначенный для объявления кодировки документа.

   

[ ] X-UA-Compatible: метатег, предназначенный для указания версии Internet Explorer. Указание версии необходимо для комфортного отображения сайта.

   
  • ? Подробнее об этом метатеге.

[ ] Viewport: с помощью этого метатега мы указываем, как должен выглядеть наш сайт на разных платформах и устройствах.

    

[ ] Title: Название используется на всех страницах (SEO: не более 65 символов, включая название сайта).

  Page Title less than 65 characters

[ ] Description: С помощью этого метатега мы указываем метаописание страницы. Оно уникально и не может иметь более 150 символов.

   

[ ] Favicons: данный метатег предназначен для задания иконки сайта. Если у вас есть только favicon.ico, поместите его в корень вашего сайта.  По – прежнему хорошей практикой является ссылка на него, используя приведенный ниже пример. Иконка рекомендуется в формате PNG (размеры: 32x32px).

       
  • ? Favicon Generator
  • ? RealFaviconGenerator
  • ? Favicon Cheat Sheet
  • ? Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? – CSS Tricks
  • ? PNG favicons – caniuse

[ ] Apple Touch Icon: создание значка для Apple устройств.

   
  • ? Configuring Web Applications.

[ ] Canonical: Используйте rel = “canonical”, чтобы избежать дублирования контента.

HTML теги

[ ] Language tag: указание языка вашего сайта.

[ ] Alternate language: указание языка одной из ваших страниц вашего сайта.

[ ] RSS feed: Если ваш проект является блогом или имеет статьи,то обязательно должна быть ссылка на RSS ленту вашего сайта.

[ ] CSS Critical: данный тег собирает все CSS, используемые для визуализации в видимой части страницы. Он встроен перед вашим основным вызовом CSS и между </ style>.

  • ? Critical by Addy Osmani on Github

Социальные метатеги

Facebook OG и Twitter Cards для любого веб-сайта настоятельно рекомендуются. Другие метатеги социальных сетей можно рассмотреть, если вам необходимо их использование.

[ ] Facebook Open Graph: Facebook Open Graph (OG) необходим для тех, кто использует для своего сайта группу или страницу в Facebook.

  • ? A Guide to Sharing for Webmasters
  • ? Проверьте свою страницу с помощью Facebook OG testing

[ ] Twitter Card:

  • ? Getting started with cards — Twitter Developers
  • ? Test your page with the Twitter card validator

Лучшие практики

[ ] HTML5 Semantic Elements: Семантические элементы HTML5 используются соответствующим образом (заголовок, раздел, нижний колонтитул, основной …).

  • ? HTML Reference

[ ] Error pages: Ошибка 404 и 5xx. Помните, что страница ошибок 5xx должна иметь встроенный CSS (без внешнего вызова на текущем сервере).

[ ] Noopener: Если вы используете внешние ссылки с target = "_ blank", ваша ссылка должна иметь атрибут rel = "noopener", чтобы запретить табуляцию вкладок. Если вам нужно поддерживать более старые версии Firefox, используйте rel = "noopener noreferrer".

  • ? About rel=noopener

[ ] Clean up comments: Ненужный код необходимо удалить перед публикацией сайта или страницы.

Тестирование HTML

[ ] W3C compliant: Все страницы должны быть протестированы с помощью валидатора W3C для определения возможных проблем в HTML-коде.

  • ? W3C validator

[ ] HTML Lint: Используйте инструменты, которые помогут проанализировать любые проблемы, возникающие в HTML-коде.

  • ? Dirty markup

[ ] Desktop Browsers: Все страницы должны быть протестированы на всех современных настольных браузерах (Safari, Firefox, Chrome, Internet Explorer, EDGE …).

[ ] Mobile Browsers: Все страницы должны быть протестированы на всех современных мобильных браузерах (Native browser, Chrome, Safari…).

[ ] Link checker: Убедитесь, что на вашем сайте отсутствуют битые ссылки.

  • ? W3C Link Checker

[ ] Adblockers test: Веб-сайт должен правильно демонстрировать ваш контент, с включенными рекламными блоками.

[ ] Webfont format: шрифты WOFF, WOFF2 и TTF поддерживаются всеми современными браузерами.

  • ? WOFF – Web Open Font Format – Caniuse.
  • ? WOFF 2.0 – Web Open Font Format – Caniuse.
  • ? TTF/OTF – TrueType and OpenType font support
  • ? Using @font-face – CSS-Tricks

[ ] Webfont size: Размеры шрифтов не должны превышать 2 МБ.

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

[ ] Responsive Web Design: Убедитесь, что ваш веб-сайт использует адаптивный веб-дизайн.

[ ] CSS Print: Каждой странице соответствует корректная таблица стилей.

[ ] Preprocessors: На вашей странице используется препроцессор CSS (предпочтение отдается Sass).

[ ]  Unique ID: Если используются идентификаторы, то они должны быть уникальны для каждой страницы.

[ ] Reset CSS: Сброс CSS (сброс, нормализация или перезагрузка) используется. (Если вы используете CSS-структуру, такую как Bootstrap или Foundation, в нее уже включен Normalize).

  • ? Reset.css
  • ? Normalize.css
  • ? Reboot

[ ] JS prefix: Все классы JavaScript tначинаются с js- и не используются в CSS-файлах.

   

[ ] CSS embed or line: Избегайте любой ценой использования встроенного CSS: используется только по уважительным причинам (например: background-image для слайдера, критический CSS).

[ ] Vendor prefixes: Префиксы поставщика CSS используются и генерируются соответственно совместимости с поддержкой браузера.

  • ? Autoprefixer CSS online

Производительность

[ ] Concatenation: Файлы CSS объединены в один файл.

[ ] Minification: Все файлы CSS уменьшены.

[ ] Non-blocking: Файлы CSS должны быть неблокируемыми, чтобы не отнимать время загрузки сайта.

  • ? loadCSS by filament group
  • ? Example of preload CSS using loadCSS

[ ] Unused CSS: Удалите неиспользуемый CSS код.

  • ? UnCSS Online
  • ? PurifyCSS
  • ? Chrome DevTools Coverage

Тестирование CSS

[ ] Stylelint: Все файлы CSS или SCSS без ошибок.

  • ? 20 советов для написания современного CSS

[ ] Responsive web design: Все страницы были протестированы на следующих разрешениях: 320 пикселей, 768 пикселей, 1024 пикселей (может быть больше).

[ ] CSS Validator: CSS файлы были протестированы, и исправлены соответствующие ошибки.

[ ] Reading direction: Все страницы должны быть протестированы для языков LTR и RTL, если они нуждаются в их поддержке.

Чтобы получить полное представление об оптимизации изображений, ознакомьтесь с бесплатной книгой Essential Image Optimization  от Addy Osmani.

Лучшие практики

[ ] Optimization: Все изображения должны быть оптимизированы для отображения в браузере.

  • ? Imagemin
  • ? Используйте ImageOptim для оптимизации ваших изображений.

[ ] Sprite: Маленькие изображения находятся в файле CSS спрайтов (в случае значков они могут быть в виде спрайта SVG).

[ ] Width and Height: Убедитесь, что все [ ] Alternative text:  Убедитесь, что все[ ] JavaScript Inline:  Убедитесь, что у вас нет встроенного JavaScript-кода (смешанного с вашим кодом HTML).

[ ] Concatenation: Файлы JavaScript объединены в одном файле.

[ ] Minification: Файлы JavaScript уменьшены (вы можете добавить суффикс .min).

Перевод статьи “Front-end checklist”

МЕРОПРИЯТИЯ

ПРОЖЕКТОР 2022

08 февраля Онлайн Бесплатно

Lead/Manage IT 2022

11 февраля Онлайн Бесплатно

Android meetup

03 февраля Онлайн Бесплатно

Freedom Релиз

08 февраля Онлайн Бесплатно

ВАКАНСИИ

Добавить вакансию

Программист 1С Санкт-Петербург, по итогам собеседования Node.js Developer Москва, по итогам собеседования UX/UI дизайнер Санкт-Петербург, от 80000 RUB до 200000 RUB

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

Подборка материалов по HTML и CSS

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

15 прекрасных плагинов для Sublime Text

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

Изучение JavaScript с нуля

Рассказ программиста о том, как добиться успехов в изучении JavaScript.

Чек-лист для посадочной страницы — 26 пунктов на проверку

Автор: Алексей Харитонов12.03.2020 Разработка landing page — сложный процесс. Легко наделать ошибок, из-за которых конверсия устремится к нулю. Наш чек-лист поможет вам этого избежать. image

1. Изучили ли вы предложения конкурентов?

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

2. Определили ли вы ступеньку клиента на лестнице Ханта?

Прежде чем приступать к разработке лендинга, подумайте, на какой ступеньке лестницы узнаваемости Бена Ханта находится ваш клиент.  image «Ступенька» во многом зависит от источника трафика. Например, потенциальные клиенты, которые придут из таргетированной рекламы чаще будут находиться на 1-2 ступени. В свою очередь, пользователи из поисковой контекстной рекламы — на 3-5 этапах. Соответственно, в первом случае придется более подробно раскрывать суть вашего предложения, нагнетать «боль» клиента, пробуждать его желание обладания товаром. Для этого можете воспользоваться маркетинговой формулой PHMS (Боль-Нагнетание боли-Надежда-Решение).  Во втором же случае, аудитория уже осознала свою проблему и целенаправленно ищет решение. Поэтому, в большей степени стоит сосредоточиться на:

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

3. Подходящий ли тип лендинга вы выбрали?

Существует множество разновидностей лендингов, среди которых можно упомянуть: Squeeze Page — усеченная версия посадочной страницы, с одним, максимум двумя полями ввода. Подходит для сбора e-mail адресов потенциальных клиентов. Она выполняется в минималистичном стиле — фоновая картинка, заголовок и дескриптор, обещающие некую ценность, которую получит пользователь в обмен на свои контактные данные. Часто это полезный контент. Этот тип лендинга распространен в инфобизнесе. Продающая страница — лендинг для продажи «в лоб», на котором используются кнопки наподобие «Купить прямо сейчас». Лендинги этого типа могут очень отличаться друг от друга по длине — все зависит от сложности и стоимости продукта, а также «ступеньки» на лестнице Ханта. Создание продающих лендингов — сложная маркетинговая задача, при решении которой особое внимание уделяется отстройке от конкурентов. Этот тип обычно используется при продаже не слишком дорогих товаров. Click-through Page — это лендинг, на котором пользователю сходу предлагается совершить необременительное для него целевое действие. Например, установить пробную версию программного обеспечения. Лидогенерирующая страница — наиболее распространенный тип. Сложный дизайн, формы заявки, СTA элементы — то, с чем в принципе ассоциируется лендинг. На практике этот комбинированный тип лендинга нередко еще и заменяет небольшим компаниям домашнюю страницу.

4. Не подгоняете ли вы структуру лендинга под чужой шаблон?

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

5. Создает ли ваша картинка эффект ментального взаимодействия?

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

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

Эффект ментального взаимодействия на лендинге для производителя жалюзи.

Удивительно, но такие нехитрые приемы усиливают ментальное взаимодействие пользователя с товаром, повышают конверсию. К таким выводам пришли в 2012 году западные исследователи Ариадна Кришна и Райан Эдлер.

6. Удалось ли вам достигнуть компромисса между качеством и размером изображений?

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

7. Показывает ли выбранное фото товар «в действии»?

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

8. Используете ли вы подстройку под мысли пользователя?

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

9. Ваша кнопка CTA достаточно контрастная?

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

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

10. У вас только одна яркая кнопка CTA на разворот?

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

11. Не злоупотребляете ли вы прямыми призывами к покупке в сегменте B2B и при продаже сложных товаров?

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

  • скачать прайс;
  • подписаться на рассылку;
  • посетить семинар и т. д.

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

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

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

  • Действие и выгода. Например, «Заказать бесплатный замер потолка».
  • Действие, выгода и указание дедлайна. Например, «Установить со скидкой 40% только сегодня».
  • Действие и время. Например, «Скачать сейчас».

13. Применяете ли вы усилители предложения?

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

14. Соответствует ли текст кнопки содержанию блока?

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

15. Ваша кнопка — прямоугольник с закруглёнными углами?

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

16. Вы используете минимум полей в лид-форме?

Чем меньше полей в вашей форме, тем лучше. Во-первых, люди в принципе не любят их заполнять. Во-вторых, по подсчетам компании Mediascope, 28,8 миллионов россиян вообще заходят в интернет исключительно с мобильных устройств, а заполнять форму с телефона еще и неудобно. 

17. Ваша лид-форма располагается справа?

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

18. Сопровождается ли форма связи призывом к действию?

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

19. У вас не имеется фейковых отзывов с изображениями с бесплатных фотостоков?

«Юрист из Санкт-Петербурга», которого пользователь ранее видел в переводной рекламе подгузников, отнюдь не внушает доверия.

20. Вы приводите не менее 3-4 отзывов?

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

21. Вы указываете под отзывами ссылки на «живые» профили в соцсетях? 

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

22. Вы используете видеоотзывы?

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

23. Собираете ли вы подпечатанные отзывы?

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

24. Ваши отзывы отличаются друг от друга по своей стилистике?

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

25. Используете ли вы кейсы в связке с отзывами?

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

26. Имеется ли на вашем лендинге, предлагающем услуги, блок «наша команда»?

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

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

2939

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

Обязательно должен содержать в себе следующую информацию:

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

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

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

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

  1. Списком, в котором последовательность пунктов не имеет значения (например, список значений некоего поля);
  2. Списком, в котором последовательность пунктов важна (например, шаги в краткой инструкции).
  3. Структурированным (многоуровневым) списком (вне зависимости от учёта последовательности пунктов), что позволяет отразить иерархию идей.

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

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

Правила составления чек-листов:

  • Одна операция.
  • Пункты чек-листа — это минимальные полные операции. Например, заказать изготовление визиток и доставить визитки в офис — это 2 разных операции. Поэтому в чек-листе они отображаются отдельными пунктами: визитки заказаны и визитки доставлены в офис.
  • Пункты пишутся в утвердительной форме. Цель чек-листа – проверка готовности задачи, поэтому лучше составлять пункты в утвердительной форме — «заказаны, доставлены». Сравните формулировку: «заказать визитки» и «визитки заказаны».
  • Оптимальное количество пунктов — до 20. Чек-листы не должны быть длинными. Если все же это требуется, то лучше разбить задачу на несколько этапов и составить к каждому этапу отдельный чек-лист.

Преимущества использования чек-листов:

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

Технические аспекты

В этой статье речь пойдёт о том, на что нужно обратить внимание и проверить, перед тем как запускать свой сайт. А также расскажу о том, какие показатели нужно отслеживать после запуска в первую очередь.

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

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

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

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

Технические аспекты перед запуском

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

1) Корректно ли составлен robots.txt.

2) Корректно ли составлен sitemap.xml.

3) Наличие технических дублей страниц. Обязательно должны быть склеены основные зеркала:

  • с www и без www;
  • со слешем “/” в конце и без слеша;
  • с и без index.php, index.html, home.php и т. п.

4) Установлен ли атрибут «canonical» на страницах пагинации и страницах с get-параметрами в URL. На них должен стоять атрибут rel=canonical с указанием основной страницы.

5) Есть ли страницы с 404 кодом ответа сервера и битые ссылки. 404 страницы не должны быть пустыми, они должны:

  • Первым делом несуществующая страница должна отдавать 404 код ответа сервера, чтобы исключить их из индекса поисковых систем. Также необходимо убрать все внутренние битые ссылки, которые ведут на 404 страницы.
  • Предусматривать дальнейшее взаимодействие с сайтом.
  • Важным моментом является то, чтобы такие страницы отслеживались в Яндекс.Метрике и Google Analytics.

6) Проверьте 5** ошибки — это ошибки сервера, которые возникают при обработке запроса пользователя. Такие ошибки нужно исключить.

image

7) Проверьте вёрстку с помощью validator.w3.org. Вёрстка на сайте должна соответствовать стандартам W3C и проходить валидацию без критических ошибок. Также вёрстку можно проверить через инструмент Яндекс.Вебмастера:

image

8) Проверьте, чтобы сайт был доступен по одному из протоколов HTTP или HTTPS, так как страниц со смешанным содержанием быть не должно.

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

image

10) Есть ли возможность добавления и редактирования метаданных в админке сайта. Важным моментом является то, чтобы при запуске веб-ресурса не было дублей основных тегов Title, Description, H1.

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

12) Проверьте скорость загрузки сайта.

image

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

Полезная статья: https://siteclinic.ru/blog/internal-optimization/obnovlenie-google-speed-update/.

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

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

  • «Проверка мобильных страниц» в Яндекс.Вебмастере;

image

  • Mobile-Friendly в Google.

15) Проверьте сайт на кроссбраузерность. Сайт должен корректно открываться и отображаться с разных браузеров, например, Firefox, Opera, Edge. Чтобы быстро проверить кроссбраузерность, мы используем специальный сервис — http://browsershots.org/.

16) Установлены ли счётчики и подтверждены ли права. Перед тем как запустить сайт нужно обязательно установить счётчики аналитики и подтвердить права в панелях вебмастеров:

  • установить Я.Метрику и Google Analytics;
  • подтвердить права в Я.Вебмастере и GSC;
  • дополнительно устанавливают Google Tag Manager, а также счётчики других ПС.

17) Настройте цели в системах аналитики (Яндекс.Метрика и Google Analytics), это поможет отследить целевые визиты и конверсию сайта. Можно настроить их и после запуска, однако если сделать это сразу, вы сможете точнее определить эффективность сайта с точки зрения бизнеса.

18) Обязательно проверьте, присвоен ли регион в Яндекс.Вебмастере.

image

Существует 2 распространённых ошибки у региональных сайтов:

  • расширение региона (например, указание «Город и область» вместо «Город»);
  • отсутствие привязки сайта к какому-то региону вообще.

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

19) Проверьте сайт на наличие в Яндекс.Справочнике и Google Мой Бизнес. Так как указание основного офиса и всех филиалов в этих сервисах поможет улучшить позиции в регионах, а также позволит получить дополнительный трафик из Яндекс.Карт, отзывы реальных пользователей и рейтинг организации.

За чем следить после запуска сайта?

1. Поведенческие факторы

К ним относятся такие показатели:

  • процент отказов;
  • количество страниц, посещённых пользователем за сеанс;
  • время, проведённое на сайте;
  • CTR на поиске;
  • возвраты на поиск и возвраты на сайт из поиска;
  • шеринги в соцсети.

Отслеживайте следующее:

1) Нужно следить, чтобы страницы входа отвечали ключевому запросу. Бывает, что по определённым запросам ранжируются не те страницы, которые мы оптимизировали под них. Для отслеживания позиций и релевантных страниц мы используем сервис SEOlib.

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

3) Следите, чтобы время, которое пользователь проводит на сайте, не было меньше, чем у основных конкурентов. Если этот показатель значительно превышает ваш – это плохой признак, и нужно поработать над улучшением. То же касается и соотношения «просмотренные страницы / сеанс». В таком случае нужно работать с юзабилити и думать, как удержать людей на сайте.

4) Следить за CTR. Если у сайта низкий CTR, прежде всего нужно удостовериться, что title и description написаны корректно и привлекательно, от этого будет зависеть, перейдёт ли пользователь на сайт из поисковой выдачи.

2. Наличие фильтров

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

Отслеживайте следующее:

1) Следите за предупреждениями в вебмастерских. Первое, что стоит проверить – оповещения в сервисах для вебмастеров. Если на сайт наложили фильтр, вы увидите оповещение с причиной, по которой были наложены санкции.

2) Следите за наличием аффилированных сайтов. Если два сайта принадлежат одному владельцу, Яндекс не показывает их по одному запросу. Случается, что сайты разных компаний признаются аффилиатами. Для проверки можете использовать сервис — https://arsenkin.ru/tools/.

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

4) Следите за тем, чтобы не было скрытой переадресации на моб. устройствах. Например, в результатах поиска на десктопе и на мобильном фигурирует один адрес. В первом случае пользователь попадает по нему, а во втором – перенаправляется на посторонний сайт. Это происходит в случае взлома сайта либо из-за элемента или скрипта, отвечающего за показ рекламы и предоставленного сторонним рекламодателем. Инструкция Google по обнаружению такой переадресации — https://support.google.com/webmasters/answer/6388720.

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

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

3. Внешние факторы

Отслеживайте следующее:

1) Стоит следить за тем, чтобы на сайт не вели ссылки с ресурсов запрещённых тематик или с подозрительными анкорами, так как очень часто, чтобы «завалить» сайт конкурента, недоброжелатели начинают закупать на сайт некачественные внешние ссылки. Внимательно следите за тем, чтобы в ссылочном профиле не попадалось ссылок с порно-сайтов, казино и т. п., а также анкоров с вхождениями фраз запрещённой тематики. Также проверьте доноров на явные отличия по тематике – возможно, там размещены SEO-ссылки.

2) Следите за тем, чтобы среди исходящих внешних ссылок были только релевантные и полезные для пользователя. Бывает, что сайты взламывают для незаметного размещения документа, где 100500 внешних ссылок. Такие «помойки» легко вычислить и убрать.

Заключение

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

P.S. А как вы готовите проект к запуску? Делитесь в комментариях.

Если у Вас возникли проблемы при запуске сайта, обращайтесь к нам!

Заказать аудит сайта

Еще по теме:

  • Четыре совета от представителей Google
  • Как грамотно составить ТЗ для программиста
  • Как сделать редизайн и переезд сайта без потерь позиций и трафика
  • Пример ТЗ на разработку сайта: универсальные пункты и образец составления
  • Что такое атрибут rel=“canonical”, когда и как его использовать?

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

image Наверх

Оцените статью
Рейтинг автора
4,8
Материал подготовил
Егор Новиков
Наш эксперт
Написано статей
127
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий