Option to generate alternate links in <head> #547
beeb
started this conversation in
DX improvements
Replies: 2 comments 1 reply
-
|
Hi @beeb, |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Thanks for this! I managed to do something like you suggested. I'll make a PR to the sveltekit demo repo tomorrow including this and an example how to change the <title> element.
<script lang="ts">
import { locales } from '$i18n/i18n-util'
import { page } from '$app/stores'
import { replaceLocaleInUrl } from '$lib/utils'
</script>
{#each locales as l}
<link rel="alternate" hreflang={l} href={`${replaceLocaleInUrl($page.url, l)}`} />
{/each}
<script lang="ts">
import HeadHrefLangs from '$lib/components/HeadHrefLangs.svelte'
</script>
<svelte:head>
<HeadHrefLangs />
</svelte:head>
export const replaceLocaleInUrl = (url: URL, locale: string): string => {
const [, , ...rest] = url.pathname.split('/')
return `/${[locale, ...rest].join('/')}${url.search}`
} |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Is there a way that we could generate alternative links for the same page in other languages inside the
<head>tag?Reference: https://developers.google.com/search/docs/specialty/international/localized-versions#html
<link rel="alternate" hreflang="lang_code" href="url_of_page" />I've seen i18n libraries for Astro provide a component for this, but I don't know how it would look with
typesafe-i18n. Specifically, I would be interested in a solution for SvelteKit.Thanks!
Beta Was this translation helpful? Give feedback.
All reactions