SEO - огромная тема, когда речь идет о создании и обнаружении контента. Когда поисковые системы просматривают веб-сайты и индексируют их для результатов поиска, учитывается множество факторов.
Мы узнаем о нескольких методах, которые помогут Google и другим пользователям легко найти твой сайт.
Robots.txt
robots.txt это текстовый файл, в котором хранятся определенные указания для роботов поисковых систем. Гарантий, что сканеры будут подчиняться правилам, изложенным в этом файле, нет, но в большинстве случаев они будут это делать.
Обычно мы создаем этот файл и добавляем его в нашу папку static, но с Hugo мы можем сделать это автоматически, отредактировав наш config.toml.
Все, что нам нужно сделать, это добавить в начало файла такую строку: enableRobotsTXT = true, а затем Hugo будет автоматически создавать файл для нас каждый раз, когда мы собирает наш сайт и разворачиваем его на наших серверах.
Метатеги
Мы немного узнали о метатегах, когда писали наши шаблоны, но есть намного больше того, что мы можем использовать, чтобы помочь сканерам поисковых систем понять, на что они смотрят.
Открой baseof.html и добавьте следующий фрагмент в секцию <head>, убедись, что ты заменил(а) аттрибут content= тем, что тебе необходимо:
<meta name="keywords" content="blog,travel,food,coffee,bread,canada" />
<meta property="og:site_name" content="{{ $.Site.Title }}" />
<meta property="og:title" content="{{ $.Site.Title }}" />
<meta name="twitter:site" content="@your-twitter-handle" />
<meta name="twitter:creator" content="@your-twitter-handle" />
<meta name="theme-color" content="#1a202c">
{{ if .IsPage }}
<title>{{ .Title }} | {{ $.Site.Title }}</title>
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ .Title }}" />
<meta property="og:description" content="{{ .Summary }}" />
<meta name="description" content="{{ .Summary }}" />
<meta property="twitter:title" content="{{ .Title }}" />
<meta property="twitter:description" content="{{ .Summary }}" />
<meta property="article:author" content="your-name" />
<meta property="article:published_time" content="{{ .Date }}" />
{{ else }}
<title>{{ $.Site.Title }}</title>
<meta name="twitter:card" content="summary" />
<meta property="og:title" content="{{ $.Site.Title }}" />
<meta property="og:description" content="blog about dancing" />
<meta name="description" content="blog about dancing" />
{{ end }}
Этот фрагмент добавляет к заголовку каждой страницы набор метаданных и заполняет их в зависимости от содержимого. Для сообщений в блогах он добавляет заголовок и аннотацию, для других страниц используется контент по умолчанию.
Не забудь заменить часть содержимого в этом фрагменте своим собственным. Например, мета-цвет темы можно изменить на любой шестнадцатеричный цвет, и этот цвет будет использоваться в основном на телефонах Android в строке заголовка. Воспользуйся онлайн-подборщиком цветов, чтобы выяснить, какой шестнадцатеричный код цвета тебе нужен.
Если у тебя нет твиттера, не стесняйся удалять теги, в которых есть твиттер.
Шаблон baseof.html должен выглядеть примерно так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
<link rel="stylesheet" href="/styles.css">
<meta name="keywords" content="blog,travel,food,coffee,bread,canada" />
<meta property="og:site_name" content="{{ $.Site.Title }}" />
<meta property="og:title" content="{{ $.Site.Title }}" />
<meta name="twitter:site" content="@your-twitter-handle" />
<meta name="twitter:creator" content="@your-twitter-handle" />
<meta name="theme-color" content="#1a202c">
{{ if .IsPage }}
<title>{{ .Title }} | {{ $.Site.Title }}</title>
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ .Title }}" />
<meta property="og:description" content="{{ .Summary }}" />
<meta name="description" content="{{ .Summary }}" />
<meta property="twitter:title" content="{{ .Title }}" />
<meta property="twitter:description" content="{{ .Summary }}" />
<meta property="article:author" content="your-name" />
<meta property="article:published_time" content="{{ .Date }}" />
{{ else }}
<title>{{ $.Site.Title }}</title>
<meta name="twitter:card" content="summary" />
<meta property="og:title" content="{{ $.Site.Title }}" />
<meta property="og:description" content="blog about dancing" />
<meta name="description" content="blog about dancing" />
{{ end }}
</head>
<body>
{{ partial "navbar.html" . }}
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }}
</body>
</html>
Очень важно, чтобы в head был такой тег: <meta name="viewport" content="width=device-width, initial-scale=1"> это необходимо для того, чтобы твой сайт нормально выглядел на мобильных телефонах.