Why isn't my SEO image working?

Technical Questions
, ,
1

Builder content link

Builder public api key
fbf40af7219745d1a115b63d1c3582b3

What are you trying to accomplish
I wan’t link previews to work. If I send this link somewhere (ie. Slack, iMessage), I’d like the link preview image to show.

Screenshots or video link
You can see here the image is set

image
image744×524 43.2 KB

Code stack you are integrating Builder with
NextJS

2

Hi Jake,
Thanks for reaching out!
Hmm, when testing your page out on the Facebook Debugger, it looks like the og:image is being pulled through. How soon after did you test it out? Some times it can take a while to update

3

@nicke920 the debugger says this

Screen Shot 2023-09-18 at 10.15.30 AM
Screen Shot 2023-09-18 at 10.15.30 AM3096×570 64.1 KB

4

you can test the link yourself, it still doesn’t work

5

Hi Jake,
Thanks for reaching back.
It appears that the root of the problem lies in the updated fields of the page model. Specifically, you have the field named “seoimage”, which Builder does not automatically recognize for SEO purposes. To address this, you’ll need to make adjustments in your codebase to ensure that Builder reads SEO fields from “seoimage”.

6

@nicke920 What does that mean? where do you see a field named seoimage? I have nothing in my codebase pertaining to an seoimage. Where would I add that? Can you provide screenshots or documentation? Is there a step by step guide on how to add an seo image from scratch?

7

@jakechambers
You can now access the SEO Image field within your model here under the ‘Fields’ tab.

Page Model fields
Page Model fields821×303 10.5 KB

Now that you have the ‘seo image’ field available, you can integrate it into your code. Below is a sample code snippet that demonstrates how to use it:

// Next.js example with SEO custom fields
import Head from "next/head";
import { builder, BuilderComponent } from "@builder.io/react";

export default class extends React.Component {
  static async getInitialProps({ res, req, asPath }) {
    const page = await builder.get("page", { req, res }).promise();
    return { builderPage: page };
  }

  render() {
    const page = this.props.builderPage;
    return (
      <>
        <Head>
          <title>{page.data.title}</title>
         <meta property=”og:image” content=”{page.data.seoimage}” />
        </Head>
        <BuilderComponent name="page" content={page} />
      </>
    );
  }
}

Additionally, I found this article on various Meta tags for social media that you might find helpful.

1 Like