私は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;
_
特にあなたが求めているものではありませんが、この質問を見つけるかもしれない他の人や他の問題はサーバー側のレンダリングから恩恵を受けるかもしれません。 React-Helmetの設定を変更しても、Facebookのようなサイトは、JavaScriptを介してレンダリングされたときにタイトルや説明をキャッシュすることはありません。
私は正しく表示されていなかった私の説明タグに問題がありました。代わりにGoogleは検索結果のマイ投稿からいくつかのランダムなテキストを表示しました。それから私はgatsby-plugin-react-helmet
パッケージと一緒にreact-helmet
をインストールしなかったことに気づきました。それで:
npm install gatsby-plugin-react-helmet react-helmet
そしてあなたのgatsby-config.js
ファイルで、プラグインを追加します。それは私の問題を解決しました。