search

nystudio107 / craft-seomatic

SEOmatic facilitates modern SEO best practices & implementation for Craft CMS 3. It is a turnkey SEO system that is comprehensive, powerful, and flexible.
https://nystudio107.com/plugins/seomatic
Other
162 stars 68 forks source link

metaLinkContainer interfering with proper display of meta description, keywords, and generator #1402

Closed andrewarasaki closed 5 months ago

andrewarasaki commented 5 months ago

Describe the bug

We are using Next.js with Craft in headless mode via the Headless SPA API. 

import React from 'react'
import Head from 'next/head'
import parse from 'html-react-parser'
import SEOInterface from './seo.interface'

const SEO = ({ seomatic }: { seomatic: SEOInterface }) => (
  <Head>
    {parse(seomatic?.metaTitleContainer ? seomatic?.metaTitleContainer : '')}
    {parse(seomatic?.metaJsonLdContainer ? seomatic?.metaJsonLdContainer : '')}
    {parse(seomatic?.metaTagContainer ? seomatic?.metaTagContainer : '')}
    {parse(seomatic?.metaLinkContainer ? seomatic?.metaLinkContainer : '')}
    <link rel="icon" href="/favicon.ico" />
  </Head>
)

export default SEO

The metaLinkContainer seems to be causing interference with the proper display of meta information, specifically with the meta description, keywords, and generator. When metaLinkContainer is added to the head, all of the generated tags disappear.

The following is our GraphQL query for posterity, however logging it to the console logs all of the tags properly, so we can confirm the data is pulling through:

const SEOQuery = `
  query SEOMeta($id: String) {
    SeoMeta(page_id: $id) {
      description
      og_description
      og_locale
      og_site_name
      og_type
      og_title
      og_url
      rel_author
      rel_canonical
      rel_home
      rel_next_
      rel_prev
      title
      twitter_card
      twitter_description
      twitter_site
      twitter_title
    }
    seomatic {
      ... on SeomaticType {
        metaTitleContainer
        metaTagContainer
        metaSiteVarsContainer
        metaScriptContainer
        metaLinkContainer
        metaJsonLdContainer
      }
    }
  }
`
export default SEOQuery

Expected behaviour

We expect the metaLinkContainer to be added to the head in addition to the other meta tags.

Versions

khalwat commented 5 months ago

So this isn't a bug, and it isn't really an SEOmatic issue either.

This is really a React question, and specifically how you're using the data provided by SEOmatic to then render tags in your head.

You can either request the raw HTML tags from SEOmatic and then render thos (which is what you appear to be doing), or you can requested the data from SEOmatic as a config array, and pass that to whatever package you're using for SEO metadata in React.

I'm not super familiar with what you're doing, but it seems strange to me that tags would overwrite other tags, it should just be raw HTML you're rendering.

But again, none of this really has to do with SEOmatic itself, so closing the issue.