Hoe voeg je metatags toe aan je headless Drupal-project?

Blog

Gepost op

2/03/2023

Auteur

Niels Aers

Technical Coach

We zijn onze Next.js-gebaseerde starterkit aan het bouwen voor Rocketship. Aangezien we streven naar volledige functionaliteit, is een van de belangrijke maar vaak over het hoofd geziene functies de volledige ondersteuning voor metadata. In deze blogpost laten we je zien hoe je je metatags aan de praat krijgt in je Next.js-applicatie.

Zoals je misschien weet, ondersteunt ons Rocketship-installatieprofiel metatags direct uit de doos. Dit omvat gemeenschappelijke metatags zoals titel en beschrijving, maar ook Open Graph-metatags voor sociale media. Als je wil, kun je zelfs schema.org-definities toevoegen.

Zelfs als je geen Rocketship gebruikt, kun je het zelf instellen door de Meta tag-module en enkele van zijn submodules te installeren.

Ik neem je mee door alle stappen:

Controleer of Drupal gegevens levert.
Blootstellen van de metatag.
Herbouw cache.
Maak een apart component aan.
Dynamisch tags creëren.
Enkele overwegingen bij de implementatie.

Controleer of Drupal gegevens levert.

We gaan ervan uit dat je al een Drupal-site hebt draaien met de nieuwste versie van het Rocketship-installatieprofiel of een vergelijkbare opstelling. We gaan er ook van uit dat je al een Next.js-website hebt draaien die zijn gegevens voor een nodepagina uit JSON: API haalt. Als je dat nog niet hebt, raden we je aan om te beginnen met de documentatie die hier wordt gegeven.

De eerste stap is ervoor te zorgen dat Drupal daadwerkelijk de gegevens levert op het JSON: API-rest-eindpunt. Standaard zal de metatag-eigenschap nul zijn:

