СЕО. Настройка поисковой оптимизации

СЕО. Настройка поисковой оптимизации

Поисковая оптимизация сайта необходима для правильной индексации вашего уникальнейшего контента в сети.

Вступление

SEO (Search Engine Optimization) - Поисковая оптимизация — комплекс оптимизации для поднятия позиций сайта в результатах выдачи поисковых систем по определённым запросам, с целью увеличения трафика и потенциальных пользователей на вашем сайте.

Первое на что стоит обратить внимание это описание изображений <img alt=""> и заголовки на ваших страницах <h1></h1>. Именно они являются "ключевыми словами" вашего контента.

Весь текст должен быть максимально уникальным, что позволит поисковику подумать о вас что-то хорошее.

Мета-теги

Необходимая часть каждого сайта. Все пишется в <head></head>. Так же желательно что бы все стили и js-код находились в футере сайта.

<meta charset="utf-8"> - самая распространенная кодировка страницы символов Unicode. Ваша кириллица не будет плакать.

<title>Оригинальное что-то</title> - главный заголовок страницы, очень важен. Для любой страницы желательно уникальный.

<meta name="description" content="невероятное просто"> - краткое описание контента страницы.

Это основные, но этого недостаточно.

Так же необходимо прописать <link rel="canonical" href="//">. Это позволит указать первоисточник (оригинал) страницы. Если существуют похожие по содержанию, к примеру различные версии одной страницы, это позволит правильно индексировать нужные url.

Open Graph

Протокол Open Graph индексирует страницу для социальных сетей и добавляет автоматический вывод картинки, названия, описания ссылки.

Для поддержки необходимо добавить префикс:

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">

Конструкция тега:

<meta property="og:title" content="Название страницы">
  • og:url - абсолютный путь страницы. http://predaytor.com/abr/abracadabra.html
  • og:image - абсолютный путь изображения.
  • og:image:height & og:image:width - желательная высота "504" и ширина "968" исходного изображения.
  • og:type - тип вашего сайта, к примеру "website", "blog". Полный список.

og:site_name, og:description, og:locale опциональны, к примеру последний - "ru_RU".

Twitter Cards

Тоже самое только для твиттера.

  1. Summary Card: Заголовок, описание и тамбнейл (маленькое изображение).
  2. Summary Card with Large Image: изображение побольше.
  3. App Card: для мобильных приложений.
  4. Player Card: медиа (видео, аудио).

Полная документация на сайте developer.twitter.com.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@predaytor">
<meta name="twitter:creator" content="@thepredaytor">
<meta name="twitter:title" content="за C# и двор..">
<meta name="twitter:description" content="Шарпей">
<meta name="twitter:image" content="http://predaytor.com/sharp/sharpey.png">
<meta name="twitter:url" content="http://predaytor.com/t/sharp/sharp-enter.html">
<meta name="twitter:domain" content="predaytor.com">

Favicon

Это иконка вашего сайта, которая отображается рядом с заголовком на вкладке страницы.

Возьмите PNG-изображение размером 260x260px и RealFaviconGenerator сам соберет все версии иконки для разных устройств и браузеров.

RSS, robots.txt, sitemap.xml

RSS - это сокращенная лента всего контента на сайте. В Jekyll уже есть встроенный плагин, который после сборки проекта поместит feed.xml в корень сайта.

Подключите в ваш хедер:

<link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}/feed.xml">

Robots.txt - служит поисковым ботам Google, Yandex, Twitter для просмотра содержимого сайта и выдачи запросов в поисковиках. Если вы хотите запретить индексацию страницам на подобие поиска, категорий, авторизации, укажите название папки или файла с расширением в последней команде:

User-agent: *
Disallow: /catalog/

Для доступа всех ссылок сайта поисковику не заполняйте, но укажите строку Disallow:.

Менять местами команды User-agent с Disallow или Allow недопустимо.

Sitemap.xml - карта структуры сайта, ссылки ко всем категориям и страницам. Сайт должен наполнятся контентом, и карта так же постоянно меняется.

Для создания карты сайта в Jekyll добавьте в ваш Gemfile:

gem "jekyll-sitemap", group: :jekyll_plugins

404 Error

Страница ошибки 404 - показывает пользователю что он залез куда-то не туда, или ваша ссылка уже не действительна.

Что бы безболезненно покинуть страницу добавьте к ней последние новости или создайте навигацию сайта.

Добавьте к файлу .htaccess редирект на вашу страницу:

ErrorDocument 404 http://site.com/404.html

Репосты

В параллельной вселенной пользователи все же могут из благодарности сделать репост вашей страницы в соц.сети. Потому стоит добавить такую возможность.

Не рекомендую использовать сторонние сервисы, создайте собственные со своим неповторимым дизайном.

Иконки FontAwesome помогут вам в этом.

Добавьте атрибуты title и href для ссылок, например:

<a title="Twitter" href="https://twitter.com/intent/tweet?text=Чужой1979&url=https://predaytor.com/t/spirit/alien.html&via=thepredaytor"><i class="fab fa-twitter"></i></a>
  • Twitter - title="Twitter" href="https://twitter.com/intent/tweet?text=НазваниеСтраницы&url=АбсолютныйПутьСтраницы"
  • Вконтакте - title="Vk" href="https://vk.com/share.php?url=Путь&title=Название&description=Описание&image=АбсПутьИзображения&noparse=true"
  • Телеграм - title="Telegram" href="https://telegram.me/share/url?url=Путь&text=Название"
  • Google Plus - title="Google+" href="https://plus.google.com/share?url=http://predaytor.com/t/html/seo-begin/"
  • Facebook - title="Facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://predaytor.com/t/html/seo-begin/"
  • Pinterest - title="Pinterest" href="https://pinterest.com/pin/create/button/?url=Путь&description=Название&media=Изображение"

Идентификация

Вы как владелец сайта должны подтвердить это. Перейдите на search.google.com. Введите домен сайта, после чего загрузите на хостинг в корень сайта специальный .html документ и подтвердите действие. Так же здесь есть ряд других функций для статистики.

Google Analytics

Многофункциональный сервис для просмотра разного рода статистики сайта. Проверка индексации, оптимизация видимости сайта, подключение монетизации и многое другое.

Google Analytics

Для индексирования сайта перейдите на главную страницу в раздел "Администратор" (последний значок на панели слева) -> "Аккаунт" - "Настройки аккаунта". Посмотрите все пункты.

Идентификатор аккаунта обязательно должен быть уникальным. Именно он используется в gtag('config', 'UA-XXXXXXXXX-1');

Справа от "Аккаунт" есть раздел "Ресурс". Создайте новый и перейдите в раздел "Отслеживание" -> "Код отслеживания".

Скопируйте код и вставьте в хедер.

Заключение

Это только основные принципы настройки. Советую проверить сайт на скорость - Google PageSpeed (минифицированы ли изображения, код, стили) и оптимизацию на SeoSiteCheckup.

Главное - уникальность контента, уважайте чужой труд.

    Поделиться: