在 Nextjs/react 应用程序中更新元标记答案

【问题标题】：Updating meta tags in Nextjs/react application在 Nextjs/react 应用程序中更新元标记
【发布时间】：2021-07-12 05:45:33
【问题描述】：

我正在尝试对网站进行 SEO，但我不允许使用任何 3rd 方库。我想用动态更新元描述的内容。我做了一切，它应该可以工作，但要改变它，我需要重新加载页面，这不是很有效，我想在页面重新呈现时这样做。

这是头：我删除了大部分代码，只留下了你需要的东西。

const AppHead = ({pageTitle = "", canonicalUrl, metaDescription = ''}) => {
    return (
        <Head>
         <meta name="description" content={metaDescription ? metaDescription : 'Prettyshop'} />
         <title>{pageTitle ? `${pageTitle}` : "Prettyshop"}</title>
        </Head>

在 Layout.js 中使用


function Layout({ pageTitle = "", children, betweenHeaderAndMain, showBrands, canonicalUrl, metaDescription=''}) {
    return (
        <MainLayout>
            <AppHead pageTitle={pageTitle} canonicalUrl={canonicalUrl || null} metaDescription={metaDescription} />
            <AddedToCartDialog />
            <LoginDialog />
            <LoginDialog showOnUnauthorized />
            <ErrorDialog />
            <FacebookLogin />
            <Header />
            {betweenHeaderAndMain}
            <main className="container-fluid page-content">{children}</main>
            <Footer showBrands={showBrands ? true : false} />
            <CookiesBar />
            <BackToTop />
        </MainLayout>
    );
}

我在这里传递了一个值：

<Layout pageTitle={pageTitle} metaDescription={get(product, 'data.attributes.description', null)? get(product, 'data.attributes.description', null).slice(0,160) : null} betweenHeaderAndMain={<Breadcrumbs className="container-fluid" />}>
            <div className="row product-head">
                <div className="col-md-6 offset-lg-1 col-lg-5">
                    <ImageGallery />
                </div>
        </Layout>

正如我所说的一切正常，但如果我重新加载页面，我希望它在我渲染页面时更新，而不是在我重新加载时。如何在不重新加载页面的情况下更新元内容？

【问题讨论】：

页面是如何重新渲染的？
每当您访问不同的产品时，它都会重新呈现页面，但元数据不会更新，但当我点击刷新时，它会更新它。

标签： javascript html reactjs next.js

【解决方案1】：

您可以使用 state 来存储元描述，然后通过 setState 或 props 更新 state，它会重新渲染而无需重新加载。

【讨论】：