I recently implemented dynamic meta tags for a specific page within my next.js application.
import CoinTossPage from '@/views/CoinTossPage';
import React, { useEffect, useState } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import axios from 'axios';
function CoinTossComponent() {
const router = useRouter();
const { id } = router.query;
const [poolData, setPoolData] = useState(null);
useEffect(() => {
if (id) {
fetchPoolData();
}
}, [id]);
// fetch pool data from API using pool id
const fetchPoolData = async () => {
try {
let config = {
method: 'get',
url: `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/gambling/coin-flip/pool/${id}`,
headers: {
Authorization: `Bearer ${process.env.NEXT_PUBLIC_API_KEY}`,
},
};
const response = await axios(config);
if (response.status === 200) {
const payload = response.data.payload;
if (payload) {
setPoolData(payload);
} else {
setPoolData(null);
}
}
} catch (error) {
console.log('ERROR while fetching active pools from API ', error);
}
};
return (
<>
<Head>
<meta property="og:title" content={poolData?.tokenSymbol} />
<meta property="og:image" content={poolData?.imageUrl} />
</Head>
<CoinTossPage />
</>
);
}
export default CoinTossComponent;Upon inspection, the dynamic content appears properly in the meta tags. However, when sharing the page link, the image is not displaying as expected.
https://i.sstatic.net/O1v3U.png
This issue has left me puzzled. Any idea what might be causing this?
To troubleshoot, I referred to the documentation at https://nextjs.org/learn/seo/rendering-and-ranking/metadata and followed the instructions provided there.