you can click the 3 dots and click on "never translate ..." @Asiatic Lion

but not all the users will do this @B33fb0n3

the translation seems like a browser behavior. So your page can't change it. The thing that you already done is to set the language your page is based of inside the language part of your html. Then google can better understand your page

but even if i give lang={locale} it stills prompts the pop up which is annoying

the translation seems like a browser behavior.

Only the client can change it

and my website is focused mainly on arabic langugae if they press translate with google the fonts are really ugly and user dont like it that was the reason we disabled it in our previous

the language files (your translations) should only deliver data. So the user can have any language and he won't use the translation from google

there is a button to cahnge language in my website

yes

but my users are dumb like me they dont see the button first they will change on the google pop up and the whole layout of page is messed up

cause arabic needs rtl if they choose from popup it change the direction

and you tried that? https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate

i added translation="no" in every html tag i have in the app but still the stupid pops up

and also added this one?

<meta name="google" content="notranslate" />

and this class to your html?
class="notranslate"

i added the meta but not class

let me try with class as well

weell something like this

?

are you using the app dir?

yes @B33fb0n3

mf className also doesnt seem to be working

then you can't use the Head Tag. You need to apply the meta with the static meta method. You can read about it here: https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata

Ill will try after lunch

@B33fb0n3 there is no way we can add this metadata in the import type { Metadata } from "next";

there should be anohter way to do this

Oooooo thanks