Awesome

<h1 align="center"> <br> <img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Checklist/master/src/img/banners/logo-front-end-checklist.jpg" alt="Front-End Checklist" width="170"> <br> <br> Front-End Checklist <br> </h1> <h4 align="center">The Front-End Checklist это исчерпывающий список элементов сайта или HTML страницы, которые должны быть проверены перед выпуском в production</h4> <p align="center"> <a href=“http://makeapullrequest.com"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"> </a> <a href=“https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"> <img src="https://img.shields.io/github/contributors/thedaviddias/Front-End-Checklist.svg?style=flat-square" alt="Contributors"> </a> <a href=“https://gitter.im/Front-End-Checklist/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link"> <img src="https://img.shields.io/badge/chat-on_gitter-008080.svg?style=flat-square" alt="Gitter"> </a> <a href=“https://github.com/thedaviddias/Front-End-Checklist/"> <img src="https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg?style=flat-square" alt="Front‑End_Checklist followed"> </a> <a href=“https://creativecommons.org/publicdomain/zero/1.0/"> <img src="https://img.shields.io/badge/license-CC0-green.svg?style=flat-square" alt="CC0"> </a> </p> <p align="center"> <a href="#Как-этим-пользоваться">Как пользоваться</a> • <a href="#contributing">Contributing</a> • <a href="https://frontendchecklist.io">Сайт</a> <a href="https://www.producthunt.com/posts/front-end-checklist">Product Hunt</a> </p> <p align="center"> <span>Другие чек-дисты:</span> <br> <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist#---------front-end-performance-checklist-">🎮 Front-End Performance Checklist</a> • <a href="https://github.com/thedaviddias/Front-End-Design-Checklist#front-end-design-checklist">💎 Front-End Design Checklist</a> </p>

Он основан на многолетнем опыте front-end разработчиков и, кроме того, включает в себя части других открытых checklist-ов.

Как этим пользоваться?

Все пункты Front-End Checklist обязательны для большинства сайтов, однако некоторые элементы могут быть менее важны или вовсе пропущены (например если вам не нужен RSS для админки приложения). Мы выбрали 3 уровня гибкости:

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

Некоторые комментарии снабжены иконками, чтобы вы лучше понимали, какой контент или помощь можно найти:

📖: документация или статья
🛠: он-лайн инструменты / утилиты для проверки
📹: медиа или видео контент

Если хотите внести вклад в Front-End Checklist App, прочтите README_APP file.

Head

Примечание: Можно посмотреть список всего, что может быть в <head> HTML документа.

Мета-теги

Doctype: Doctype относится к HTML5 и находится в самом верху HTML страниц.

<!doctype html> <!-- HTML5 -->

📖 Определение кодировки (англ.) - HTML5 W3C

Следующие 2 мета-тега (Charset и Viewport) должны быть расположены в самом начале <head>.

Charset: Кодировка (UTF-8) задана правильно.

<!-- Задать кодировку документа -->
<meta charset="utf-8">

Viewport: Viewport задан правильно.

<!-- Задать viewport для responsive дизайна -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Title: Задан на всех страницах (SEO: Google рассчитывает ширину символов в title и обрезает примерно от 472 до 482 пикселей. Так что предел длины title около 55 символов).

<!-- Document Title -->
<title>Название короче 55 символов</title>

📖 Title - HTML - MDN

🛠 SERP Snippet Generator

Description: Description задан, уникален и короче 150 символов.

<!-- Meta Description -->
<meta name="description" content="Описание страницы короче 150 символов">

📖 Meta Description - HTML - MDN

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

<!-- Стандартный favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Рекомендованный формат favicon -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">

🛠 Favicon Generator

🛠 RealFaviconGenerator

📖 Favicon шпаргалка

📖 Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS Tricks

📖 PNG favicons - caniuse

Apple Web App Meta: Заданы мета-теги для Apple

