LinkedIn Post Inspector fails to detect Open Graph metadata using Next.js 15.2.0 #76746
Comments
|
Hi, The problem is in your ThemeProvider, it does: export default function ThemeProvider({ children }: Readonly<ThemeProviderProps>) {
const theme = useAppSelector(state => state.theme.theme);
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
document.body.className = theme;
}, [theme]);
if (!isClient) {
return <Loading />;
}
return <>{children}</>;
}Which means, that when bots and such, hit your page, they see the |
|
Hi, I removed the How can I fix this issue without affecting Open Graph metadata? Here is the updated code: import { ReactNode, useEffect } from 'react';
import { useAppSelector } from '@/config/store';
type ThemeProviderProps = {
children: ReactNode;
};
export default function ThemeProvider({ children }: Readonly<ThemeProviderProps>) {
const theme = useAppSelector(state => state.theme.theme);
useEffect(() => {
document.body.className = theme;
}, [theme]);
return <>{children}</>;
} |
|
This is another issue entirely now. What HTML element is having the issue? It should be visible in the error overlay? |
|
The hydration issue is likely occurring on the Console Error Log:Current ThemeProvider Code:import { ReactNode, useEffect } from 'react';
import { useAppSelector } from '@/config/store';
type ThemeProviderProps = {
children: ReactNode;
};
export default function ThemeProvider({ children }: Readonly<ThemeProviderProps>) {
const theme = useAppSelector(state => state.theme.theme);
useEffect(() => {
document.body.className = theme;
}, [theme]);
return <>{children}</>;
}Problem Analysis:
Question:I added the ThemeProvider Code: [ThemeProvider.tsx] |
|
Doing the change within useEffect is the correct way. Hydration errors are found/triggered before the effects are run. The I'll take a look at your source code, but the error overlay usually points at the problematic node. Many things can trigger hydration errors. |
|
I have bad news, somewhat... the hydration error, is happening because of I see in the server side logs: Could not find icon { prefix: 'fas', iconName: 'clock' }
Could not find icon { prefix: 'fas', iconName: 'calendar-alt' }
Could not find icon { prefix: 'fas', iconName: 'clock' }I am not sure how to fix that for |
|
Thanks for the clarification! I’ll review the FontAwesome solutions and see which works best for my case. |
Link to the code that reproduces this issue
https://github.com/susimsek/blog
To Reproduce
git clone https://github.com/susimsek/blog.git cd bloghttps://suaybsimsek.com/en/posts/spring-boot-eureka-server) into LinkedIn Post Inspector.Code for the post page can be found here: Post Page Code. Open Graph meta tags are defined inside the
<Head>component in this file.To check the meta tags locally, visit: http://localhost:3000/en/posts/spring-boot-eureka-server after running the application.
Current vs. Expected behavior
title,description,og:image, etc.).<meta>tags defined in<Head>and display the correct preview (title, description, image) when sharing the link.Provide environment information
Which area(s) are affected? (Select all that apply)
Metadata
Which stage(s) are affected? (Select all that apply)
Other (Deployed), next dev (local), next build (local)
Additional context
The issue occurs in a dynamic Next.js route (
pages/[locale]/posts/[id].tsx). The metadata is correctly set inside the<Head>component, but LinkedIn Post Inspector fails to recognize it.Code for the post page can be found here: Post Page Code
The application is hosted on GitHub Pages and deployed using static export (
next export).Code Block
The text was updated successfully, but these errors were encountered: