Оптимизация Next.js 14 для SEO с использованием метаданных
Содержание:
- Введение
- Оптимизация поисковых систем с помощью метаданных
- Добавление мета-тегов в домашнюю страницу
- Добавление мета-тегов на странице "О нас"
- Динамические страницы и мета-теги
- Открытый граф и мета-теги Facebook и Twitter
- Оптимизация функции получения блога
- Заключение
🌟 Оптимизация поисковых систем с использованием метаданных 🌟
Введение:
Привет, друзья! Добро пожаловать на очередной видеоролик о том, как оптимизировать поисковые системы с помощью метаданных. В этом видео я расскажу о примере использования блог-приложения, созданного с помощью фреймворка CMS Strappy в одном из предыдущих видео. Я покажу вам, как добавлять мета-теги на домашнюю страницу, страницу "О нас" и на динамические страницы. Кроме того, я покажу вам, как добавлять мета-теги Open Graph для использования в социальных сетях, таких как Twitter и Facebook.
Оптимизация поисковых систем с использованием метаданных
Добавление мета-тегов на домашнюю страницу:
Для начала, я добавлю мета-теги на домашнюю страницу. В файле layout.tsx, который является частью проекта нашего блог-приложения, я добавлю следующий код:
import Head from 'next/head';
import { useEffect } from 'react';
const Home = () => {
useEffect(() => {
document.title = "Домашняя страница";
const metaTags = document.getElementsByTagName('meta');
metaTags["description"].content = "Описание домашней страницы";
}, []);
return (
<div>
<h1>Добро пожаловать на домашнюю страницу!</h1>
<p>Здесь вы найдете множество видео по Next JS 13.</p>
</div>
);
};
export default Home;
Теперь, если открыть страницу в браузере и посмотреть на метаданные, вы увидите, что заголовок и описание были обновлены.
Добавление мета-тегов на страницу "О нас":
Точно так же, как на домашней странице, мы можем добавить мета-теги и на другие страницы нашего блог-приложения. Например, на странице "О нас" я добавлю следующий код:
import Head from 'next/head';
import { useEffect } from 'react';
const About = () => {
useEffect(() => {
document.title = "О нас";
const metaTags = document.getElementsByTagName('meta');
metaTags["description"].content = "Описание страницы 'О нас'";
}, []);
return (
<div>
<h1>О нас</h1>
<p>Мы команда разработчиков, создающих видеоуроки по Next JS 13.</p>
</div>
);
};
export default About;
Теперь, если открыть страницу "О нас" в браузере, вы увидите, что заголовок и описание были обновлены.
Динамические страницы и мета-теги:
Когда у нас есть динамические страницы в нашем приложении, нам необходимо добавлять мета-теги динамически. Например, если у нас есть страница блога, мы хотим, чтобы заголовок и описание были уникальными для каждой страницы блога.
В нашем компоненте блога, мы можем использовать функцию generateMetadata, чтобы получить метаданные для каждой страницы блога.
import Head from 'next/head';
import { generateMetadata } from '../utils/metadata';
const Blog = ({ blogId }) => {
const metadata = generateMetadata(blogId);
return (
<div>
<Head>
<title>{metadata.title}</title>
<meta name="description" content={metadata.description} />
<meta property="og:title" content={metadata.title} />
<meta property="og:description" content={metadata.description} />
<meta property="og:image" content={metadata.image} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={metadata.title} />
<meta name="twitter:description" content={metadata.description} />
<meta name="twitter:image" content={metadata.image} />
</Head>
<h1>{metadata.title}</h1>
<p>{metadata.description}</p>
<img src={metadata.image} alt="Блоговая картинка" />
</div>
);
};
export default Blog;
Теперь, если открыть страницу блога в браузере, вы увидите, что заголовок, описание и изображение заполняются динамически в соответствии с данными каждой страницы блога.
Открытый граф и мета-теги Facebook и Twitter:
Чтобы оптимизировать наше блог-приложение для социальных сетей, мы можем добавить мета-теги Open Graph, Twitter и Facebook. Вот пример, как это можно сделать:
import Head from 'next/head';
import { generateMetadata } from '../utils/metadata';
const Blog = ({ blogId }) => {
const metadata = generateMetadata(blogId);
return (
<div>
<Head>
<title>{metadata.title}</title>
<meta name="description" content={metadata.description} />
<meta property="og:title" content={metadata.title} />
<meta property="og:description" content={metadata.description} />
<meta property="og:image" content={metadata.image} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={metadata.title} />
<meta name="twitter:description" content={metadata.description} />
<meta name="twitter:image" content={metadata.image} />
</Head>
<h1>{metadata.title}</h1>
<p>{metadata.description}</p>
<img src={metadata.image} alt="Блоговая картинка" />
</div>
);
};
export default Blog;
Теперь, при использовании данного приложения в социальных сетях, мета-теги Open Graph, Twitter и Facebook будут автоматически добавлены, и заголовок, описание и изображение будут отображаться в соответствующих карточках.
Оптимизация функции получения блога:
Чтобы улучшить производительность, мы можем оптимизировать функцию получения блога. Мы можем закэшировать результаты запросов и использовать кэш для повторных запросов. Вот пример, как это можно сделать:
import { cache } from 'react';
const fetchBlog = async (blogId) => {
const cachedBlog = cache.get(blogId);
if (cachedBlog) {
return cachedBlog;
}
const response = await fetch(`/api/blog/${blogId}`);
const blog = await response.json();
cache.set(blogId, blog);
return blog;
};
export default fetchBlog;
Теперь, при каждом вызове функции fetchBlog, мы сначала проверяем, есть ли закэшированный результат. Если есть, возвращаем его, иначе делаем запрос к API и кэшируем результаты для будущих запросов.
Заключение:
В этом видеоролике мы рассмотрели, как использовать метаданные для оптимизации поисковых систем в нашем блог-приложении. Мы добавили мета-теги на домашнюю страницу, страницу "О нас" и на динамические страницы. Мы также рассмотрели добавление мета-тегов Open Graph, Twitter и Facebook для социальных сетей. Наконец, мы оптимизировали функцию получения блога, чтобы улучшить производительность.
Спасибо вам за просмотр этого видео! Если вам понравилось, не забудьте подписаться на мой канал и поставить лайк под этим видео. Увидимся в следующем ролике!
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
