react-helmet を使用して、React アプリケーションの各ページに一意のタイトルと説明を付けています。タイトルはブラウザ タブで正しくレンダリングされ、Dev Tools を使用してページを検査するとタイトルと説明が正しくレンダリングされます。ただし、Google の検索結果にはタイトルも説明も表示されません。何が間違っているのでしょうか?
私は prerender.io の使用を検討しましたが、私のサイトにはバックエンドがないので (現時点ではマーケティング サイトのみ)、それが良い解決策であるかどうかはわかりません。いくつかの要素を削除しましたが、基本的に私のコードはこのようになっています...
import React, {Component} from 'react';
import {Helmet} from "react-helmet";
class Home extends Component {
render() {
return (
<div>
<Helmet>
<title> My title </title>
<meta name="description" content="My description"/>
</Helmet>
</div>
)
}
}
export default Home;
ベストアンサー1
私はクライアント側でレンダリングされたReactアプリケーションをホストし、react-helmet 5.2.1
管理するために使用していますog
タグおよびその他の共有関連のヘッダー。Facebook (および他の Web サイト) で、共有関連のヘッダーが認識されないという、前述の問題が発生していました。
私のReactウェブサイトは以下を使用してホストされていますネットリファイ修正方法は、Netlifyの事前レンダリング設定を有効にすることでした。事前レンダリングを有効にすると、共有関連のヘッダーがすぐに認識されました。クライアント側でレンダリングされたヘッダーは認識されないようです(詳細については、質問です)。
ところで、私はデバッガーの共有Facebook が提供する、共有関連のヘッダーに関する問題をデバッグするときに非常に役立つ機能です。