website launch checklist
1.0.0
Что нужно перепроверить перед запуском веб-сайта
Перед запуском сайта убедитесь, что:
Тег alt («alt-атрибут» или «alt-описание») — это атрибут, применяемый к изображению, который служит невидимым описанием изображения.
Он описывает содержимое изображения и используется программами чтения с экрана для чтения вслух слепым пользователям. Он также используется поисковыми системами, поскольку они не могут интерпретировать изображения и полагаются на описание тега alt. Использование тегов alt на изображениях положительно влияет на рейтинг в поисковых системах, а значит, полезно для SEO. Альтернативный текст также отображается, когда изображения не загружаются.
Тег Alt должен описывать содержимое изображения, его длина рекомендуется до 125 символов.
Пример:
< img src =" paul_mccartney.jpg " alt =" Paul McCartney performing in the East Room of the White House " > Если у вас есть «промежуточная» среда или «разработка», то, скорее всего, вы блокируете промежуточную индексацию.
Если вы хотите, чтобы ваш веб-сайт появлялся в результатах поиска, эта поисковая система должна «индексировать» ваш сайт. В поисковых системах есть автоматизированные «боты», которые посещают веб-страницы, «сканируют» контент и сохраняют его в индексе поисковой системы. Это позволит поисковой системе позже получить наиболее релевантные результаты поиска.
Перед запуском убедитесь, что версия, которая будет запущена, позволяет индексировать ваш сайт. Убедитесь, что в вашем HTML нет такого метатега:
< meta name =" robots " content =" noindex, nofollow " > <!-- make sure you remove this if you want your website to be indexed by search enginesТакже проверьте файл robots.txt. Если вы хотите разрешить индексацию всех страниц вашего веб-сайта, ваш файл robots.txt должен содержать следующее:
User-agent: *
Disallow:
Еще одно место для проверки — конфигурации Apache/Nginx.
Когда веб-сайт публикуется в Facebook или Twitter, он отображает миниатюру, заголовок и описание:
Если вы хотите, чтобы ваш веб-сайт отображался с правильным эскизом, заголовком и описанием, вам необходимо добавить метатеги, необходимые Facebook и Twitter.
< meta property =" og:title " content =" Title " >
< meta property =" og:description " content =" Description " >
< meta property =" og:image " content =" Image URL " >
< meta property =" og:url " content =" URL of the page/article/post " >
< meta name =" twitter:title " content =" Title " >
< meta name =" twitter:description " content =" Description " >
< meta name =" twitter:image " content =" Image URL " >
< meta name =" twitter:card " content =" summary_large_image " > <!-- how the card is displayed -->Вы можете проверить, как будет выглядеть ваш веб-сайт при публикации в Facebook или Twitter, используя следующие инструменты:
Отладчик общего доступа к Facebook
Валидатор Твиттер-карты
Фавикон — это небольшой значок рядом с названием сайта на вкладке браузера.
Это позволяет легко идентифицировать веб-сайт, когда открыто много вкладок, просматривая историю браузера и закладки. Некоторые поисковые системы, такие как DuckDuckGo, отображают значок рядом с URL-адресом в результатах поиска. Помимо улучшения удобства использования, это может помочь привлечь внимание пользователя в результатах поиска, поэтому мы можем назвать это косвенным методом SEO.
< link rel =" shortcut icon " type =" image/png " href =" /favicon.png " > Пользователи могут сохранить веб-страницу на главном экране мобильных устройств. При этом создается значок веб-сайта, такой же, как значок приложения. При нажатии на этот значок веб-сайт откроется в браузере.
Разработчикам предоставляется некоторый контроль, чтобы сделать работу веб-сайта ближе к нативному приложению на мобильных устройствах. Например, по умолчанию iOS установит снимок экрана веб-сайта в качестве значка. Но вы можете установить собственный дизайн значков, используя метатеги Apple.
< link rel =" apple-touch-icon " href =" touch-icon-iphone.png " >
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" touch-icon-ipad.png " >
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" touch-icon-iphone-retina.png " >
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" touch-icon-ipad-retina.png " >
< link rel =" apple-touch-startup-image " href =" launch.png " > <!-- Splash screen image (image that is displayed when the website is buing opened) -->
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " > <!-- Status bar style -->
< meta name =" apple-mobile-web-app-title " content =" My Website " > <!-- title of the website --> Android будет использовать значение «apple-touch-icon» или значок (если метатег отсутствует) для создания значка на главном экране.
Если используемый вами инструмент аналитики не имеет фильтра для среды, вы будете загрязнять аналитику своего веб-сайта результатами тестирования в непроизводственной среде. Вы можете добавить фильтр в инструмент аналитики или условно встроить код только в производственную среду.
Тег title определяет заголовок веб-сайта. Метатег описания содержит краткое описание страницы.
< title > Page Title </ title >
< meta name =" description " content =" A short description of what this page is about " >Заголовок — это то, что отображается в результатах поиска, отображается во вкладке браузера и карточках социальных сетей при репосте (если для социальной сети не предусмотрен отдельный заголовок).
Описание также отображается в результатах поиска. Он не используется напрямую в алгоритме ранжирования, поэтому не влияет на вероятность появления в результатах поиска, но повышает вероятность того, что пользователи нажмут на ваш сайт в результатах. Это повысит рейтинг кликов (CTR) вашей страницы для Google, а это означает, что Google посчитает это хорошим результатом и получит более высокий рейтинг в будущих результатах поиска.
Если на вашей веб-странице есть ссылки на внешние ссылки, особенно те, которые открываются в новой вкладке или окне, вам следует использовать rel="noopener" .
< a href =" http://example.com " target =" _blank " rel =" noopener " > Some other site </ a > Это дает преимущества в безопасности и производительности. Без него внешняя страница сможет получить доступ к вашему объекту окна с помощью window.opener . Подробнее о том, какие уязвимости решаются с помощью noopener вы можете узнать здесь: О rel=noopener
Другой веб-сайт также может работать в том же процессе, что и ваша текущая страница, поэтому, если на внешней странице используется тяжелый JavaScript, это отрицательно повлияет на производительность вашего сайта. noopener также предотвращает это.
Подробнее об этом читайте здесь: Преимущества rel=noopener в производительности.
Поскольку вы вносите много изменений в свой веб-сайт или используете множество внешних библиотек или фреймворков CSS, есть вероятность, что ваш файл CSS содержит множество стилей, которые не используются на ваших страницах. Например, вы можете использовать одну тему какого-то плагина, но CSS для других тем просто останется в вашем файле CSS неиспользованным, а размер файла таблицы стилей увеличится.
Вы можете удалить все неиспользуемые стили с помощью инструмента PurgeCSS. Вы можете использовать его с CLI или в Webpack, Gulp и т. д. Он проанализирует ваши страницы, сопоставит селекторы, используемые на страницах, с селекторами в файлах CSS и удалит неиспользуемые стили. В моем недавнем проекте, в котором использовалась CSS-инфраструктура Tailwind, конечно, было много утилит, которые я не использовал. PurgeCSS уменьшил размер моего файла app.css с 214 КБ до 45,6 КБ.
Однако будьте осторожны: если плагин динамически создает элементы на странице, PurgeCSS не определит стили этого элемента. Но вы можете внести селекторы в белый список, передав селекторы или шаблоны селекторов в конфигурации, а также вы можете внести селектор в белый список, используя специальный комментарий для внесения в белый список определенных правил. Узнайте больше о белом списке PurgeCSS.
Когда браузер запрашивает ресурс, сервер может указать браузеру, как долго он может хранить или «кэшировать» ресурс. В следующий раз, когда ресурсу потребуется, он может использовать локальную копию. Это значительно повысит скорость и снизит нагрузку на сервер. Вы можете настроить свой сервер так, чтобы он возвращал заголовок, сообщающий, как долго актив будет кэшироваться:
Cache-Control: max-age=31557600 // 31557600 seconds is 356 days
Вы должны установить максимальный возраст в зависимости от того, как часто меняются ваши активы.
Вы также можете настроить свой сервер на использование сжатия, например сжатия Gzip, что позволит передавать ресурсы быстрее. Сжатие файлов CSS с помощью gzip экономит около 50-70% размера файла.
