Awesome

<h2 align="center"><a href="http://frontendchecklist.io">Front-End Checklist</a></h2> <p align="center"> <em>The Front-End Checklist це вичерпний перелік елементів сайту або HTML сторінки, котрі слід перевірити перед випуском в production</em> </p>

Він заснований на багаторічному досвіді front-end розробників і, окрім цього, включає в себе частини інших відкритих checklist-ів.

Зміст

Head
HTML
Web-шрифти
CSS
Картинки
JavaScript
Безпека
Продуктивність
Доступність
SEO

Як цим користуватися?

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

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

Деякі зовнішні посилання позначені значками, щоб ви краще розуміли, який контент або допомогу можна знайти:

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

Якщо хочете зробити внесок до Front-End Checklist App, прочитайте файл README_APP.

Head

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

Мета-теги

Doctype: Doctype стосується HTML5 і знаходиться нагорі HTML сторінок.

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

📖 Визначення кодування (англ.) - HTML5 W3C

Наступні 3 мета-тега (Charset, X-UA Compatible та Viewport) мають бути розташовані на самому початку <head>.

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

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

X-UA-Compatible: Тег X-UA-Compatible присутній.

<!-- Проінструктує Internet Explorer використовувати останній двигунець рендерингу -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

📖 Задати режим сумісності Internet Explorer (англ.)

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">

<!-- Задає стиль для Статус бару (можливі значення дивись за посиланням 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: Усі теги 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="Мій сайт">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Опис тут">
<meta property="og:site_name" content="MySite">
<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: Сайт коректно відображається з увімкненим блокувальником реклами на кшталт 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

🛠 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) і 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 мережею із затримкою 400мс та швидкістю передачі даних 400кбіт/с) і менше 2 секунд для повторних відвідувань
- Критичні файли не більше 170кБ у стисненому вигляді (gzipped)
- Обсяг кожної сторінки не повинен перевищувати 500кБ.

🛠 Website Page Analysis

🛠 WebPageTest

📖 Size Limit: Make the Web lighter

Мініфікація HTML: Ваш 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

ARIA landmarks

Role banner: У <header> проставлений role="banner".
Role navigation: у <nav> проставлений role="navigation".
Role main: У <main> проставлений role="main".

📖 Using ARIA landmarks to identify regions of a page

📖 ARIA roles categorization

Семантика

Спеціальні типи 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

🛠 Перевірте свою сторінку за допомогою Інструменту тестування структурованих даних

🛠 Повний перелік слів, що використовуються в структурованих даних 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

<!-- Приклад: Pagination link tags для сторінки 2 з списку сторінок -->
<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

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

Помічники

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

Прихильники

Дякую усім нашим прихильникам! 🙏 [Стати прихильником]

Патрони

Підтримати цей проект ставши патроном. Ваш логотип буде відображатися тут з посиланням на ваш сайт. [Стати патроном]

Ліцензія

⬆ нагору

Syncronized with commit 07b7ba6

Awesome

Зміст

Як цим користуватися?

Head

Мета-теги

HTML теги

Соціальні мережі

HTML

Найкращі практики

Тестування HTML

Web-шрифти

CSS

Продуктивність CSS

Тестування CSS

Картинки

Найкращі практики

JavaScript

Найкращі практики

Тестування JavaScript

Безпека

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

Найкращі практики

Продуктивність

Найкращі практики

Підготовка майбутніх запитів (preparing upcoming requests)

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

Доступність

Найкращі практики

Заголовки

ARIA landmarks

Семантика

Форми

Тестування доступності

SEO

Переклад

Front-End Checklist Badge

Сприяння

Керівництво

1. master

2. develop

Підтримка

Автор

Помічники

Прихильники

Патрони

Ліцензія

1. `master`

2. `develop`