OGPを実装したい

OGPを有効化するなら本番サーバーはNetlifyで

結論、本番サーバーがNetlifyであれば、Netlifyでの設定を行うだけでコード上の設定等は不要です。

というのもjQueryでmeta周りの設定を動的に書き換えていて、Googleの検索エンジンであればURLを読み込むときにJavaScriptを実行するので、書き換えられたほうの内容で読み込んでくれるのですが、OGPを表示してほしいSNSなどはどうやらJavaScriptを実行してくれないらしいのです。

そのためjQueryでOGPを書き換えても正しい情報を表示してくれないとかなんとか・・・（ハマりました・・）

他のサーバはわからないのですが、NetlifyであればNetlifyでの設定で解決できることがわかったのでその内容を紹介したいと思います。

Prerenderingを有効にする

この設定を行うには、一度Netlifyでプロジェクトを公開している必要があります。

Netlifyにアクセスしたら「Site configuration > Build & deploy > Prerendering」と進みます。

Configureから「Enable prerendering with Netlify」にチェックを入れて保存するだけです。

OGP自体はすでに実装されているので、microCMSのサイト設定のメタ情報を更新するだけでOKです。
お知らせやコラムなどの投稿ページは見出しを拾って自動的に書き換えるので、特にHTMLで何かタグを挿入することもありません。

その他のサーバーでのOGP実装

VercelであればNetlifyと似たような機能があるかもしれません。調べてみてください。
その他となると、jQueryでの実装は諦めて直接HTMLに書き込む感じになるのではと思っています。。