Una imagen incorrecta de og:image está apareciendo en los metadatos de la página.
En mi página [id].tsx tengo la siguiente estructura de etiquetas meta.
{imageUrl && }
Sin embargo, en mi servidor de producción, cuando extraigo un artículo utilizando el depurador de Facebook, obtengo el siguiente error.
Pero cuando busco un artículo en mi servidor de desarrollo, la imagen adecuada se muestra a pesar de que el código es el mismo que en producción.
También tengo la siguiente línea en mi archivo _app.tsx que creo que puede estar causando el error, pero no estoy seguro.
Y lo más extraño es que si comparto enlaces de artículos de producción en Kakao, la imagen en miniatura se muestra correctamente, pero en Facebook y LinkedIn, la imagen en miniatura no aparece correctamente.
¿Alguien sabe por qué mis etiquetas meta se extraen de manera diferente en mis servidores de producción y desarrollo cuando el código aplicado es exactamente el mismo?
Cómo se genera mi imageUrl
Obtengo datos de archive de una API externa (strapi) utilizando useSWR
const { data: archive, error } = useSWR('/archives/' + router.query.id, (url) => {
return axios.get(url).then(res => res.data)
}, {
initialData: props.data
})
Luego obtengo mis images de los archives y si existen images, obtengo mi imageUrl
const images = archive.images
let imageUrl = ''
if (images && images.length > 0) {
imageUrl = getCloundFrontUrl(images[0].url)
}
Luego utilizo la función getCloundFrontUrl para reemplazar la url con mi CDN
export const getCloundFrontUrl = (url) => {
return url ? url.replace('poomgo-homepage.s3.ap-northeast-2.amazonaws.com', 'cdn-hp.poomgo.com') : ''
}
A continuación se muestra la estructura de mis datos.
davy.ai
Solución de problemas de raspado de etiquetas meta en el servidor de producción
Descripción del problema
Un experto en TI especializado en ReactJS, Next.js, SEO y Facebook-Opengraph está experimentando un problema con el raspado de etiquetas meta en su servidor de producción. La página
[id].tsxdel experto tiene una estructura específica de etiquetas meta para compartir artículos en plataformas de redes sociales como Facebook y LinkedIn. Las etiquetas meta funcionan perfectamente bien en su servidor de desarrollo, pero cuando el experto intenta hacer raspado de un artículo en su servidor de producción, las etiquetas meta no funcionan y obtiene un mensaje de error.Análisis del problema
El experto sospecha que el problema podría estar en una línea de código específica de su archivo
_app.tsx, que define la URL canónica del sitio web. Además, aunque las etiquetas meta no funcionan en Facebook y LinkedIn, parecen funcionar bien en Kakao.Solución
Tras examinar cuidadosamente el código, el experto notó que el problema podría estar relacionado con la forma en que se genera la URL de la imagen en miniatura. La variable
imageUrlse genera utilizando la funcióngetCloundFrontUrl, que reemplaza la URL por un CDN si existe. La función reemplazapoomgo-homepage.s3.ap-northeast-2.amazonaws.comconcdn-hp.poomgo.com. Sin embargo, este reemplazo no funciona en el servidor de producción y la URL permanece sin cambios.Para resolver este problema, el experto debe investigar por qué la función
getCloundFrontUrlno está funcionando como se esperaba. Puede comenzar agregando registros de la consola a la función y ver si los registros se muestran en el servidor de producción. Si no es así, el experto debe investigar más para ver por qué la función no se está llamando.Si la función se está llamando, el experto debe verificar si la URL se está reemplazando correctamente. Puede hacer esto agregando más registros de la consola a la función para mostrar la URL antes y después del reemplazo.
Una vez que el experto haya encontrado el problema con
getCloundFrontUrl, puede solucionarlo y volver a implementar el código en el servidor de producción. Después de eso, deberá probar el código nuevamente para asegurarse de que las etiquetas meta se estén raspando correctamente.Conclusión
El problema de raspado de etiquetas meta en el servidor de producción estaba relacionado con la función
getCloundFrontUrl, que no estaba reemplazando la URL por un CDN como se esperaba. Al investigar y solucionar el problema, el experto pudo resolver el problema y garantizar que las etiquetas meta funcionen correctamente en plataformas de redes sociales.