我有一个 Nuxt3 应用程序，其中使用作为路径变量传递的 ID 从 Firestore 加载博客文章。为了使我的网站对 SEO 更加友好，我想使用有关文章的信息（例如标题和图像）填充 Nuxt 标题和元标记（
和 <Meta>）。然而，似乎当从 Firestore 检索文章数据时，页面已加载，元标记暂时为空。虽然是临时的，但由于请求被视为完成，所以在Postman上测试时meta标签被认为是空的。 SSR 设置为 true。如果可能的话，我更喜欢使用选项 API。</p>
<p>是否有一种解决方案允许在页面加载之前使用从 Firestore 获取的数据填充元标记？</p>
<p>我尝试使用 SSR 设置并将 <pre><code>beforeMount()</code></pre> 中的代码移动到 <pre><code>created()</code></pre> 和 <pre><code>mounted()</code></pre> ，但没有运气。我是 Nuxt 的新手，如果你能帮助我那就太好了。</p>
<p>/pages/app/[id].vue</p>
<pre><code>
<script>
export default {
name: "AppPage",
data() {
return {
title: "",
catchphrase: "",
images: [],
description: "",
owner: "",
url: "",
isOwner: false,
};
},
async beforeMount() {
const auth = getAuth();
const id = this.$route.params.id;
const docRef = await doc(this.$db, "apps", id);
getDoc(docRef).then(async (doc) => {
if (doc.exists()) {
const data = doc.data();
this.title = data.title;
this.catchphrase = data.catchphrase;
this.images = data.images;
this.description = data.description;
this.owner = await (await getDoc(data.owner)).data();
this.url = data.url;
auth.onAuthStateChanged((user) => {
if (user) {
if (user.uid === this.owner.id) {
this.isOwner = true;
}
}
});
} else {
console.log("No such document!");
}
});
}
}
</script>
<template>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="catchphrase"/>
<Meta property="og:title" :content="title"/>
<Meta property="og:description" :content="catchphrase"/>
<Meta property="og:image" :content="images[0]"/>
<Meta property="og:url" :content="url"/>
<Meta property="og:type" content="website"/>
<Meta property="og:site_name" content="Circle4Devs"/>
<Meta name="twitter:card" content="summary_large_image"/>
<Meta name="twitter:site" content="@Circle4Devs"/>
<Meta name="twitter:title" :content="title"/>
<Meta name="twitter:description" :content="catchphrase"/>
<Meta name="twitter:image" :content="images[0]"/>
</Head>
<div id="article">
...
</div>
</code></pre>
<p>这是邮递员的回复。元标签为空</p>
<p><img src="https://cdn.txt58.com/i/AWkuaW1ndXIuY29tL211Zng1UEkucG5n" alt="image"/></p>
<p>这是页面加载后浏览器给出的响应。这里的元标签已填充。</p>
<p><img src="https://cdn.txt58.com/i/AWkuaW1ndXIuY29tL2xjamVUaW0ucG5n" alt="image"/></p>
</question>
<answer tick="false" vote="0">
<p>您可以使用 <pre><code>useHead</code></pre> 可组合项</p>
<pre><code>useHead({
title: "My page with ads",
// or, instead:
// titleTemplate: (title) => `My App - ${title}`,
viewport: "width=device-width, initial-scale=1, maximum-scale=1",
charset: "utf-8",
meta: [{ name: "description", content: "My amazing site." }]
})
</code></pre>
<p>您也可以使用 <pre><code>useSeoMeta</code></pre> 可组合项：</p>
<pre><code>useSeoMeta({
description: 'My about page',
ogDescription: 'Still about my about page',
ogTitle: 'About',
ogImage: '<>',
twitterCard: 'summary_large_image',
})
</code></pre>
<p>甚至，出于性能原因，<pre><code>useServerSeoMeta</code></pre>：</p>
<pre><code>useServerSeoMeta({
robots: 'index, follow'
})
</code></pre>
<p>您应该将它们放在您的 <pre><code><script></code></pre> 标签内，并且不需要导入任何内容。</p>
<p>来源：</p>
<p><a href="https://nuxt.com/docs/api/composables/use-head" rel="nofollow noreferrer">https://nuxt.com/docs/api/composables/use-head</a></p>
<p><a href="https://nuxt.com/docs/api/composables/use-seo-meta" rel="nofollow noreferrer">https://nuxt.com/docs/api/composables/use-seo-meta</a></p>
<p><a href="https://nuxt.com/docs/api/composables/use-server-seo-meta" rel="nofollow noreferrer">https://nuxt.com/docs/api/composables/use-server-seo-meta</a></p>
</answer>
</body></html>