Разработка сайта по готовому дизайну

По вопросам верстки (анимации, скрол или другие моменты - напрямую к дизайнеру, контакты предоставлю).

Дизайн: https://www.figma.com/file/0nHIoEkM8Sjj1Jaa20QdbC/VDALO?node-id=0%3A1

Адаптив (моб версия) дизайна в процессе. 

Структура:

• Главная

• Предметы, по которым есть подготовительные курсы (типовая страница):

  • украинский

  • история

  • математика

  • английский

  • герграфия

  • биология

  • физика

  • химия

• О нас (Якорь)

• Стоимость (Якорь)

• Отзывы (Якорь)

• FAQ (Якорь)

• Контакты (в футер) (Якорь)

• Бесплатные мастер-классы

• Страница способов оплаты

• Страница 404

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

• Страница благодарности с мастер-класса

Структура схематично:

https://miro.com/app/board/o9J_kpXLJzU=/

Детали:

• 2 языковые версии (укр по дефолту)

• Сайт должен быть совместим с браузерами:

•    Internet Explorer 9.0 и выше

•    Google Chrome 35.0.X и выше

•    Mozilla Firefox 35.0 и выше

•    Opera 12 и выше,

•    Safari версии 5

• интерфейс сайта должен быть адаптирован к разрешению экрана компьютера, планшета и мобильного телефона (есть дизайн)

• внедрены все пункты по seo. Это не рекомендации, а то что нужно внедрить (далее в ТЗ)

• Лого маленьких размеров (60х60, 76х76, 120х120, 152х152), для отображения в мобильных браузерах при добавлении в закладки и т.д. + Favicon (предоставлю в процессе) 

• моб номера и почта кликабельные в моб версии

• по нажатии на лого - на главную

• блок “мы в инстаграм” - подтягиваются последние фото из инсты
  
  

Система управления:

Мы должны иметь возможность менять:

• тексты

• фотки преподов, отзывов, и в других местах где есть именно фото

• https://prnt.sc/tpc951 (добавлять/убирать предметы в этом блоке, от 2 до 8 штук)

• https://prnt.sc/tpca10 (добавлять убирать новых преподов в этом блоке)

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

• убирать блок с акцией чтобы при этом не ломался дизайн - https://prnt.sc/tpcdk0 

• убирать/добавлять отзывы

• убирать/добавлять предметы здесь - https://prnt.sc/tpcei0 (от 4 до 8) 

Другое:

• часть по seo будет проверять сеошник, если какие вопросы - дам контакты

• нужно будет поставить пискель фб и гугл аналитикс (дам коды)

SEO часть

1. Ответы сервера

1.1. Поиск ссылок с кодами ответа 3**.

В коде сайта не должно быть ссылок с кодами ответа 3**

1.2. Поиск ссылок с кодами ответа 4**.

В коде сайта не должно быть ссылок с кодами ответа 4**

1.3. Анализ корректной отработки 404-й страницы.
Все несуществующие страницы должны отдавать ответ сервера 404 («не найдено»).

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

2. Тексты и контент

2.1. Каждая страница сайта (главная, категория, подкатегория) должна иметь возможность редактирования контента страниц в админке сайта.

2.2. Каждая страница сайта (главная, категория, подкатегория) должна иметь возможность редактирования мета-тегов Title, Desription и H1 в админке сайта.

2.3 Теги Н

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

На одной странице должен быть только один <Н1>.

2.4. Сквозные блоки, модули сайта не должны быть обрамлены заголовками H2-H6 и Strong. Данные заголовки и теги используются только при оформлении контента.

3. Технические дубли

3.1. Проверка на дубли главной страницы.

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

Например: 

Поставить 301 редирект со страницы https://site.ua/index.php на страницу https://site.ua.

Поставить 301 редирект со страницы https://site.ua/index.html на страницу https://site.ua.
Поставить 301 редирект со страницы https://site.ua/home на страницу https://site.ua. 

Поставить 301 редирект со страницы https://site.ua/ru на страницу https://site.ua.

3.2. Проверка на дубли основного зеркала сайта.

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

Например: 

с https://www.site.ua на https://site.ua  

3.3 Дубли страниц с слешом и без

https://site.ua/korm-dla-sobak/

https://site.ua///korm-dla-sobak  

https://site.ua/korm-dla-sobak  

Необходимо поставить 301-й редирект со всех страниц с дублированием слеша “//” в URL на соответствующие страницы согласно структуры сайта.

Пример:

