0

I've been wondering if there is a way of getting the metadata for a page (not a blog post) using yoast seo in headless WordPress with wpgraphql and next.js. When I say page I mean like the Home page, About, Contact...

Right now I have created the pages on WordPress so I can change the meta description easier if I need to, but all the frontend is made with Next.js. I have successfully gotten the meta description for the posts on a blog section but haven't figured out how to do the same with the main pages.

Currently, I have all the description, title, etc. manually on the code but I need to get it dynamically. Here's how I get it on the blog posts, using a template on a [blog].jsx file:

export default function BlogDetails({ post }) {
  const fullHead = parse(post.seo.fullHead);
  const router = useRouter();
  const blogId = router.query.blogId;

  return (
    <>
      <Head>
        {fullHead}
        <link rel="icon" href="/favicon.svg" />
      </Head>
      <NextSeo
        title={`Blog - ${post.title}`}
        description={post.metaDescription}
        openGraph={{
          url: `https://url.com/blog/${blogId}`,
          title: `Blog - ${blogId}`,
          description: post.metaDescription,
          images: [
            {
              url: "https://x.image",
              width: 800,
              height: 600,
              alt: "x Logo",
            },
          ],
          site_name: "xx",
        }}
      />
      <Layout>
      (...)
      </Layout>
    </>
  );
}
export async function getStaticProps({ params }) {
  const GET_POST = gql`
    query PostBySlug($slug: ID!) {
      post(id: $slug, idType: SLUG) {
        title
        content
        date
        seo {
          metaDesc
          fullHead
          title
        }
      }
    }
  `;

  const response = await client.query({
    query: GET_POST,
    variables: {
      slug: params.blogId,
    },
  });
  const post = response?.data?.post;

  return {
    props: {
      post,
    },
  };
}

export async function getStaticPaths() {
  const paths = [];
  return {
    paths,
    fallback: "blocking",
  };
}

I need something like that for the main pages, on wpgraphql I try with this query to get the info given the slug/URI but I don't think it's right:

query PageByURI($id: ID!) {
  page(id: $id, idType: URI) {
    seo {
      metaDesc
      title
      canonical
    }
  }
}

On Next.js I have try the following:

import { NextSeo } from "next-seo";
import parse from "html-react-parser";
import { client } from "../lib/apollo";
import { gql } from "@apollo/client";

export default function Home({ page }) {
  const router = useRouter();

  const pageId = router.query.pageId;

  console.log(pageId);

  const fullHead = parse(page.seo.fullHead);

  return (
    <>
      <Head>
       
        <link rel="icon" href="/favicon.svg" />
        {fullHead}
      </Head>
      <NextSeo
        title="Home"
        description="x x"
        openGraph={{
          url: "https://url.com/",
          title: "Home",
          description: "x x",
          images: [
            {
              url: "https://url.com/images/logo.svg",
              width: 800,
              height: 600,
              alt: "x x Logo",
            },
          ],
          site_name: "x x",
        }}
      />
      <Layout>
       (...)
      </Layout>
    </>
  );
}

export async function getStaticProps({ params }) {
  console.log(params);
  const GET_POST = gql`
    query PageByURI($id: ID!) {
      page(id: $id, idType: URI) {
        seo {
          metaDesc
          title
          canonical
        }
      }
    }
  `;

  const response = await client.query({
    query: GET_POST,
    variables: {
      id: "contact",
    },
  });
  const post = response?.data?.post;

  return {
    props: {
      post,
    },
  };
}

But it doesn't work. Any help would be appreciated!

Laicus
  • 1
  • 2

0 Answers0