Open Graph uses image url from WordPress installation

[TurboTobiasDK]

using WPGraphQL SEO plugin on my WordPress installation and have setup opengraph in Yoast.

However, open graph seems to be using sourceUrl as schema which results in URL from headless WordPress is being outputted instead of localFile. Is it possible to change?

Screenshot of issue: https://p221.p4.n0.cdn.getcloudapp.com/items/bLukQOjK/2233e2a6-2238-45c9-b76b-b541d8eceac1.png?v=af027efcf9df37008bd6593cd37b26d5

I have just copy/pasted the schema found in the documentation for gatsby-plugin-wpgraphql-seo

[ashhitch]

Hi @TurboTobiasDK have you tried the latest version 1.2.1? There was an issue publishing to NPM but it's there now. If you are using the latest version of the Gatsby image plugin you will need this version.

[TurboTobiasDK]

Hi @ashhitch. I've updated everything and using gatsby-plugin-image v1.6.0 and gatsby-plugin-wpgraphql-seo v1.2.2 but the issue doesn't seem to be solved :(

[ashhitch]

@TurboTobiasDK could you paste in an example page GraphQL query you are using in Gatsby?

[TurboTobiasDK]

@ashhitch here query used in my createPage template file:

export const query = graphql query PageById($id: String) { wpPage(id: { eq: $id }) { __typename id uri title schemaMarkup { schemarepeater { schemajson } } seo { title metaDesc focuskw metaKeywords metaRobotsNoindex metaRobotsNofollow opengraphTitle opengraphDescription opengraphImage { altText sourceUrl srcSet } twitterTitle twitterDescription twitterImage { altText sourceUrl srcSet } canonical cornerstone schema { articleType pageType raw } } ACFundersider { whiteSection bottomSection herohead { bulletlist { bullettext } heroHeading heroText } eksperten { eksperttxt ekstpertimg { altText localFile { childImageSharp { gatsbyImageData( placeholder: BLURRED formats: [AUTO, WEBP, AVIF] height: 480 ) } } } } } } } ``

[ashhitch]

Anywhere like this need to query Gatsby image

opengraphImage {
altText
sourceUrl
srcSet
}

gatsbyImageData( placeholder: BLURRED formats: [AUTO, WEBP, AVIF] height: 480 )

it falls back to the sourceUrl if its not provided

[TurboTobiasDK]

Thank you @ashhitch! The query below solved issue:

opengraphImage {
        altText
        sourceUrl
        srcSet
        localFile {
          childImageSharp {
            gatsbyImageData(
              placeholder: BLURRED
              formats: [AUTO, WEBP, AVIF]
            )
          }
        }
      }

[snibbo71]

Heya Tmeister, That probably fixes it for individual opengraph images, such that you can manually create the headers necessary for twitter:image and such - but I actually use the schema->raw to print out all the SEO data, including breadcrumbs (which are also broken).

However, it's actually gatsby-source-wordpress that rewrites these so I had to modify the Yoast GraphQL plugin on the WordPress installation rather than the Gatsby side.