ReactのWEB画面で「日本語に翻訳しますか？」のポップアップの表示を消したい

実現したいこと

ReactのWEB画面で「日本語に翻訳しますか？」のポップアップの表示を消したいです。

発生している問題・分からないこと

Reactのjsでソースコードを書いています。
Reactでの翻訳ポップアップの消し方、またどこにそれを記載すればいいのかを教えて頂きたいです。

該当のソースコード

Fetch.js
1import { useNavigate } from "react-router-dom";
2import './Fetch.css';
3
4function Fetch() {
5    const link = useNavigate();
6    let title = あああ;
7
8    return (
9        <dev className='Fetch'>
10            <h1>{title}</h1>
11        </dev> 
12    );
13}
14
15export default Fetch;

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

htmlの場合下記のように言語を設定すれば、ポップアップが消えるとありましたが、

<html lang="ja"> ←言語を指定してあげる Reactで試したところ、なにも変わりませんでした。。。

補足

特になし

行動規範の内容に同意します

回答3件

ベストアンサー

create-react-app や create-vite-app で始めたプロジェクトであれば、index.html のような html ファイルを編集する必要があります。そこに html タグがあるはずです。

next.js (pages router) であれば、 _document.jsx、 next.js (app router) ならルートの layout.jsx のように、React を使用するフレームワークで開発しているなら、そのフレームワーク特有の方法で html タグをカスタマイズする必要があります。

投稿2024/02/22 13:56

honey32

総合スコア246

ppp_jpp

2024/02/29 04:59

分かりやすくありがとうございます！無事解決致しました。回答ありがとうございました。

honey32

2024/02/29 12:15

良かったです！

行動規範の内容に同意します

外側の<html>にlang="ja"を指定してはどうでしょうか？

投稿2024/02/20 11:07

maisumakun

総合スコア146596

【Google がサポートしているメタタグと属性 | Google 検索セントラル | ドキュメント | Google for Developers】
https://developers.google.com/search/docs/crawling-indexing/special-tags?hl=ja#notranslate

HTML
1<meta name="googlebot" content="notranslate">

ページのコンテンツの言語がユーザーの使用言語でない可能性が高いと Google によって認識されると、検索結果には翻訳されたタイトルリンクとスニペットが表示される場合があります。ユーザーが翻訳されたタイトルリンクをクリックすると、それ以降、そのページに対するユーザー操作はすべて Google 翻訳を介して行われ、リンク先を表示する際も自動的に翻訳されます。これにより、ご自分のコンテンツをより多くのユーザーに提供することができますが、状況によっては望ましくない場合もあります。この meta タグを使用すると、ページの翻訳版を提供しないよう Google に指示できます。

投稿2024/02/20 05:04

kei344

総合スコア69625

ppp_jpp

2024/02/20 06:03

回答ありがとうございます。質問失礼致します。 import { useNavigate } from "react-router-dom"; import './Fetch.css'; function Fetch() { const link = useNavigate(); let title = あああ; return ( <dev className='Fetch'> <meta name="googlebot" content="notranslate"></meta> <h1>{title}</h1> </dev> ); } export default Fetch; ↑上記のように記載してみましたが、ポップアップが出てしまいました。書く場所がいけないのでしょうか？また、この記述を書く前にやるべきこととかってありますか？

kei344

2024/02/20 16:41

head要素内に入れる必要があると思います。

行動規範の内容に同意します

あなたの回答