我想在我的页面标题中添加<link rel="alternate" hreflang="lang_code"... >元素，以告诉页面的所有语言和地区变体。
homepage标头:
<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标头:
<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动态创建它?
您可以根据自定义_app中的区域设置动态地生成<link>s。这样，逻辑就适用于应用程序的所有页面，并在客户端导航上更新。
// 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