NextSeo는 동적 메타 데이터를 사용하고 외부 API를 사용하여 소스 코드를 검사할 때 업데이트되지 않습니다.
apollo 클라이언트에서 "useQuery"를 사용하면 SEO를 사용하거나 Facebook, Linkedin과 같은 소셜 미디어에 URL을 공유할 때 작동하지 않습니다.
해결책은 getInitialProps의 비동기 메서드 및 적중 API와 함께 "getInitialProps"를 사용하는 것입니다.
const DetailBlogPage: NextPage = ({ data }: any) => {
return (
<SiteLayout>
<NextSeo
title={data.articles.title}
description={data.article..summary}
canonical={`https://www.nuliscv.com/blog/${data.article.slug}`}
openGraph={{
type: 'website',
locale: 'id_ID',
url: `https://www.example.com/blog/${data.articles[0].slug}`,
site_name: 'Example.com',
images: [
{ url: `https://abcdefg.directus.app/assets/${data.articles[0].image.id}` },
]
}}
/>
<div>
<DetailBlog data={data} />
</div>
</SiteLayout>
)
}
DetailBlogPage.getInitialProps = async ({ query }) => {
// do the data fetching here
const { slug } = query;
const errorLink = onError(({ graphqlErrors, networkError }: any) => {
if (graphqlErrors) {
graphqlErrors.map(({ message, location, path }: any) => {
});
}
});
const portfolioLink = from([
errorLink,
new HttpLink({ uri: "https://abcdefg.directus.app"}),
]);
const client = new ApolloClient({
cache: new InMemoryCache({
addTypename: false
}),
link: portfolioLink,
});
const { data } = await client.query({
query: GET_DETAIL_BLOG,
variables: {
slug
}
})
return { data: data };
}
Reference
이 문제에 관하여(NextSeo는 동적 메타 데이터를 사용하고 외부 API를 사용하여 소스 코드를 검사할 때 업데이트되지 않습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/agiksetiawan/nextseo-not-updated-when-inspect-source-code-using-dynamic-meta-data-and-using-external-api-5eh7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)