Googleに正しくメタタグを読み込ませたい

Question

上記の通りメタディスクリプションが期待値とは異なる表示のされ方をする為困っています。

import React from 'react'
import MetaTags from 'react-meta-tags'
import styles from '../../../stylesheets/application.scss'

export default class Prefecture extends React.Component {
    componentDidMount() {
        const { pathname } = location
        this.props.getPrefectureShops(1)
    }
    render() {
        const classes = `${styles.contents} container`
        const { prefecture } = this.props
        let title_tag = `XXX - ${prefecture.name}`
        let meta_tag = `${prefecture.name ? prefecture.name : ''}のお店`
        return (
            <div className={classes}>
                <MetaTags>
                    <title>{title_tag}</title>
                    <meta name="description" content={meta_tag} />
                </MetaTags>
　　　　　　(以下略)

例えば、this.props.prefecureで神奈川県を取得した際に
meta discriptionの期待値として

タイトルタグ: XXX-神奈川県
メタディスクリプション: 神奈川県のお店

実際のgoogle検索した際に表示されるものは

タイトルタグ: XXX-
メタディスクリプション: のお店

と変数部分がうまくgoogleにクローリングされずに困っています。(実際のサイトでソースコードを表示した際には、propの中身が読み込まれ期待値どうりの挙動をします。)

使用ライブラリ
s-yadav/react-meta-tags

Answer 1

ServerSideRenderingをしていないのではないでしょうか？
google の検索bot向けには メタタグのみを返すようにする方法もあるので、
そちらを検討してみると良いかもしれません。

参考
Riot.jsでSPAにしたらGoogleにインデックスされなくなったので、FirebaseのFunctionsでmetaタグだけレンダリングした話
https://blog.notsobad.jp/entry/2018/04/03/235004