воскресенье, 1 апреля 2018 г.

HTML. SEO сайта. Краткое руководство

Рассмотрим на примере макета, как сделать основную оптимизацию сайта. Нужно помнить, что поисковики сначала считывают title станицы, затем все заголовки, а уже потом слова в тегах <b></b> и <strong></strong>. Посмотрим макет.


<!doctype html>
<html lang="en">
<head>
<base href="https://www.site.com/public"> <!-- Стартовая директория сайта  -->
<meta charset="UTF-8"> <!-- Кодировка  -->
<title>Lesson</title>  <!-- Заголовок страницы. Поисковики читают сначала заголовок -->
<meta name="description" content="Описание сайта"> <!-- Описание сайта  -->
<meta name="keywords" content="сайты, домены"> <!-- Ключевые слова  -->
<link rel="stylesheet" href="css/main.css">
<link rel="canonical" href="//site.com"> <!-- Прописывается для мультиязычных сайтов -->
<link rel="icon" href="images/favicon.ico">  <!-- Рекомендуется иконку загружать в размере 32x32 или 64x64 -->
<link rel="shortcut icon" href="images/favicon.ico">  <!-- Для браузеров, которые не понимают rel icon. Применяется для создания кросс браузерного сайта -->

<!-- Это og-метки - графы данных. Применяются для постинга ссылок на сайт в соцсетях. Для соц сетей есть нужно смотреть стандарты для публикации этих меток. Допустим, для фейсбука существуют ограничения для отображаемых картинок -->
<meta property="og:title" content="Книги: обучение разработке сайтов, веб-дизайну, android, маркетингу" /> <!-- Этот заголовок публикуется при постинге в соц. сетях -->
<meta property="og:description" content='Уникальные книги по бизнесу в формате онлайн. Зарабатывайте в Интернете!' /> <!-- Это описание публикуется при постинге в соц. сетях -->
<meta property="og:type" content="article" /> <!-- У всех страниц контент -  article -->
<meta property="og:image" content="https://site.ru/adver.png" /> <!-- Эта картинка публикуется при постинге в соц. сетях -->
</head>
<body>
<h1>Главный заголовок страницы</h1> <!-- Поисковики зачем читают h1 -->
<b></b>
<strong></strong> <!-- Потом читают содержимое тегов b и strong -->
</body>
</html>

Комментариев нет:

Отправить комментарий

Materialize-css. Футер

Сделаем футер и прижмем к низу страницы. Документация: https://materializecss.com/footer.html