SEO meta tags are showing in page source but cannot preview them

Question

In my Next.js app I'm trying to insert og meta tags with dynamic content on a product page. So the content of the meta tags will change based on the product data fetched from server.

I am fetching product data using getServerSideProps and passing product data to page component as props.

export const getServerSideProps = wrapper.getServerSideProps(
    store => async (context) => {

        const response = await fetch(url, {
            method: 'GET',
        });
        const data = await response.json();

        return {
            props: {
                host: context.req.headers.host,
                product: data.product
            }
        }
    }
)

First Approach

I tried to insert meta tags directly on my product page component within component. Here meta tags even with static conetnt are not showing in page source.

const Product = ({product}) => {
    return (
        product ?
            <>
                
                    {product.title}
                    
                    
                    
                    
                    
                    
                
                
             : null
    );
};

Second Approach

return (
    
        
            {/**/}

            {/*your keyword rich title of the website and/or webpage*/}
            
            
            
            
            
            
        
    
);

I tried inserting meta tags within in _document.js file. Here I am passing only static conetnt as I don't have dynamic data in _document.js. This time meta tags are showing up in page source and I can also preview them on facebook.

Third Approach

Then I try to insert those tag in _app.js file as I receive pageProps in this component. Unfortunately when I pass dynamic content in meta tags like first approach, they do not show up in page source but they do when I pass static conetnt similar to second approach.

full _app.js code gist

UPDATE

As regard to my third approach, I checked once again and surprisingly I can see all meta tags in page source when inserted either with static or dynamic content in _app.js. I can preview the url when content is static but when content is dynamic I can not preview the url using either Facebook debug or Open graph

My Next.js version is 12.2.0

user_6995752 · Answer

It's possible that the code you have in your _app.js is blocking the meta tags from being rendered. The "View page source" in browsers will not wait for client code to finish rendering. You can verify this and click "View page source" from your browser. Do you see any of the HTML you are expecting, for example do you see your meta tags and product html?

I expect that you probably don't see anything except some static HTML tags. One thing you could try is moving your use of hooks and rendering logic down into its own MainLayout component.

You can then try your first approach where you do something like this:

const Product = ({product}) => {
    return (
        product ?
            <>
                
                    {product.title}
                    
                    
                    
                    
                    
                    
                
                
                    
                
             : null
    );
};

Where MainLayout contains all the logic you have in your _app.js. This should keep your actual _app.js free of any client side code that is blocking the meta tags from rendering.

Basically we want to utitlize Next.js static optimization and have it pre-render the meta tags for your page so that the browser and web crawlers get the data without having to wait for any client side rendering.

user_3746875 · Answer

Hopefully this helps someone, but my issue was the placement of the tags within _app.js. For some reason, when it was nested under the meta tags would not render, moving it outside of this gave me victory.

Broken

    

  
  
            
            {openGraphData.map((og) => (
                                
            ))}

            {pageProps.title}

Fixed


        
            
            
            
            {openGraphData.map((og) => (
                                
            ))}

            {pageProps.title}

SEO meta tags are showing in page source but cannot preview them

2 Answers