Почему метатеги Next.js не находят боты/сканеры?
Я использую Next.js с Typescript и MongoDB для получения данных. У меня проблемы с отображением страницы, потому что сканер не может обнаружить метатеги.
Например, поисковая система Bing сообщает, что теги Title и Meta description отсутствуют, хотя я их вижу. Может быть, это из-за axios и useState. Может ли кто-нибудь указать мне, какое должно быть решение?
Инспектор моего сайта:
Проверка URL-адреса Bing:
[пид].tsx:
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router';
import Head from 'next/head';
import Navbar from '@/sections/Navbar';
import BlogBody from '@/sections/BlogBody';
import Footer from '@/sections/Footer';
import axios from 'axios';
import { IBlog } from '@/schema/blogSchema';
import Error from '@/components/Error';
import Loading from '@/components/Loading';
const Blog = () => {
const _router = useRouter();
const { pid } = _router.query;
const [currentDoc, setCurrentDoc] = useState<IBlog | undefined>();
const [isError, setIsError] = useState(false);
useEffect(() => {
if (pid !== undefined) {
const apiAddr = `/api/queries?action=searchexact&target=${pid}`;
axios.get(apiAddr)
.then((res) => {
setCurrentDoc(res.data.data[0]);
})
.catch((err) => {
setIsError(true);
})
}
}, [pid])
return (
<>
{
currentDoc && (
<Head>
<title>{currentDoc.title} - Wayne Blogs</title>
<meta name = "description" content = {currentDoc.desc} />
<meta name = "author" content = {currentDoc.author} />
<link rel = "shortcut icon" href = "/favicon.svg" type = "image/x-icon" />
</Head>
)
}
<Navbar />
<main>
{
isError ? (
<Error text = "There was a problem fetching the document, please refresh the page" />
) : (
currentDoc ? (
<BlogBody blogInfo = {currentDoc} />
) : (
<Loading />
)
)
}
<Footer />
</main>
</>
)
}
export default Blog
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это потому, что вы извлекаете данные о клиенте внутри useEffect и только потом устанавливаете Head. В результате HTML-файл, отправленный Next.js (вы можете просмотреть его на вкладке исходного кода инструментов разработки), не будет содержать данные Head.
Рекомендуется отображать ваши Head на сервере. И для этого вы можете использовать серверную функцию выборки данных , например getServerSideProps. В вашем случае это будет похоже на:
const Blog = ({ currentDoc }) => {
return (
<>
<Head>
<title>{currentDoc.title} - Wayne Blogs</title>
<meta name = "description" content = {currentDoc.desc} />
<meta name = "author" content = {currentDoc.author} />
<link rel = "shortcut icon" href = "/favicon.svg" type = "image/x-icon" />
</Head>
<Navbar />
<main>
<BlogBody blogInfo = {currentDoc} />
<Footer />
</main>
</>
);
};
export const getServerSideProps = async (context) => {
const res = await axios.get(`/api/queries?action=searchexact&target=${context.query.pid}`);
return {
props: { currentDoc: res.data.data[0] },
};
};
export default Blog;
Обратите внимание, что я не обрабатываю возможные ошибки. Я позволил тебе сделать это.
Я понимаю. На самом деле со всеми иногда случается что-то пропустить довольно долгое время. И снова с удовольствием :)
я все еще сталкиваюсь с той же проблемой, загрузка исправлена (ваше решение сработало), но поисковые роботы не могут найти контент и метаданные страницы (если вы хотите проверить мою активную ссылку, пожалуйста, дайте мне знать)
Выполнив указанные действия, убедитесь, что вы не получаете результат предыдущих тестов (иногда это может быть так, потому что ваш сервер возвращает ранее кэшированную версию или бот читает из кэша).
Спасибо за эту потрясающую поддержку, брат, хорошо, дай мне сначала посмотреть, что я могу сделать. я свяжусь с тобой, как только снова почувствую себя обреченным
Я терял мозги, я не мог понять, почему я получаю эту ошибку ... я искал в Интернете (может быть, я не знал, что искать ... потому что я даже читал о getServerSide), я просто не понял. я программист-любитель (не квалифицированный), просто делаю все возможное, чтобы изучить NextJS. Еще раз спасибо за решение, это много значит