Базовый SEO HTML шаблон
Представлен пример базовой (основной) разметки SEO HTML шаблона. Обязательно должны быть в html коде мета теги: title
и description
. Мета тег keywords
сейчас необязателен (если он заполнен правильно, то лишним не будет).
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<!-- Используется для адаптивного веб-дизайна, ориентированного на мобильные устройства -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Призывает Internet Explorer работать в определённом режиме документа -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Используются для записи информации о том, кто создал соответствующий веб-сайт и кому принадлежат авторские права. -->
<meta name="copyright" content="Copyright owner" />
<meta name="author" content="Author name" />
<!-- МЕТА -->
<title>Заголовок</title> <!-- 50-70 символов с пробелами -->
<meta name="keywords" content="не более 2-3 ключей через запятую">
<meta name="description" content="описание не длиннее 170 символов">
<!-- Контролирует поведение поисковых систем при индексации страницы -->
<meta name="robots" content="index,follow,noodp"><!-- Все поисковые системы -->
<meta name="googlebot" content="index,follow"><!-- Указание отдельно для Google -->
<!-- Позволяет указать Google не показывать в поисковой выдаче поле для поиска по сайту -->
<meta name="google" content="nositelinkssearchbox">
<!-- Позволяет указать Google не предлагать перевести эту страницу -->
<meta name="google" content="notranslate">
<!-- Подтверждает авторство страницы в Google Search Console -->
<meta name="google-site-verification" content="verification_token">
<!-- Тег указания ПО, которое сгенерировало эту страницу -->
<meta name="generator" content="program">
<!-- Короткое описание тематики вашего сайта -->
<meta name="subject" content="тематика вашего сайта">
<meta content="Заголовок">
<meta content="website">
<!-- если сайт многоязычный -->
<!-- <meta property="og:locale" content="ru_RU"> -->
<meta content="http://site.com">
<!-- не меньше 600х315, не более 8Мб -->
<meta content="http://site.com/img/og_cover.jpg">
<meta content="описание не длиннее 170 символов">
<meta content="Facebook ID">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ник_компании_в_твиттере">
<meta name="twitter:title" content="Заголовок">
<meta name="twitter:description" content="описание не длиннее 155 символов">
<meta name="twitter:creator" content="@ник_в_твиттере">
<!-- картинка не меньше 280х150, не более 1Мб -->
<meta name="twitter:image" content="http://localhost.my/img/tw_cover.jpg">
<!-- G+ / Pinterest -->
<meta content="Заголовок">
<meta content="описание не длиннее 170 символов">
<meta content="http://site.com/img/g_cover.jpg">
<!-- Google authorship -->
<link rel="author" href="https://plus.google.com/[Google+_Profile]/posts" data-mce-href="https://plus.google.com/[Google+_Profile]/posts">
<link rel="publisher" href="https://plus.google.com/[Google+_Page_Profile]" data-mce-href="https://plus.google.com/[Google+_Page_Profile]">
<!-- Фавиконы и иконки сайта -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" data-mce-href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png" data-mce-href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" data-mce-href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" data-mce-href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" data-mce-href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" data-mce-href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" data-mce-href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" data-mce-href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" data-mce-href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" data-mce-href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192" data-mce-href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" data-mce-href="/favicon-96x96.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" data-mce-href="/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Яндекс.Браузер -->
<meta name="viewport" content="ya-title=#4e69a2,ya-dock=fade">
</head>
<body>
<!-- Content -->
</body>
</html>
Предыдущая заметка
Автоматическое выравнивание кода в AtomСледующая заметка
Список всех мета-тегов