Add support for schema-metatag module

I had a quick look at the PHP and this is the raw meta export. Nothing is grouped here either:

"test": [
  {
    "title": {
      "#tag": "meta",
      "#attributes": {
        "name": "title",
        "content": "Test | lupus_decoupled"
      }
    },
    "description": {
      "#tag": "meta",
      "#attributes": {
        "name": "description",
        "content": "Lorem Ipsum is simply dummy text of the printing and typesetting im."
      }
    },
    "canonical_url": {
      "#tag": "link",
      "#attributes": {
        "rel": "canonical",
        "href": "http://d10.ddev.site/node/1"
      }
    },
    "schema_organization_type": {
      "#tag": "meta",
      "#attributes": {
        "name": "@type",
        "content": "Organization",
        "group": "schema_organization",
        "schema_metatag": true
      }
    },
    "schema_organization_additional_type": {
      "#tag": "meta",
      "#attributes": {
        "name": "additionalType",
        "content": "CollegeOrUniversity",
        "group": "schema_organization",
        "schema_metatag": true
      }
    },
    "schema_organization_same_as_0": {
      "#tag": "meta",
      "#attributes": {
        "name": "sameAs",
        "content": "sadasd",
        "group": "schema_organization",
        "schema_metatag": true
      }
    },
    "schema_organization_name": {
      "#tag": "meta",
      "#attributes": {
        "name": "name",
        "content": "GG",
        "group": "schema_organization",
        "schema_metatag": true
      }
    },
    "schema_organization_description": {
      "#tag": "meta",
      "#attributes": {
        "name": "description",
        "content": "I am good",
        "group": "schema_organization",
        "schema_metatag": true
      }
    },
    "schema_organization_url": {
      "#tag": "meta",
      "#attributes": {
        "name": "url",
        "content": "google.com",
        "group": "schema_organization",
        "schema_metatag": true
      }
    }
  }
]

That said Nuxt is expecting something as you can see:

script: [
    {
      type: "application/ld+json",
      children: JSON.stringify(page.value.metatags.jsonld || [], null, ""),
    },
  ],

I just added 'organization' and 'article' schema and it seems you could use the $metatag_values['#attributes']['group'] to group?

I'm not sure what you're trying to do. Are you using the "catchall" page code that can be found in the nuxtjs-drupal-ce playground?
By using that, metadata should just work (without changes to the Drupal module):

useHead({
  title: page.value.title,
  meta: page.value.metatags.meta,
  link: page.value.metatags.link,
})

Hey @TurtlBbx yes we are using the supplied code as above. But the problem happens before then as you can see above.

Here is the code we are using:

useHead({
  title: page.value.title,
  meta: page.value.metatags.meta,
  link: page.value.metatags.link,
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify(page.value.metatags.jsonld || [], null, ''),
    },
  ],
})

The issue being application/ld+json is not grouped and is looped as general meta: page.value.metatags.meta, here are the examples:

{
            "name": "@type",
            "content": "Organization",
            "group": "schema_organization",
            "schema_metatag": true
        },
        {
            "name": "additionalType",
            "content": "CollegeOrUniversity",
            "group": "schema_organization",
            "schema_metatag": true
        },
        {
            "name": "sameAs",
            "content": "sadasd",
            "group": "schema_organization",
            "schema_metatag": true
        },
        {
            "name": "name",
            "content": "GG",
            "group": "schema_organization",
            "schema_metatag": true
        },
        {
            "name": "description",
            "content": "I am good",
            "group": "schema_organization",
            "schema_metatag": true
        },
        {
            "name": "url",
            "content": "google.com",
            "group": "schema_organization",
            "schema_metatag": true
        }

The above should be wrapped in the application/ld+json script.

I think the issue is on the module end as it needs to group them so Nuxt can render correctly.

Let me know if you need any further information.

Please try this, if it works:

useHead({
  title: page.value.title,
  meta: page.value.metatags.meta,
  link: page.value.metatags.link,
  script: [
    {
      key: 'ldjson-schema',
      id: 'ldjson-schema',
      type: 'application/ld+json',
      children: JSON.stringify(page.value.metatags.jsonld || []),
    },
  ],
})

Unfortunately still no luck even with your suggestion.

<script id="ldjson-schema" type="application/ld+json" data-hid="1e0f0a2">[]</script>

