Closed yonirosenbaum closed 3 months ago
It seems like Google has crawled your page at a time where you didn't have the translation set up yet (maybe only for certain languages) and that resulted in the placeholders being indexed. If you check the markup of your page, you can confirm that there are no placeholders.
Thanks!!
Description
🐛 Bug Report
Messages are crawled by google before the relevant text has been injected ie below 'quiz.general.whatWeDo' should equal 'What do we do'
I am using i18n routing and have followed the docs: https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing.
Here is the below page that is being affected, note the html is being stripped out and is just appearing as empty space.
app/[locale]/what-we-do/page.tsx
` 'use client'; import styled from '@emotion/styled'; import { Typography, Button } from '@mui/material'; import { useRouter } from 'next/navigation'; import Image from 'next/image'; import { css } from '@emotion/react'; import Alert, { AlertPosition, AlertColor } from 'src/components/DataDisplay/Alert'; import { MIN_WIDTH } from 'src/utils/constant'; import { routes } from 'src/utils/routes'; import { useTranslations } from 'next-intl'; import { useEffect } from 'react';
const WhatWeDo = () => { const t = useTranslations('quiz.general'); return (
); };
export default WhatWeDo; ` Here are some other pages which impact the i18n setup
/app/[locale]/layout
`
const locales = ['en', 'es'];
export function generateStaticParams() { return locales.map((locale) => ({ locale })); }
type RootLayoutProps = PropsWithChildren & ParamsType;
const RootLayout = async ({ children, params }: RootLayoutProps) => { const messages = await getMessages(); return ( <html lang={params.locale || 'en'}>
); }; `
src/i18n.ts
` import {notFound} from 'next/navigation'; import {getRequestConfig} from 'next-intl/server';
// Can be imported from a shared config const locales = ['en', 'es'];
export default getRequestConfig(async ({locale}) => { // Validate that the incoming
locale
parameter is valid if (!locales.includes(locale as any)) notFound();return { messages: (await import(
../messages/${locale}.json
)).default }; }); `src/middleware.ts
` import createMiddleware from 'next-intl/middleware';
export default createMiddleware({ // A list of all locales that are supported locales: ['en', 'es'],
// Used when no locale matches defaultLocale: 'en' });
export const config = { // Match only internationalized pathnames matcher: ['/', '/(es|en)/:path*'] }; `
Your Environment
Verifications
Mandatory reproduction URL
https://www.google.com/search?q=boostdating.com&sca_esv=bb6fb22019ea88f6&ei=2vaDZt7nLdHn2roPw76IsAc&ved=0ahUKEwjevM3rsYiHAxXRs1YBHUMfAnYQ4dUDCA8&uact=5&oq=boostdating.com&gs_lp=Egxnd3Mtd2l6LXNlcnAiD2Jvb3N0ZGF0aW5nLmNvbUjUBFDYAljYAnABeACQAQCYAegBoAHoAaoBAzItMbgBA8gBAPgBAZgCAKACAJgDAIgGAZIHAKAHqgE&sclient=gws-wiz-serp
Reproduction description
Visit to see: https://www.google.com/search?q=boostdating.com&sca_esv=bb6fb22019ea88f6&ei=2vaDZt7nLdHn2roPw76IsAc&ved=0ahUKEwjevM3rsYiHAxXRs1YBHUMfAnYQ4dUDCA8&uact=5&oq=boostdating.com&gs_lp=Egxnd3Mtd2l6LXNlcnAiD2Jvb3N0ZGF0aW5nLmNvbUjUBFDYAljYAnABeACQAQCYAegBoAHoAaoBAzItMbgBA8gBAPgBAZgCAKACAJgDAIgGAZIHAKAHqgE&sclient=gws-wiz-serp
Expected behaviour
Translations should be crawled by googlebot having already been translated rather than have the JS placeholder variables be pulled in.