NextJs dynamic open graph meta tags not rendering for facebook debugger

Question

I have tried to include meta tags using base "Head" feature of NextJs, react-helmet and next-seo packages.They all works fine on client side and show meta tags in inspect tool. But When I try to detect it using facebook debugger tool or any other open graph tags detector, it does not work.

May be something to do with server side rendering of meta tags but I have not found enough material to implement server side meta tags in NextJs framework.

Answer 1

Are you using Redux Persist?

Since there is a known issue with Redux Persist which disables SSR. Disabling PersistGate server-side seems to fix the issue. Github Issue Link

return process.browser ? (
        <PersistGate persistor={store.__persistor} loading={<div>Loading</div>}>
            <ToastProvider>
                <Component {...pageProps} />
            </ToastProvider>
        </PersistGate>
    ) : (
            <Provider store={store}>
                <ToastProvider>
                    <Component {...pageProps} />
                </ToastProvider>
            </Provider>
        );