SEO: add crawlable language navigation links for Google indexing

- Add sr-only CSS class for screen-reader/crawler-visible elements
- Add hidden <nav> with real <a> links to all 6 language versions in template.html
- Googlebot can now discover /de/, /fr/, /es/, /pt-BR/, /ru/ via HTML links
- No visual changes - existing <select> dropdown remains the user-facing switcher
- Rebuild all www/ output with updated CSS hash
This commit is contained in:
Timo
2026-06-01 05:36:06 +02:00
parent 9285e1041e
commit b2ff24e155
13 changed files with 91 additions and 19 deletions
+3
View File
@@ -1240,6 +1240,7 @@
"integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
"dev": true,
"license": "MIT",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -1373,6 +1374,7 @@
"integrity": "sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==",
"dev": true,
"license": "Apache-2.0",
"peer": true,
"peerDependencies": {
"bare-abort-controller": "*"
},
@@ -1895,6 +1897,7 @@
"integrity": "sha512-loXy6bWOoP3EP6JA7jo6p5jMpBJmHmsNZM5SFRHLdh1MGOPurMnNBj4ZlAbaqUAaQWbCr7jHV4P7gzAyryZWkQ==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.8.0",
"@eslint-community/regexpp": "^4.12.2",
+13
View File
@@ -2660,6 +2660,19 @@ html:not(.lang-de) [lang="de"] {
scroll-margin-top: 100px;
}
/* --- Screen-reader-only (also crawlable by search engines) --- */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --- Skip-to-content accessibility link --- */
.skip-link {
position: absolute;
+8
View File
@@ -204,6 +204,14 @@
</select>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="chevron-icon"><polyline points="6 9 12 15 18 9"/></svg>
</div>
<nav class="sr-only" aria-label="Language alternatives">
<a href="https://sync.koalastuff.net/" hreflang="en">English</a>
<a href="https://sync.koalastuff.net/de/" hreflang="de">Deutsch</a>
<a href="https://sync.koalastuff.net/fr/" hreflang="fr">Français</a>
<a href="https://sync.koalastuff.net/es/" hreflang="es">Español</a>
<a href="https://sync.koalastuff.net/pt-BR/" hreflang="pt-br">Português (Brasil)</a>
<a href="https://sync.koalastuff.net/ru/" hreflang="ru">Русский</a>
</nav>
</div>
</div>
</nav>
+2 -2
View File
@@ -4,8 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datenschutz / Privacy Policy | KoalaSync</title>
<link rel="preload" href="style.e78fc9fc.min.css" as="style">
<link rel="stylesheet" href="style.e78fc9fc.min.css">
<link rel="preload" href="style.adcf0bc0.min.css" as="style">
<link rel="stylesheet" href="style.adcf0bc0.min.css">
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
<meta name="robots" content="noindex">
+10 -2
View File
@@ -6,9 +6,9 @@
<title>KoalaSync | Netflix, YouTube & jedes Video mit Freunden synchronisieren</title>
<meta name="description" content="Schaue Netflix, YouTube, Twitch und jedes HTML5-Video synchron mit Freunden. Kostenlose, quelloffene Browser-Erweiterung. Keine Anmeldung erforderlich.">
<link rel="preload" href="../style.e78fc9fc.min.css" as="style">
<link rel="preload" href="../style.adcf0bc0.min.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.e78fc9fc.min.css">
<link rel="stylesheet" href="../style.adcf0bc0.min.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/de/">
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
@@ -204,6 +204,14 @@
</select>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="chevron-icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
</div>
<nav class="sr-only" aria-label="Language alternatives">
<a href="https://sync.koalastuff.net/" hreflang="en">English</a>
<a href="https://sync.koalastuff.net/de/" hreflang="de">Deutsch</a>
<a href="https://sync.koalastuff.net/fr/" hreflang="fr">Français</a>
<a href="https://sync.koalastuff.net/es/" hreflang="es">Español</a>
<a href="https://sync.koalastuff.net/pt-BR/" hreflang="pt-br">Português (Brasil)</a>
<a href="https://sync.koalastuff.net/ru/" hreflang="ru">Русский</a>
</nav>
</div>
</div>
</nav>
+10 -2
View File
@@ -6,9 +6,9 @@
<title>KoalaSync | Sincroniza Netflix, YouTube y cualquier video con amigos</title>
<meta name="description" content="Mira Netflix, YouTube, Twitch y cualquier video HTML5 en perfecta sincronización con amigos. Extensión de navegador gratuita y de código abierto. Sin registro.">
<link rel="preload" href="../style.e78fc9fc.min.css" as="style">
<link rel="preload" href="../style.adcf0bc0.min.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.e78fc9fc.min.css">
<link rel="stylesheet" href="../style.adcf0bc0.min.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/es/">
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
@@ -204,6 +204,14 @@
</select>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="chevron-icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
</div>
<nav class="sr-only" aria-label="Language alternatives">
<a href="https://sync.koalastuff.net/" hreflang="en">English</a>
<a href="https://sync.koalastuff.net/de/" hreflang="de">Deutsch</a>
<a href="https://sync.koalastuff.net/fr/" hreflang="fr">Français</a>
<a href="https://sync.koalastuff.net/es/" hreflang="es">Español</a>
<a href="https://sync.koalastuff.net/pt-BR/" hreflang="pt-br">Português (Brasil)</a>
<a href="https://sync.koalastuff.net/ru/" hreflang="ru">Русский</a>
</nav>
</div>
</div>
</nav>
+10 -2
View File
@@ -6,9 +6,9 @@
<title>KoalaSync | Synchronisez Netflix, YouTube et n'importe quelle vidéo avec vos amis</title>
<meta name="description" content="Regardez Netflix, YouTube, Twitch et des vidéos HTML5 en synchro avec vos amis. Extension de navigateur gratuite et open-source. Aucune inscription requise.">
<link rel="preload" href="../style.e78fc9fc.min.css" as="style">
<link rel="preload" href="../style.adcf0bc0.min.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.e78fc9fc.min.css">
<link rel="stylesheet" href="../style.adcf0bc0.min.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/fr/">
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
@@ -204,6 +204,14 @@
</select>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="chevron-icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
</div>
<nav class="sr-only" aria-label="Language alternatives">
<a href="https://sync.koalastuff.net/" hreflang="en">English</a>
<a href="https://sync.koalastuff.net/de/" hreflang="de">Deutsch</a>
<a href="https://sync.koalastuff.net/fr/" hreflang="fr">Français</a>
<a href="https://sync.koalastuff.net/es/" hreflang="es">Español</a>
<a href="https://sync.koalastuff.net/pt-BR/" hreflang="pt-br">Português (Brasil)</a>
<a href="https://sync.koalastuff.net/ru/" hreflang="ru">Русский</a>
</nav>
</div>
</div>
</nav>
+2 -2
View File
@@ -4,8 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum / Legal Notice | KoalaSync</title>
<link rel="preload" href="style.e78fc9fc.min.css" as="style">
<link rel="stylesheet" href="style.e78fc9fc.min.css">
<link rel="preload" href="style.adcf0bc0.min.css" as="style">
<link rel="stylesheet" href="style.adcf0bc0.min.css">
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
<meta name="robots" content="noindex">
+10 -2
View File
@@ -6,9 +6,9 @@
<title>KoalaSync | Sync Netflix, YouTube & Any Video with Friends</title>
<meta name="description" content="Watch Netflix, YouTube, Twitch & any HTML5 video in perfect sync with friends. Free, open-source browser extension for Chrome and Firefox. No sign-up needed.">
<link rel="preload" href="style.e78fc9fc.min.css" as="style">
<link rel="preload" href="style.adcf0bc0.min.css" as="style">
<link rel="preload" as="image" href="assets/LookDownKoala.webp" imagesrcset="assets/LookDownKoala-1x.webp 90w, assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="style.e78fc9fc.min.css">
<link rel="stylesheet" href="style.adcf0bc0.min.css">
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/">
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
@@ -204,6 +204,14 @@
</select>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="chevron-icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
</div>
<nav class="sr-only" aria-label="Language alternatives">
<a href="https://sync.koalastuff.net/" hreflang="en">English</a>
<a href="https://sync.koalastuff.net/de/" hreflang="de">Deutsch</a>
<a href="https://sync.koalastuff.net/fr/" hreflang="fr">Français</a>
<a href="https://sync.koalastuff.net/es/" hreflang="es">Español</a>
<a href="https://sync.koalastuff.net/pt-BR/" hreflang="pt-br">Português (Brasil)</a>
<a href="https://sync.koalastuff.net/ru/" hreflang="ru">Русский</a>
</nav>
</div>
</div>
</nav>
+2 -2
View File
@@ -4,8 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join Room | KoalaSync</title>
<link rel="preload" href="style.e78fc9fc.min.css" as="style">
<link rel="stylesheet" href="style.e78fc9fc.min.css">
<link rel="preload" href="style.adcf0bc0.min.css" as="style">
<link rel="stylesheet" href="style.adcf0bc0.min.css">
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
<meta name="robots" content="noindex">
+10 -2
View File
@@ -6,9 +6,9 @@
<title>KoalaSync | Sincronize Netflix, YouTube e qualquer vídeo com amigos</title>
<meta name="description" content="Assista Netflix, YouTube, Twitch e qualquer vídeo HTML5 em perfeita sincronia com amigos. Extensão de navegador gratuita e de código aberto. Sem registro.">
<link rel="preload" href="../style.e78fc9fc.min.css" as="style">
<link rel="preload" href="../style.adcf0bc0.min.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.e78fc9fc.min.css">
<link rel="stylesheet" href="../style.adcf0bc0.min.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/pt-BR/">
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
@@ -204,6 +204,14 @@
</select>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="chevron-icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
</div>
<nav class="sr-only" aria-label="Language alternatives">
<a href="https://sync.koalastuff.net/" hreflang="en">English</a>
<a href="https://sync.koalastuff.net/de/" hreflang="de">Deutsch</a>
<a href="https://sync.koalastuff.net/fr/" hreflang="fr">Français</a>
<a href="https://sync.koalastuff.net/es/" hreflang="es">Español</a>
<a href="https://sync.koalastuff.net/pt-BR/" hreflang="pt-br">Português (Brasil)</a>
<a href="https://sync.koalastuff.net/ru/" hreflang="ru">Русский</a>
</nav>
</div>
</div>
</nav>
+10 -2
View File
@@ -6,9 +6,9 @@
<title>KoalaSync | Синхронизация Netflix, YouTube и любого видео с друзьями</title>
<meta name="description" content="Смотрите Netflix, YouTube, Twitch и любые HTML5-видео в синхронизации с друзьями. Бесплатное расширение браузера с открытым кодом. Регистрация не требуется.">
<link rel="preload" href="../style.e78fc9fc.min.css" as="style">
<link rel="preload" href="../style.adcf0bc0.min.css" as="style">
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
<link rel="stylesheet" href="../style.e78fc9fc.min.css">
<link rel="stylesheet" href="../style.adcf0bc0.min.css">
<link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
<link rel="canonical" href="https://sync.koalastuff.net/ru/">
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
@@ -204,6 +204,14 @@
</select>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="chevron-icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
</div>
<nav class="sr-only" aria-label="Language alternatives">
<a href="https://sync.koalastuff.net/" hreflang="en">English</a>
<a href="https://sync.koalastuff.net/de/" hreflang="de">Deutsch</a>
<a href="https://sync.koalastuff.net/fr/" hreflang="fr">Français</a>
<a href="https://sync.koalastuff.net/es/" hreflang="es">Español</a>
<a href="https://sync.koalastuff.net/pt-BR/" hreflang="pt-br">Português (Brasil)</a>
<a href="https://sync.koalastuff.net/ru/" hreflang="ru">Русский</a>
</nav>
</div>
</div>
</nav>
File diff suppressed because one or more lines are too long