diff --git a/wp-content/themes/headless/app/composables/useNodeSeo.gql b/wp-content/themes/headless/app/composables/useNodeSeo.gql new file mode 100644 index 0000000..899eaae --- /dev/null +++ b/wp-content/themes/headless/app/composables/useNodeSeo.gql @@ -0,0 +1,13 @@ +fragment NodeSeo on RankMathSeo { + title + description + robots + canonicalUrl + openGraph { + title + description + image { + url + } + } +} diff --git a/wp-content/themes/headless/app/composables/useNodeSeo.ts b/wp-content/themes/headless/app/composables/useNodeSeo.ts new file mode 100644 index 0000000..a990f26 --- /dev/null +++ b/wp-content/themes/headless/app/composables/useNodeSeo.ts @@ -0,0 +1,14 @@ +import type { NodeSeoFragment } from "#graphql/types"; + +export function useNodeSeo(seo: NodeSeoFragment) { + const { title, description, robots, canonicalUrl, openGraph } = seo; + useSeoMeta({ + title, + description, + robots: robots?.join(","), + ogTitle: openGraph?.title, + ogDescription: openGraph?.description, + ogImage: openGraph?.image?.url, + ogUrl: canonicalUrl, + }); +} diff --git a/wp-content/themes/headless/app/pages/[...uri].gql b/wp-content/themes/headless/app/pages/[...uri].gql index 5327de0..8e6cb3d 100644 --- a/wp-content/themes/headless/app/pages/[...uri].gql +++ b/wp-content/themes/headless/app/pages/[...uri].gql @@ -4,5 +4,10 @@ query NodeByUri($uri: String!) { ... on Page { ...NodePage } + ... on NodeWithRankMathSeo { + seo @nonNull { + ...NodeSeo + } + } } } diff --git a/wp-content/themes/headless/app/pages/[...uri].vue b/wp-content/themes/headless/app/pages/[...uri].vue index e9d8090..083d703 100644 --- a/wp-content/themes/headless/app/pages/[...uri].vue +++ b/wp-content/themes/headless/app/pages/[...uri].vue @@ -28,6 +28,8 @@ if (!useNuxtApp().vueApp.component(componentName)) { fatal: true, }); } + +useNodeSeo(node.value.seo);