{ "meta": [ { "name": "title", "content": "Test 3 | lupus_decoupled" }, { "name": "description", "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." }, { "name": "@type", "content": "Article", "group": "schema_article", "schema_metatag": true }, { "name": "@id", "content": "dfdfg", "group": "schema_article", "schema_metatag": true }, { "name": "name", "content": "ertert", "group": "schema_article", "schema_metatag": true }, { "name": "headline", "content": "234234", "group": "schema_article", "schema_metatag": true }, { "name": "about", "content": "werwer", "group": "schema_article", "schema_metatag": true }, { "name": "@type", "content": "Airline", "group": "schema_organization", "schema_metatag": true }, { "name": "additionalType", "content": "HighSchool", "group": "schema_organization", "schema_metatag": true }, { "name": "sameAs", "content": "sadasd", "group": "schema_organization", "schema_metatag": true }, { "name": "name", "content": "GG", "group": "schema_organization", "schema_metatag": true }, { "name": "description", "content": "I am good", "group": "schema_organization", "schema_metatag": true }, { "name": "url", "content": "google.com", "group": "schema_organization", "schema_metatag": true } ], "link": [ { "rel": "canonical", "href": "http://127.0.0.1:63609/test-3" } ] }

Any further ideas on this front?

Sry for being late to the party here.

The API output posted seems wrong, so I think there might be some incompatibility with recent module updates.
We have this working correctly, e.g. see our website https://drunomics.com/ and the API output https://cp.drunomics.com/api/drunomics-com/

The JSON-LD shoudl be in its own section:

{

      "title": "drunomics | Professionelle Drupal Entwicklung aus Österreich",
      "messages": [ ],
      "breadcrumbs": [ ],
      "metatags": {
            "meta": [
             ...
            ],
            "link": [
...
            ],
            "jsonld": {
                  "@context": "https://schema.org",
                  "@graph": [
                        {
                              "headline": "drunomics | Professionelle Drupal Entwicklung aus Österreich",
                              "name": "drunomics | Professionelle Drupal Entwicklung aus Österreich",
                              "description": "Wir entwickeln hochqualitative und innovative Web Projekte mit dem Content Management System Drupal."
                        },
                        {
                              "@type": "WebPage",
                              "@id": "https://drunomics.com/",
                              "headline": "drunomics | Professionelle Drupal Entwicklung aus Österreich",
                              "breadcrumb": [ ],
                              "description": "Wir entwickeln hochqualitative und innovative Web Projekte mit dem Content Management System Drupal.",
                              "name": "drunomics | Professionelle Drupal Entwicklung aus Österreich",
                              "url": "https://drunomics.com/",
                              "datePublished": "2023-03-26T08:49:16+0200",
                              "image": {
                                    "@type": "ImageObject",
                                    "representativeOfPage": "True",
                                    "url": "https://cp.drunomics.com/files/styles/facebook/public/2023-07/drunomics_logo_final.png?itok=claacc7z",
                                    "width": "1200",
                                    "height": "630"
                              }
                        }
                  ]
            }

so it's working with those versions
"drupal/schema_metatag": "2.5.0",
"drupal/metatag": "^1.26.0",

Meanwhile there is https://www.drupal.org/project/schema_metatag → v3, so I'd assume that using that major version breaks things. So we should add compatibility with that.

Could you confirm you are on version3?

Thanks so much for getting back to me. Sadly I have the same module setup as you. I am also fully using the ddev setup to make sure I have not missed anything.

    "require": {
        "composer/installers": "^1.9",
        "drupal/admin_toolbar": "^3.4",
        "drupal/core-composer-scaffold": "^10",
        "drupal/core-project-message": "^10",
        "drupal/core-recommended": "^10",
        "drupal/devel": "^5.1",
        "drupal/lupus_decoupled": "1.x-dev",
        "drupal/services_env_parameter": "^1.3",
        "drush/drush": "^11",
        "drupal/schema_metatag": "2.5.0",
        "drupal/metatag": "^1.26.0"
    },

I have also added the following:

Schema.org Article
Schema.org Metatag
Schema.org Organization

We are running Drupal 10.1.5

I have also attached some screenshots.

ok, I figured the reason is rather simple. We simply forgot to put the integration code into lupus-decoupled... sry!
I'm going to add it now.

To test, the following commands are needed:

ddev composer require drupal/schema_metatag
ddev drush en lupus_decoupled_schema_metatag schema_article schema_web_page -y
// Enable schema_* modules as needed.

This automatically installes schema_metatag v2.5, I guess do to the version of metatag in the codebase. For the time being, that's a good first step, let's test / make compatibility for v3 work as a next step (follow-up issue)

Then one needs to make sure to have a recent page-component, it seems the one in the demo is outdated and missing metatags integration.
I tested it with https://github.com/drunomics/nuxtjs-drupal-ce/blob/2.x/playground/pages/... and it works then.

-> thus, let's merge this and make follow-ups for
* updating the nuxt-demo with latest playground
* add support for schema-metatag v3

Fantastic news, thanks for the update. I will test and get back to you with the outcome!

Automatically closed - issue fixed for 2 weeks with no activity.