{  
jsonapi:
{ 
version: "1.0",
meta:
{
links:
{
self:
{
href: "http://jsonapi.org/format/1.0/"
}
}
}
},
data:
{
type: "node--page",
id: "cdbca976-6504-4b0a-8f66-e8fbc02fa2d3",
links:
{
self:
{
href: "https://dropsoliddxp.docker.localhost:444/jsonapi/node/page/cdbca976-6504-4b0a-8f66-e8fbc02fa2d3?resourceVersion=id%3A1551"
}
},
attributes:
{
drupal_internal__nid: 42,
drupal_internal__vid: 1551,
langcode: "en",
revision_timestamp: "2022-09-22T15:26:58+00:00",
revision_log: null,
status: true,
title: "Why Dropsolid",
created: "2021-10-08T14:47:34+00:00",
changed: "2022-09-22T15:26:58+00:00",
promote: false,
sticky: false,
default_langcode: true,
revision_translation_affected: true,
breadcrumbs:
[
{
uri: "internal:#",
title: "Why Dropsolid",
options: [ ]
}
],
metatag: null,
node_keeper: false,
alias_keeper: false,
keeper_machine_name: null,
path:
{
alias: "/why-dropsolid",
pid: 49,
langcode: "en"
},
publish_on: null,
unpublish_on: null,
content_translation_source: "und",
content_translation_outdated: false,
field_description: "We believe that with an open DXP you can have it all. Freedom, flexibility and peace of mind. All while still using your own stack. Learn more!",
field_meta_tags: null,
field_page_display_canonical: [ ],;

Gedeeltelijke output van https://example.com/jsonapi/node/page/[some-uuid]

Blootstellen van de metatag

Gelukkig hebben sommige mensen geprobeerd om het te laten werken. Wanneer je de volgende patch toepast, kun je de metatag-gegevens blootleggen.

De patch voegt een berekend veld toe aan bepaalde entiteiten met de naam metatag_computed. Dit veld zal de structuur voor de metadata genereren wanneer de entiteit wordt opgevraagd. Om de gegevens beschikbaar te maken op de entiteit wordt een normalizer gebruikt.

Het zal er als volgt uitzien:

{
jsonapi:
{
version: "1.0",
meta:
{
links:
{
self:
{
href: "http://jsonapi.org/format/1.0/"
}
}
}
},
data:
{
type: "node--page",
id: "cdbca976-6504-4b0a-8f66-e8fbc02fa2d3",
links:
{
self:
{
href: "https://dropsoliddxp.docker.localhost:444/jsonapi/node/page/cdbca976-6504-4b0a-8f66-e8fbc02fa2d3?resourceVersion=id%3A1551"
}
},
attributes:
{
drupal_internal__nid: 42,
drupal_internal__vid: 1551,
langcode: "en",
revision_timestamp: "2022-09-22T15:26:58+00:00",
revision_log: null,
status: true,
title: "Why Dropsolid",
created: "2021-10-08T14:47:34+00:00",
changed: "2022-09-22T15:26:58+00:00",
promote: false,
sticky: false,
default_langcode: true,
revision_translation_affected: true,
breadcrumbs:
[
{
uri: "internal:#",
title: "Why Dropsolid",
options: [ ]
}
],
metatag:
[
{
tag: "link",
attributes:
{
rel: "canonical",
href: "https://dropsoliddxp.docker.localhost:444/jsonapi/node/page/cdbca976-6504-4b0a-8f66-e8fbc02fa2d3"
}
},
{
tag: "link",
attributes:
{
rel: "shortlink",
href: "https://dropsoliddxp.docker.localhost:444/node/42"
}
},
{
tag: "meta",
attributes:
{
name: "referrer",
content: "origin"
}
},
{
tag: "meta",
attributes:
{
name: "rights",
content: "©2023 Dropsolid.io. All rights reserved."
}
},

Gedeeltelijke output van https://example.com/jsonapi/node/page/[some-uuid]

Herbouw cache

Vergeet niet om de cache in Drupal opnieuw op te bouwen nadat je de patch hebt toegepast. Nu we deze gegevens hebben, kunnen we ervoor zorgen dat onze Next.js-applicatie deze gegevens weergeeft, zodat ze kunnen worden opgepikt door zoekmachines.

We beginnen met het toevoegen van een Head-component aan het component dat de entiteitsgegevens heeft. In onze starterkit zou dat de [...slug].tsx zijn. Als je meer wilt lezen over de Head-component, bekijk dan hier.

…
import Head from "next/head";


export default function EntityPage({
 entity,
 additionalContent,
 menus,
}: EntityPageProps) {
 return (
   
       // Add your metatags here
     {entity.type === 'node--page' && (
       
     )}
   
 );
}

Gedeeltelijke code van [...slug].tsx

Maak een apart component aan

Je zou hier de metatags handmatig kunnen toevoegen of wat code kunnen schrijven om over de uitvoer te loopen, maar in plaats daarvan zullen we een apart component maken om de tags weer te geven.

In mijn geval heb ik het component EntityMetatags genoemd en het neemt een array van metatags, precies zoals Drupal ze via de API aan ons levert.

import * as React from "react";


export function EntityMetatags({ metatags, ...props }){
 return (
   <>
     {metatags.map((metatag,index) => {
       const Tag = metatag.tag
       // Check if we are dealing with a normal tag or structured data.
       if(!metatag.attributes?.schema_metatag){
         return 
       }
     })}
   
 );
}

Volledige code van entity–metatags.tsx

Dynamisch tags creëren

In dit component loopen we over de geleverde metatags en maken we dynamisch tags aan met hun attributen. De metatags array bevat ook de schema.org-metadata die niet als metatag kan worden toegevoegd. Aan het einde van de blogpost zullen we wat meer praten over hoe je dat zou aanpakken.

Dus nu om de metatags daadwerkelijk te renderen in je Next.js applicatie, voeg gewoon je nieuw gemaakte component toe aan de Head component.

…
import Head from "next/head";


export default function EntityPage({
 entity,
 additionalContent,
 menus,
}: EntityPageProps) {
 return (
   
     {entity.type === 'node--page' && (
       
     )}
   
 );
}

Gedeeltelijke code van [...slug].tsx

Wanneer je de website opent in de browser en onze code inspecteert, zou je de metatags moeten zien die geconfigureerd zijn in Drupal in de head van je Next.js applicatie:

Enkele overwegingen bij de implementatie

Wat betreft SEO ben je volledig gedekt wanneer Next.js in de server side rendering modus draait. Bij de initiële belasting van de pagina bevat het DOM deze metatags, zodat de zoekrobot geen extra passes hoeft te maken om je JavaScript uit te voeren.
Je zult zien dat sommige gegevens URL's bevatten. In sommige gevallen wil je mogelijk het domein van je Next.js-applicatie tonen in plaats van je Drupal-applicatie. We raden aan om ofwel je standaardtags te configureren om overeen te komen met dit front-end domein, of in het geval van een multisite, een token in Drupal te gebruiken met aanvullende logica of het domein te herschrijven in je front-end applicatie.

Voor de schema.org-metadata moet je momenteel de JSON-uitvoer opnieuw opbouwen op basis van wat werd doorgegeven. Als je geïnteresseerd bent om te zien hoe we dat hebben gedaan, laat dan een opmerking achter via het contactformulier.

We kunnen je alvast een tip geven: gebruik de Next/Script-component niet in de Next/Head-component. Gebruik in plaats daarvan de strategy-eigenschap van de Script-component om het script-tag af te drukken in de head van je Next.js-applicatie. Als je meer wilt lezen over de Script-component, kijk dan hier.

Kom in de toekomst zeker terug wanneer we meer van dit soort artikelen uitbrengen.