如何在页面的所有语言和区域变体的标题中动态创建 HTML 标签？

Question

如何在页面的所有语言和区域变体的标题中动态创建 HTML 标签？

Gir*_*tto 2 html internationalization reactjs next.js

我想<link rel="alternate" hreflang="lang_code"... >向页面标题添加元素以告知页面的所有语言和区域变体。

\n

标题示例homepage：

\n
<link rel="alternate" hrefLang="en" href="https://WEBSITE_URL/" />\n<link rel="alternate" hrefLang="de" href="https://WEBSITE_URL/de" />\n<link rel="alternate" hrefLang="nl" href="https://WEBSITE_URL/nl" />\n
Run Code Online (Sandbox Code Playgroud)\n
标题示例about-us：
\n
<link rel="alternate" hrefLang="en" href="https://WEBSITE_URL/about-us" />\n<link rel="alternate" hrefLang="de" href="https://WEBSITE_URL/de/\xc3\xbcber-uns" />\n<link rel="alternate" hrefLang="nl" href="https://WEBSITE_URL/nl/over-ons" />\n
Run Code Online (Sandbox Code Playgroud)\n
并在每个页面中重复此操作，并使用该语言的相应路径。是否可以使用 Next.js 动态创建它？
\n

Answer 1

jul*_*ves 9

您可以<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

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，3 月前
查看次数：	1837 次
最近记录：	4 年，3 月前