Facebook Open Graph scraping base URL instead of actual URL

Support
,
1

Allright I am facing some issues with my Gatsby page regarding Facebook Meta tags.

My portfolio page has separate Meta tags for each subpage. Facebook is only scraping my main page https://larsejaas.com As of now, anyone sharing my page will get the same meta image and title+description for any sub-page.

I have used Sharing Debugger - Meta for Developers to debug the issue, but I have hit a dead end on this one.On Twitter all subpages are recognized correctly.

If I scrape any subpage: e.g. Lars Ejaas | Grafisk arbejde med illustrationer og webanimationer I get the following redirect path in the facebook sharing debugger:

Redirect Path   
Input URL   https://larsejaas.com/grafik
301 HTTP Redirect   https://larsejaas.com/grafik/
og:url Meta Tag  https://larsejaas.com/

But the OG:URL tag on this page is pointing to Lars Ejaas | Grafisk arbejde med illustrationer og webanimationer ?

Can anybody help me pin-point the issue here?

This is a snippet of the meta headers from https://larsejaas.com/grafik:

    <link rel="alternate" href="https://larsejaas.com/grafik/" hreflang="x-default" data-react-helmet="true">
    <link rel="canonical" href="https://larsejaas.com/grafik" data-react-helmet="true">
    <link rel="alternate" href="https://larsejaas.com/en/grafik/" hreflang="en" data-react-helmet="true">    
    <link rel="alternate" href="https://larsejaas.com/grafik/" hreflang="da" data-react-helmet="true">
    <meta property="og:url" content="https://larsejaas.com/grafik" data-react-helmet="true">
    <meta name="description" content="🎨 Besøg mit portfolio af grafiske illustrationer og animationer som jeg har lavet til brug i web projekter. Vektorgrafik, webanimationer og 3D grafik" data-react-helmet="true">
    <meta name="twitter:title" content="Lars Ejaas | Grafisk arbejde med illustrationer og webanimationer" data-react-helmet="true">
    <meta name="twitter:description" content="🎨 Besøg mit portfolio af grafiske illustrationer og animationer som jeg har lavet til brug i web projekter. Vektorgrafik, webanimationer og 3D grafik" data-react-helmet="true">
    <meta name="twitter:image" content="https://larsejaas.com/SoMe/open_graph_phone.png" data-react-helmet="true">
    <meta name="twitter:data1" content="1 min." data-react-helmet="true">
    <meta property="og:title" content="Lars Ejaas | Grafisk arbejde med illustrationer og webanimationer" data-react-helmet="true">
    <meta property="og:image" content="http://larsejaas.com/SoMe/open_graph_phone.png" data-react-helmet="true">
    <meta property="og:image:secure_url" content="https://larsejaas.com/SoMe/open_graph_phone.png" data-react-helmet="true">
    <meta property="og:description" content="🎨 Besøg mit portfolio af grafiske illustrationer og animationer som jeg har lavet til brug i web projekter. Vektorgrafik, webanimationer og 3D grafik" data-react-helmet="true">
    <meta itemprop="name" content="Lars Ejaas | Grafisk arbejde med illustrationer og webanimationer" data-react-helmet="true">
    <meta itemprop="description" content="🎨 Besøg mit portfolio af grafiske illustrationer og animationer som jeg har lavet til brug i web projekter. Vektorgrafik, webanimationer og 3D grafik" data-react-helmet="true">
    <meta itemprop="image" content="https://larsejaas.com/SoMe/open_graph_phone.png" data-react-helmet="true">
    <meta name="article:published_time" content="2021-02-26T16:46:53.619Z" data-react-helmet="true">
    <meta name="article:modified_time" content="2021-02-26T16:46:53.619Z" data-react-helmet="true">
2

I solved this one myself and learned about prerendering!

For anyone else - Facebook doesn’t recognize your page structure until you enable prerendering under Build & deploy settings for the page.

1 Like