Создаем крутой лендинг сайт с нуля: метаданные title description #14
Привет! Сегодня будет короткая статья про основные метаданные для нашего лендинга — это title, description и keywords, это минимальная SEO-настройка для сайта, которая обязательно должна быть.
Полезные ссылки:
- Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.
- Код данного урока доступен в репозитории GitHub по ссылке.
- Подписывайтесь на мой Дзен канал
Настройка метаданных
В случае разработки лендинга мы будем иметь всего одну страницу сайта, поэтому мы можем ограничиться статичными метаданными.
В файле 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.
На этом всё, добавляйте сайт в избранное, чтобы не пропустить новых статей, а также подписывайтесь на мой Дзен-канал – dzen.ru/in9var