поставить 301 редирект с страниц

https://site.ua/korm-dla-sobak/ 

https://site.ua///korm-dla-sobak 

на страницу

https://site.ua/korm-dla-sobak 

*основная версия страницы без слеша

3.4. Проверка на дубли разных регистров.

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

Пример:

https://site.ua/SOBAKI    

https://site.ua/sobaki   

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

Со всех URLов, в которых возникают символы верхнего регистра поставить 301 редиректы на соответствующие URLы с нижним регистром.

3.5. Проверка на дубли приставок расширения сайта (.php, .html, .htm, со / и без).

Необходимо настроить 301 редирект со всех дублирующих страниц на основные. Пример: с

https://site.ua/avto.php 

https://site.ua/avto.htm 

https://site.ua/avto.html 

https://site.ua/avto/ 

на

https://site.ua/avto 

4. Написание рекомендаций по увеличению скорости загрузки.

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

Проверка будет проводится по таким типам страниц: главная, категория, карточка товара, страница-фильтр, страница пагинации.

5.1 Проверка скорости загрузки от Google: https://developers.google.com/speed/pagespeed/insights/ 

Здесь будут приведены рекомендации Google, выполнение которых должно привести к увеличению скорости загрузки сайта. Конечная цель - увеличение скорости загрузки до “зеленой” зоны.

5.2 Проверка скорости загрузки через Lighthouse

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

Нужные показатели:

Performance > 30

Progressive Web App > 40

Accessibility > 80

Best Practices > 85

SEO = 100

5. Анализ URL на наличие правильного ЧПУ для сайта

ЧПУ - это сокращение фразы “ЧеловекоПонятные УРЛы” (на английском, Search Engine Friendly URLs), что означает красивые и дружественные адреса. 

Все УРЛы на сайте должны быть ЧПУ статического вида.

Правельный урл https://site.ua/biljardnyj-kij-tjomnyj-grab-2-1-721      

Не правельный урл https://site.ua/бильярдный_кий_2_1_721     или

https://site.ua/telegon?34542f    или https://site.ua/telegon#nokia   

ЧПУ УРЛы необходимо генерировать из названия страницы (например заглавие Н1), но при изменении названия на уже созданной странице ЧПУ УРЛ меняться не должен! Должна быть возможность изменить УРЛ вручную.

ЧПУ URL для разных типов страниц

Все URL формируем на 1-м уровне

Пример

site.ua/blog - блог

site.ua/podgotovka-zno-metematika

6. Проверка на другие ошибки

6.1.    Все внешние ссылки автоматически закрыть в атрибут nofollow.

Наилучшим вариантом будет удаление всех внешних ссылок сайта.

6.2 Меню сайта горизонтальное

6.3. Верстка

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

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

1) Заголовок Н1

2) Хлебные крошки

3) СЕО-текст

4) Товарные предложения

5) Верхнее меню сайта

6) Дополнительное левое/правое меню сайта

7) Футер сайта

6.4. Оптимизация сайта под мобильные устройства

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

Ссылка на оф. источник http://googlewebmastercentral.blogspot.ru/2015/02/finding-more-mobile-friendly-search.html

Сервис для проверки

https://www.google.com/webmasters/tools/mobile-friendly/?hl=ru

Оптимизация сайта под мобильные стандарты

Чтобы не потерять трафик необходимо оптимизировать сайт (!). Проверить оптимизацию сайта можно по текущей ссылке здесь

Сервис для проверки (раздел для мобильных, нужно внедрить “предложения”): https://developers.google.com/speed/pagespeed/insights/ 

6.5. Закрытие ссылок на социальные сети

Необходимо закрыть от индексации сквозные внешние ссылки сайта на соц. сети через rel="me nofollow"

6.6. Настроить тег canonical для всех страниц сайта (все страницы должны ссылаться сами на себя).

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

https://validator.w3.org/ 

7. Языковые версии

• дефолтная версия сайта украинская

• русская с приставкой /ru/, пример https://site.ua/ru/

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

https://zno.kiev.ua/

http://prntscr.com/tcndiz 

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

• Каждая страница должна вести на свою релевантную альтернативную страницу

• Указать в коде:

  • для русской версии - <html lang="ru">

  • для украинской  - <html lang="uk">

  • 
    

8. Зафиксировать верхнее меню сайта, пример:(есть в дизайне)

https://besmart.study/

9. Блок для SEO текста (есть в дизайне) Делаем полускрытым и при нажатии раскрывается.