<!-- Apple Touch Icon (не меньше, чем 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- Развернуть веб-приложение на полный экран -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Задаёт стиль для Status Bar (возможные значения смотри по ссылке Supported Meta Tags ниже) -->
<!-- Не имеет эффекта, если не выставлен предыдущий тег -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

📖 Configuring Web Applications

📖 Supported Meta Tags

Windows Tiles: Windows tiles заданы.

<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />

Минимальный требуемый browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>

📖 Browser configuration schema reference

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

<!-- Помогает избежать проблем с дублированным контентом -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

📖 Use canonical URLs - Search Console Help - Google Support

📖 5 common mistakes with rel=canonical - Google Webmaster Blog

HTML теги

Атрибут lang: Атрибут lang задан в соответствии с языком страницы.

<html lang="en">

Атрибут direction: Направление текста задано в этом атрибуте тега html. Также этот атрибут может быть применён к другим тегам.

<html dir="rtl">

📖 dir - HTML - MDN

Альтернативный язык: Тег языка задан и соответствует языку страницы.

<link rel="alternate" href="https://es.example.com/" hreflang="es">

Условные комментарии: Условные комментарии заданы для IE, если требуется.

📖 About conditional comments (Internet Explorer) - MSDN - Microsoft

RSS feed: Если ваш проект является блогом или содержит страницы, убедитесь, что RSS настроен.
Критичные CSS стили заданы inline: Критичный CSS (critical CSS) - CSS, задающий стили контента видимого сразу же пока идёт процесс загрузки страницы ("above the fold content"). Минифицируйте такой CSS и вставьте внутри <style></style> перед загрузкой остальных стилей.

🛠 Инструмент для автоматизации: Critical by Addy Osmani on GitHub

Порядок CSS: Все CSS файлы должны загружаться перед любыми JavaScript файлами в <head>. (За исключением случаев, когда JS файлы загружаются асинхронно в верху страницы).

Социальные сети

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

Facebook Open Graph: Все теги All Facebook Open Graph (OG) протестированы, ни один не пропущен и информация в них верна. Картинки должны быть хотя бы 600 x 315 пикселей. Рекомендуемое разрешение 1200 x 630 пикселей.

Примечание: Используйте og:image:width и og:image:height чтобы указать разрешение картинок для паука (the crawler) для того, чтобы картинки могли быть отрендерены сразу же. Иначе потребуется асинхронная подгрузка и обработка.

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Следующие теги не обязательны, но рекомендованы -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

📖 A Guide to Sharing for Webmasters

📖 Best Practices - Sharing

🛠 Протестируйте страницу с Facebook OG testing

Twitter Card:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

📖 Getting started with cards — Twitter Developers

🛠 Проверьте страницу с Twitter card validator

⬆ наверх

HTML

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

Семантические элементы HTML5: Семантические элементы HTML5 используются должным образом (header, section, footer, main...).

📖 HTML Reference

Страницы ошибок: Страницы ошибок 404 и 5xx существуют. Не забывайте, что в страницы ошибок 5xx должны быть включены их стили, чтобы обойтись без подгрузки с сервера.
Noopener: Ссылки на внешние ресурсы с target="_blank" должны иметь атрибут rel="noopener", чтобы предотвратить фишинговые атаки типа tab nabbing. Если нужно поддерживать старые версии Firefox, используйте rel="noopener noreferrer".

📖 About rel=noopener

Удаление комментариев: Ненужный код должен быть удалён перед отправкой в production.

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

W3C совместимость: Все страницы должны быть проверены W3C валидатором.

🛠 W3C validator

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

🛠 Dirty markup

🛠 Sonar a linting tool for the web

Проверка ссылок: Нет сломанных ссылок, нет ошибок 404.

🛠 W3C Link Checker

Проверка на Adblock: Сайт корректно отображается c включёнными вырезателями рекламы типа Adblock. Можете показать специальное сообщение с просьбой выключить подобные плагины.

⬆ наверх

Web-шрифты

Примечание: Использование web-шрифтов может вызвать мерцание или исчезновение текста (FOUT - Flash of Unstyled Text, FOIT - Flash of Invisible Text). Так что убедитесь, что задан резервный шрифт, либо используйте загрузчик шрифтов чтобы держать ситуацию под контролем.

📖 Google Technical considerations about webfonts

Форматы web-шрифтов: 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

Размер web-шрифтов: Размер шрифтов суммарно не превышает 2 MB.
Загрузчик web-шрифтов: Контролируйте закачку шрифтов с помощью загрузчика.

🛠 Typekit Web Font Loader

⬆ наверх

CSS

Примечание: Ознакомьтесь с CSS guidelines и Sass Guidelines, которых придерживаются большинство разработчиков. Если у вас есть сомнения насчёт CSS свойств, посетите CSS Reference. Кроме того взгляните на короткий гайд Code Guide.

Отзывчивый (responsive) веб-дизайн: Дизайн должен быть отзывчивым.
CSS для печати: Стили для печати заданы и работают корректны.
Препроцессоры: Используйте CSS препроцессоры (например Sass, Less, Stylus).
Уникальные ID: Если используются Id, убедитесь, что они уникальны в пределах страницы.
Сброс (reset) CSS: Используются актуальные версии инструментов для нормализации CSS (reset, normalize или reboot). (Если используете CSS фреймворк типа Bootstrap или Foundation, Normalize уже в них включён.)

📖 Reset.css

📖 Normalize.css

📖 Reboot

JS префиксы: Все классы и id, используемые в JS файлах, начинаются с префикса js- и не участвуют в назначении стилей.

<div id="js-slider" class="my-slider">
<!-- Или -->
<div id="id-used-by-cms" class="js-slider my-slider">

Embedded или inline CSS: Любой ценой избегайте внедрения CSS в <style> теги (embeding) или inline стилей. Применяйте такие подходы только в особых случаях, например background-image для слайдера или critical CSS (см. выше).
Вендорные префиксы: CSS вендорные префиксы используются и генерируются в соответствии с поддерживаемыми браузерами.

🛠 Autoprefixer CSS online

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

Конкатенация: CSS файлы сконкатенированы в один файл. (Не для HTTP/2).
Минификация: Все CSS файлы минифицированы.
Неблокирующий CSS: CSS файлы должны быть неблокирующими DOM, чтобы избежать потерь времени.

📖 loadCSS by filament group

📖 Example of preload CSS using loadCSS

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

🛠 UnCSS Online

🛠 PurifyCSS

🛠 PurgeCSS

🛠 Chrome DevTools Coverage

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

Stylelint: В CSS или SCSS файлах нет ошибок.

🛠 stylelint, a CSS linter

📖 Sass guidelines

Отзывчивый web-дизайн: Все страницы были протестированы на следующих контрольных точках: 320px, 768px, 1024px (может быть больше а зависимости от проекта).
CSS валидатор: CSS был протестирован, ошибки исправлены.

🛠 CSS Validator

Desktop браузеры: Все страницы были протестированы на всех поддерживаемых desktop браузерах (Safari, Firefox, Chrome, Internet Explorer, EDGE...).
Мобильные браузеры: Все страницы были протестированы на всех поддерживаемых мобильных браузерах (Native browser, Chrome, Safari...).
ОС: Все страницы были протестированы на всех поддерживаемых ОС (Windows, Android, iOS, Mac...).

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

Pixel Perfect - Chrome Extension

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

📖 Building RTL-Aware Web Apps & Websites: Part 1 - Mozilla Hacks

📖 Building RTL-Aware Web Apps & Websites: Part 2 - Mozilla Hacks

⬆ наверх

Картинки

Примечание: Для полного понимания оптимизации картинок прочтите бесплатную электронную книгу Essential Image Optimization от Addy Osmani.

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

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

🛠 Imagemin

🛠 Используйте ImageOptim для бесплатной оптимизации картинок.

🛠 Используйте Kraken.io как крутую альтернативу для оптимизации png и jpg. До 1 Mb бесплатно.

🛠 Используйте TinyPNG для оптимизации png, apng (анимированный png) and jpg без потери качества. Есть как платная, так и бесплатная версия.

🛠 ZorroSVG jpg-подобное сжатие для прозрачных картинок использованием svg масок.

🛠 SVGO инструмент под Nodejs для оптимизации SVG файлов.

🛠 SVGOMG web версия SVGO для онлайн оплимизации SVG файлов.

Picture/Srcset: Используйте picture/srcset чтобы задать наиболее подходящую картинку для текущего viewport.

📖 How to Build Responsive Images with srcset

Retina: Вы используете картинки большего размера 2x или 3x для поддержки дисплеев retina.
Спрайты: Мелкие картинки объединены в спрайт файл. В случае иконок это может быть SVG файл.
Width и Height: Задайте атрибуты width и height для <img> если размеры картинки заранее известны. Может быть пропущен для задания размеров через CSS.
Альтернативный текст: Для всех <img> задан альтернативный текст, который описывает картинку.

📖 Alt-texts: The Ultimate Guide

Ленивая загрузка (lazy loading): Применяется lazy loading для картинок (задан резервный noscript).

⬆ наверх

JavaScript

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

JavaScript Inline: Не используется inline JavaScript (смешанный с HTML).
Конкатенация: JavaScript файлы сконкатенированы в один.
Минификация: JavaScript файлы минифицированы. Можете добавить суффикс .min.

📖 Minify Resources (HTML, CSS, and JavaScript)

Безопасность JavaScript:

📖 Guidelines for Developing Secure Applications Utilizing JavaScript

noscript tag: Используйте <noscript> внутри <body> чтобы задать контент для ситуаций, когда скрипты не поддерживаются или выключены в браузере. Полезно для Single Page Application (React, Angular и т.п.) Пример

<noscript>
  Для работы приложения необходимо включить JavaScript.
</noscript>

Неблокирующий JS: JavaScript файлы загружаются асинхронно с использованием атрибута async или отложенно с defer.

📖 Remove Render-Blocking JavaScript

Оптимизированние и актуальные версии JS библиотек: Убедитесь, что все загружаемые JS библиотеки действительно необходимы, избавьтесь от неиспользуемых. Несложный функционал предпочтительно реализовывать на чистом (vanilla) JavaScript. Используйте последние версии библиотек. В них меньше ошибок и они более безопасны по сравнению с устаревшими версиями.

📖 You may not need jQuery

📖 Vanilla JavaScript for building powerful web applications

Modernizr: С помощью кастомного Modernizr можно добавлять классы к <html>.

🛠 Customize your Modernizr

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

ESLint: ESLint не выдал ошибок, проверяя ваш код. Можно использовать ваш собственный конфиг, или стандартные правила.

📖 ESLint - The pluggable linting utility for JavaScript and JSX

⬆ наверх

Безопасность

Просканируйте и проверьте ваш веб-сайт

securityheaders.io

Observatory by Mozilla

ASafaWeb - Automated Security Analyser for ASP.NET Websites

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

HTTPS: HTTPS используется на всех страницах, а также для всего стороннего контента (плагины, картинки...).

🛠 Let's Encrypt - Free SSL/TLS Certificates

🛠 Free SSL Server Test

📖 Strict Transport Security

HTTP Strict Transport Security (HSTS): Выставлен HTTP заголовок 'Strict-Transport-Security'.

🛠 Check HSTS preload status and eligibility

📖 HTTP Strict Transport Security Cheat Sheet - OWASP

📖 Transport Layer Protection Cheat Sheet - OWASP

Защита от фальсификации межсайтовых запросов(Cross Site Request Forgery - CSRF): Вы гарантируете, что запросы на ваш сервер делаются именно вашим веб-сайтом, чтобы избежать атак CSRF.

📖 Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP

Межсайтовый скриптинг (Cross Site Scripting - XSS): Ваш веб-сайт защищён от уязвимостей XSS.

📖 XSS (Cross Site Scripting) Prevention Cheat Sheet - OWASP

📖 DOM based XSS Prevention Cheat Sheet - OWASP

Заголовок Content-Type: Предотвратить mime-sniff (анализ контента и подмена заголовка content-type) в Google Chrome и Internet Explorer.

📖 X-Content-Type-Options - Scott Helme

X-Frame-Options (XFO): Защитите своих пользователей от атак типа clickjacking.

📖 X-Frame-Options - Scott Helme

📖 RFC7034 - HTTP Header Field X-Frame-Options

Политика безопасности контента (Content Security Policy): Задайте правила, определяющие, какой контент и откуда разрешено загружать на ваш сайт. Также это поможет защититься против атак clickjacking.

📖 Content Security Policy - An Introduction - Scott Helme

📖 CSP Cheat Sheet - Scott Helme

📖 CSP Cheat Sheet - OWASP

📖 Content Security Policy Reference

⬆ наверх

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

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

Цели: Необходимо достичь следующих параметров:
- First Meaningful Paint (показать что-то осмысленное) не позже, чем через 1 секунду
- Time To Interactive (время до первого взаимодействия с пользователем) в течение 5 секунд для "среднего" устройства (смартфон на Android за 200$ медленной 3G сети с 400ms RTT и скоростью передачи 400kbps) и до 2 секунд для следующих визитов
- Размер критичных файлов до 170Kb gzipped

🛠 Website Page Analysis

🛠 WebPageTest

📖 Size Limit: Make the Web lighter

Минифицирование: Ваш HTML минифицирован.

Ленивая загрузка (Lazy loading): Используйте lazy loading для загрузки картинок, скриптов и CSS чтобы уменьшить время инициализации страницы. Смотрите подробнее в соответствующих секция чеклиста.
Размер cookie: Если используете cookies, убедитесь, что их размер не превосходит 4096 байт. Также один домен не должен использовать более 20 cookies.

📖 Cookie specification: RFC 6265

📖 Cookies

🛠 Browser Cookie Limits

Сторонние компоненты (Third party components): Iframe и сторонние компоненты, полагающиеся на JS с других доменов (типа кнопок "Поделиться"), должны быть, по возможности, заменены на ваши статические компоненты, дабы уменьшить число запросов и избежать возможной утечки данных ваших пользователей.

🛠 Simple sharing buttons generator

Подготовка предстоящих запросов (preparing upcoming requests)

📖 Explanation of the following techniques

DNS resolution: DNS сторонних компонентов обозначены в dns-prefetch, чтобы браузер мог разобраться с этими DNS заранее.

<link rel="dns-prefetch" href="https://example.com">

Preconnect: Используйте preconnect, чтобы браузер мог осуществить DNS lookup, TCP handshake и TLS negotiation заранее во время простоя браузера.

<link rel="preconnect" href="https://example.com">

Prefetch: С использованием prefetch ресурсы, которые скоро могут понадобиться, например картинки с lazy loading, будут подгружены заранее во время простоя браузера.

<link rel="prefetch" href="image.png">

Preload: preload заранее загружает ресурсы, требуемые для текущей страницы, например скрипты в конце <body>.

<link rel="preload" href="app.js">

📖 Difference between prefetch and preload

Тестирование производительности

Google PageSpeed: Все страницы протестированы и имеют рейтинг хотя бы 90/100.

🛠 Google PageSpeed

🛠 Test your mobile speed with Google

🛠 WebPagetest - Website Performance and Optimization Test

🛠 GTmetrix - Website speed and performance optimization

⬆ наверх

Доступность

Примечание: Ознакомьтесь с плейлистом A11ycasts with Rob Dodson 📹

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

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

📖 Enable / Disable JavaScript in Chrome Developer Tools

Контрастность цветов: Контрастность должна соответствовать WCAG AA (AAA для мобильных устройств).

🛠 Contrast ratio

Заголовки

H1: На всех страницах есть H1, который отличается от title страницы.
Заголовки: Заголовки должны идти в правильном порядке (от H1 к H6).

📹 Why headings and landmarks are so important -- A11ycasts #18

Семантика

Специальные типы input для HTML5: Это особенно важно для мобильных устройств, т.к. там используется разные клавиатуры для разных типов вводимых данных.

📖 Mobile Input Types

Формы

Label: <label> задан для каждого элемента формы. Если его применить нельзя, используйте aria-label.

📖 Using the aria-label attribute - MDN

Тестирование доступности

Проверка на соответствие стандартам: Используйте инструмент WAVE для проверки.

🛠 Wave testing

Клавиатурная навигация: Пройдитесь по вашему сайту, используя только клавиатуру. Все интерактивные элементы должны быть доступны.
Screen-reader: Проверьте все страницы в программах для чтения экрана (screen-reader) таких как VoiceOver, ChromeVox, NVDA или Lynx.
Стили для фокуса: Если фокус запрещён, к элементу под фокусом должны применяться специальные стили.

📹 Managing Focus - A11ycasts #22

⬆ наверх

SEO

Google Analytics: Google Analytics установлен и настроен.
Логичные заголовки: Текст заголовков помогает понять контент страницы.
sitemap.xml: sitemap.xml существует и задан в Google Search Console (ранее Google Webmaster Tools).
robots.txt: robots.txt не блокирует страницы.

🛠 Проверьте robots.txt с Google Robots Testing Tool

Структурированные данные (Structured Data): На страницах используются проверенные и правильные структурированные данные. Они помогают паукам (crawlers) понять контент страницы.

📖 Introduction to Structured Data - Search - Google Developers

🛠 Проверьте свою страницу с Structured Data Testing Tool

🛠 Польный список слов, используемых в структурированных данных Schema.org Full Heirarchy

📖 RDFa - Linked Data in HTML

📖 JSON-LD

📖 Microdata

HTML карта сайта: HTML карта сайта существует и доступна по ссылке в подвале страницы.

📖 Sitemap guidelines - Google Support

Pagination теги: Задайте rel="prev" и rel="next" чтобы показать, что контент разбит на страницы.

🛠 Pagination (rel="prev/next") Testing Tool

📖 Pagination guidelines - Google Support

<!-- Example: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">

⬆ наверх

Перевод

Front-End Checklist также доступен на других языках. Спасибо всем переводчикам за потрясающую работу!

🇯🇵 Японский: miya0001/Front-End-Checklist
🇪🇸 Испанский: eoasakura/Front-End-Checklist-ES
🇨🇳 Китайский: JohnsenZhou/Front-End-Checklist
🇰🇷 Корейский: kesuskim/Front-End-Checklist
🇧🇷 Португальский: jcezarms/Front-End-Checklist
🇻🇳 Вьетнамский: euclid1990/Front-End-Checklist
🇹🇼 Традиционный китайский: EngineLin/Front-End-Checklist
🇫🇷 Французский: ynizon/Front-End-Checklist
🇷🇺 Русский: ungear/Front-End-Checklist
🇹🇷 Турецкий: eraycetinay/Front-End-Checklist
🇩🇪 Немецкий: xfuture603/Front-End-Checklist
🇺🇦 Украинский: antonkryvko/Front-End-Checklist

Front-End Checklist Badge

Вставьте этот бейдж в ваш файл README, если хотите показать, что следуете этому чеклисту!

➔

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ наверх

Содействие

Создайте issue или pull request чтобы предложить изменение или дополнение

Руководство

Репозиторий Front-End Checklist состоит из двух веток:

1. `master`

Эта ветка состоит из файла README.md, который автоматически отображается на сайте Front-End Checklist.

2. `develop`

Эта ветка будет использоваться для внесения значительных изменений в структуру или контент. Для устранения мелких ошибок и создания новых элементов предпочтительно использовать ветку master.

Поддержка

Если у вас есть вопросы или пожелания, без колебаний пишите в Gitter или Twitter:

Автор

David Dias

Помощники

Проект существует благодаря помощи сообщества. [Contribute]. <a href="https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"><img src="https://opencollective.com/front-end-checklist/contributors.svg?width=890" /></a>

Backers

Thank you to all our backers! 🙏 [Become a backer]

Лицензия

⬆ наверх

Syncronized with commit 225705b3bb4c7b05a6f818203b408575fe240473

Awesome

Содержание

Как этим пользоваться?

Head

Мета-теги

HTML теги

Социальные сети

HTML

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

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

Web-шрифты

CSS

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

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

Картинки

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

JavaScript

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

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

Безопасность

Просканируйте и проверьте ваш веб-сайт

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

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

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

Подготовка предстоящих запросов (preparing upcoming requests)

Тестирование производительности

Доступность

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

Заголовки

Семантика

Формы

Тестирование доступности

SEO

Перевод

Front-End Checklist Badge

Содействие

Руководство

1. master

2. develop

Поддержка

Автор

Помощники

Backers

Sponsors

Лицензия

1. `master`

2. `develop`