Привет! Сегодня будет короткая статья про основные метаданные для нашего лендинга — это title, description и keywords, это минимальная SEO-настройка для сайта, которая обязательно должна быть.
Полезные ссылки:
Часть 1. Подготовка и настройка проекта
Часть 2. Настройка конфигурации и установка необходимых библиотек
Часть 3. Создание CSS-переменных и верстка блока Header
Часть 4. Верстка секции Hero, создание компонента Button
Часть 5. Верстка секции About
Часть 6. Верстка секции Gallery
Часть 7. Верстка секции WhyUs
Часть 8. Верстка секции Catalogue
Часть 9. Верстка секции Map
Часть 10. Верстка секции Footer
Часть 11. Создание якорных ссылок, рефакторинг
Часть 12. Создание мобильного меню
Часть 13. Анимация секций при скролле
Часть 14. Установка метаданных
Часть 15. Настройка Favicon.ico
Часть 16. Настройка счетчика Яндекс Метрики
Часть 17. Публикуем проект на хостинге
Настройка метаданных
В случае разработки лендинга мы будем иметь всего одну страницу сайта, поэтому мы можем ограничиться статичными метаданными.
В файле layout.jsx создадим объект metadata, который встроенный в nextjs сборщик преобразует в соответствующие метатеги.
Title
Это HTML-элемент, который отображается на текущей вкладке в браузере, а также определяет заголовок вашей страницы в поисковой выдаче.
В идеале размер title должен быть в диапазоне 50-60 символов.
title: 'Строительство уютных загородных домов: комфорт гарантирован',
Description
Это краткое описание страницы, которое отображается под заголовком (title) в поисковой выдаче.
Длина description должна быть в диапазоне 70–170 символов.
description: 'Строим уютные загородные дома с комфортом для жизни. От проекта до сдачи. Используем качественные материалы. Создаем пространство вашей мечты',
Keywords
Специальный метатег, включающий в себя слова-ключи, отображающие текстовое и смысловое содержание данной страницы.
Многие поисковые системы заявляют, что данный метатег перестал быть обязательным, однако лучше лишний раз его прописать.
Длина keywords должна составлять 8–10 слов, разделенных запятой.
keywords: 'строительство, дома, загородное, коттеджи, комфорт, проекты, под ключ, современные',
Итоговый код файла layout.jsx
import { Inter } from 'next/font/google';
import './globals.css';
const inter = Inter({
subsets: ['cyrillic'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
display: 'swap',
variable: '--font-inter',
});
export const metadata = {
title: 'Строительство уютных загородных домов: комфорт гарантирован',
description:
'Строим уютные загородные дома с комфортом для жизни. От проекта до сдачи. Используем качественные материалы. Создаем пространство вашей мечты',
keywords: 'строительство, дома, загородное, коттеджи, комфорт, проекты, под ключ, современные',
};
export default function RootLayout({ children }) {
return (
<html lang='ru' suppressHydrationWarning>
<body className={`${inter.variable}`}>{children}</body>
</html>
);
}
В следующих статьях настроим favicon.ico.
Код данного урока доступен в репозитории GitHub по ссылке.
Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт — in9var.ru.