Как сделать SEO на сайте Django с помощью CMS Wagtail

(эта статья была первоначально опубликована здесь

Одна из самых важных вещей, которую нужно сделать при создании веб-сайта, — это заниматься SEO (поисковая оптимизация), это позволяет различным поисковым системам в Интернете ссылаться на веб-страницы. Он следует набору конкретных правил, и эти правила должны использоваться редактором контента, писателем или тем, кто когда-либо отвечал за создание контента для веб-сайта. Но дело в том, что трясогузка, поскольку система управления контентом имеет едва ли не минимум для реализации этой функции, к счастью, некоторые умные разработчики написали некоторый пакет для этого.

Что доступно?

Краткий обзор здесь показывает нам их список. У нас есть :

Как установить ?

В этом посте мы сосредоточимся на метаданных трясогузки, которые довольно легко установить (как и любой другой плагин трясогузки);

pip install wagtail-metadata

Добавьте приложение в INSTALLED_APPS в настройках джанго.

INSTALLED_APPS = [ ... 'wagtailmetadata',
]

и это сделано. Никаких миграций для применения (по крайней мере, на этом уровне).

Как это работает ?

Чтобы правильно добавить поддержку SEO на веб-страницу, вы должны следовать набору правил и добавить некоторые метатеги в документ HTML, они называются метатегами Opengraph, в <head> ярлык. Эти теги в основном:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<meta name="title" content="page title here">

<meta name="description" content="some description goes here">

<meta name="author" content="name of person who wrote the content">

Здесь более подробно объясняется https://moz.com/.

Наша цель — легко добавлять и обновлять эти теги и их значения на страницах сайта, и это цель этой библиотеки. Чтобы сделать это, как и в трясогузке, каждая страница основана на типе, определенном в моделях, нам нужно будет расширить MetadataPageMixin от from wagtailmetadata.models import MetadataPageMixin и у нас будет такой код:

from wagtail.core.models import Page
from wagtailmetadata.models import MetadataPageMixin class HomePage(MetadataPageMixin, Page): pass class AboutPage(MetadataPageMixin, Page): pass

Из-за того, что наше наследование работает в python и этой реализации lib MetadataPageMixin следует поставить перед Page сорт. На этом этапе вы можете выполнить миграцию своих приложений и перейти к администратору сайта и попытаться создать или обновить страницу, чтобы увидеть некоторые изменения.

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

Скриншот 24.05.2020, 21.41.57.png

Теперь у нас есть больше полей на странице администратора, где мы можем редактировать поле, связанное с SEO, под promotion панели, теперь давайте впишем в шаблон какой-нибудь тег, чтобы отобразить эту информацию в нужном месте. Так как он должен появиться на всех страницах сайта, мы должны поместить его в базовый шаблон сайта, по умолчанию он называется base.html и находится в вашей основной папке проекта, если ваш проект называется mysite ты узнаешь это внутри mysite/templates/base.html. Теперь нужно написать полезный тег Django, чтобы вернуть его в head элемент, как в этом фрагменте:

{% load wagtailmetadata_tags %}
<html> <head>
{% meta_tags %}
</head>
<body>
</body>
</html>

Этого достаточно для базовой поддержки SEO, он будет обрабатывать процесс генерации метаполя и выводить метатег для социальных сетей (мета facebook, мета Twitter и т. д.). На этом этапе вы можете проверить отрендеренный HTML и увидеть результат.

Скриншот 24.05.2020, 21.44.47.png

Как видите, по умолчанию он предоставляет метатеги для twitter и OpenGraph (что более распространено), а также предоставляет простое содержание мета-описания для самого HTML.

Чтобы проверить рендеринг, вы можете открыть средство проверки OpenGraph, например валидатор твиттер карты чтобы увидеть, как ссылки на ваши страницы будут интерпретироваться и отображаться в твиттере. Вот результат проверки на одном веб-сайте, который я создал с помощью CMS Wagtail. Существует множество других инструментов для проведения подобных тестов. Скриншот 24.05.2020, 21.50.12.png

С этой библиотекой можно реализовать гораздо больше вещей, цель этого поста состояла в том, чтобы представить ее и концепцию. Вы можете сделать больше, проверив документацию, которая хорошо написана с большим количеством примеров.

Спасибо за прочтение, вы можете поразить меня твиттер если вы хотите узнать больше.