我想添加 <link rel="alternate" hreflang="lang_code"... >元素添加到我的页面标题中，以告知页面的所有语言和区域变体。
示例 homepage header :
<link rel="alternate" hrefLang="en" href="https://WEBSITE_URL/" />
<link rel="alternate" hrefLang="de" href="https://WEBSITE_URL/de" />
<link rel="alternate" hrefLang="nl" href="https://WEBSITE_URL/nl" />
示例 about-us header :
<link rel="alternate" hrefLang="en" href="https://WEBSITE_URL/about-us" />
<link rel="alternate" hrefLang="de" href="https://WEBSITE_URL/de/über-uns" />
<link rel="alternate" hrefLang="nl" href="https://WEBSITE_URL/nl/over-ons" />
并在每个页面中使用该语言的相应路径重复此操作。是否可以使用 Next.js 动态创建它？
最佳答案
您可以生成 <link> s 动态地基于自定义中的区域设置 _app .通过这种方式，逻辑适用于应用程序的所有页面，并更新客户端导航。
// pages/_app.js
import { useRouter } from 'next/router'
import Head from 'next/head'
const App = ({ Component, pageProps }) => {
const router = useRouter()
return (
<>
<Head>
{router.locales.map((locale) => {
return (
<link
key={locale}
rel="alternate"
hrefLang={locale}
href={`https://WEBSITE_URL/${locale}${router.asPath}`}
/>
)
})}
</Head>
<Component {...pageProps} />
</>
)
}
export default App
关于html - 如何在页面的所有语言和区域变体的标题中动态创建 HTML 标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69741861/