Come aggiungere il markup dello schema a WordPress in modo programmatico

Pubblicato: 2022-04-21

Vuoi aggiungere il markup dello schema a WordPress in modo programmatico ? In tal caso, puoi utilizzare una serie di frammenti di codice in vari modi per il tuo sito Web WordPress.

Ma prima di dare un'occhiata a come aggiungerli, diamo un'occhiata a cosa intendi per schema markup in breve.

Che cos'è il markup dello schema?

Il markup dello schema è una struttura di dati standardizzata fornita da schema.org. Fondamentalmente, fornirà informazioni sulla pagina corrente ai motori di ricerca . In questo modo i loro robot crawler possono capire di cosa tratta il contenuto e creare rich snippet sui risultati di ricerca.

I dati contenuti nello schema sono presentati su una coppia chiave-valore come [“telefono”: “152234029”]. Può anche avere più livelli di eredità. Sono molto importanti per aumentare la percentuale di clic (CTR) per il tuo sito Web e sono anche considerati una delle migliori pratiche SEO.

Esistono molti tipi di proprietà chiave che possono essere utilizzate con lo schema. Variano da dati e tipi di dati basati su gerarchie aperte e chiuse. Visita il sito Web shcema.org per scoprire che tutti i tipi disponibili possono essere utilizzati attualmente.

Come aggiungere il markup dello schema a WordPress in modo programmatico?

Abbiamo parlato di come aggiungere uno schema a WordPress utilizzando un plug-in in un post precedente. Allo stesso modo, abbiamo già discusso alcuni altri modi per aggiungere il markup dello schema a WordPress anche attraverso la dashboard e i temi.

Ma ora impareremo come ottenere lo stesso risultato in modo programmatico. In questo modo, il tuo sito Web non avrà bisogno di caricare tutto il codice aggiuntivo fornito da un plug-in. E aggiungerai solo il codice di cui ha bisogno il tuo sito web.

Per includere lo schema in un contenuto, è necessario aggiungere i tag dello schema all'output HTML del nostro sito Web. Possiamo modificare l'HTML dei nostri siti Web in diversi modi. Il modo migliore è sovrascrivere i file del modello del tema sul tema figlio.

Avrai bisogno di un tema figlio per includere i markup dello schema a livello di codice. Quindi, se non ne hai ancora installato uno, vai avanti e crea e installa un tema figlio. Puoi persino utilizzare uno dei plugin dei temi figlio per crearlo.

Puoi aggiungere il markup dello schema a WordPress in modo programmatico in due modi principali :

  1. Aggiungi un file JSON-LD in testa
  2. Aggiungi il markup dei microdati all'output HTML

Entrambi sono metodi validi, e puoi usare liberamente quello che meglio si adatta alle tue esigenze.

1. Aggiungi il file JSON-LD

Un file JSON-LD è un tipo specifico di formato, basato su JSON e utilizzato per codificare i dati collegati. Come accade sui file JSON, contiene un elenco di coppie chiave-valore:

 {
    "telefono": "152234029",
    "nome": "Il nome",
    "indirizzo": "Johann Street N 433",
    "url": "https://QuadLayers.com",
    "priceRange": "19 - 90",
    "legalName": "QuadLayers",
    "@context": "http://schema.org",
    "@type": "Affari locali"
}

Come puoi vedere, anche la sintassi è molto simile a un file JSON.

Esistono diversi generatori JSON-LD che puoi utilizzare per ottenere il file che si adatta meglio alle tue esigenze.

Quindi, il passo successivo è stampare questo codice nella sezione HTML <head> del sito web.

Possiamo usare la seguente funzione sul file functions.php del tema figlio per raggiungere questo obiettivo.

Nota: prima di continuare, assicurati di eseguire anche il backup del tuo sito Web. Modificheremo i file principali del tuo sito Web e qualsiasi modifica indesiderata potrebbe comportare ulteriori problemi.

 add_action('wp_head','QuadLayers_add_schema');
funzione QuadLayers_add_schema(){
echo '<tipo di script="application/ld+json">
{
"telefono": "152234029",
"nome": "Il nome",
"indirizzo": "Johann Street N 433",
"url": "https://QuadLayers.com",
"priceRange": "19 - 90",
"legalName": "QuadLayers",
"@context": "http://schema.org",
"@type": "Affari locali"
}';
}

Puoi vedere come il file JSON-LD è incluso nei tag <script> . Basta non dimenticare di aggiornare il file .

Per capire come funziona lo schema, tieni presente che il codice di esempio precedente aggiungerà il JSON a tutte le pagine di un sito Web. Quindi, quando un motore di ricerca o qualsiasi altro tipo di bot lo legge, verrà impostato come schema valido per tutte le pagine in cui è presente lo script. In questo caso, è l'intero sito web.

Possiamo applicare il codice JSON a pagine specifiche applicando una logica condizionale alla nostra funzione PHP. Ma il markup dello schema può anche essere incluso nell'HTML interno del nostro contenuto, consentendoci di includere markup complessi in alcuni contenuti molto specifici.

2. Aggiungi il markup dei microdati all'HTML

Seguendo le tendenze moderne, il metodo precedente è quello consigliato. Ma l'utilizzo del markup dei microdati ci consentirà di incorporare il markup dello schema direttamente nei file del modello .

Anche incollare i nostri script nel file functions.php del tema figlio funziona bene. Per applicare lo schema giusto a ogni contenuto, ci ritroveremmo con un pezzo di codice ampio e complesso.

Quindi, per aggiungere il markup dei microdati all'interno dell'HTML, dobbiamo sovrascrivere i file modello del tuo sito Web WordPress.

2.1. Aggiungi il markup dello schema ai post di WP

In questo esempio, il nostro tema figlio eredita il tema Twenty Twenty-One, quindi il file che dobbiamo sovrascrivere è content-single.php . Questo è il file in cui possiamo aggiungere il nostro schema direttamente sull'output HTML.

Questo file potrebbe essere trovato con un nome o una cartella diversi su alcuni temi.

Crea le cartelle necessarie sul tema figlio (parti e contenuto del modello) e un nuovo file content-single.php all'interno della cartella dei contenuti.

 Tema bambino
/__parti-modello
__/__contenuto
__/__/__content-single.php

Copia/incolla tutto il codice del file content-single.php del tema principale.

Sovrascrivi il file del modello di post

Il codice che andremo a modificare è il seguente:

 <articolo <?php post_class(); ?>>

Aggiunta dell'ambito e del tipo dello schema come il seguente snippet.

 <article itemscope itemtype ="http://schema.org/Article" <?php post_class(); ?>>

Questo sta dicendo ai motori di ricerca che il contenuto all'interno del tag HTML <article> è un tipo di articolo.
Dopo aver dichiarato il tipo e l'ambito, possiamo utilizzare alcune proprietà standard. Ad esempio, dichiarando il titolo del post come nome dell'elemento:

Codice sorgente:

 <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

Aggiungi proprietà nome:

 <?php the_title( '<h1 itemprop="name" class="entry-title">', '</h1>' ); ?>

Inoltre, possiamo utilizzare la proprietà della chiave articleBody per contrassegnare il contenuto dei nostri post.

Codice sorgente:

 <div class="entry-content">
<?php 

il contenuto();

Aggiunta dell'articolo Proprietà del corpo:

 <div itemprop="articleBody" class="entry-content">
<?php
il contenuto();

2.2. Aggiunta del markup dello schema ai prodotti WooCommerce

In modo simile, possiamo sovrascrivere il file modello dei prodotti WooCommerce per includere il nostro schema.

Il file che dobbiamo sovrascrivere è il file content-single-product.php . Questo file deve trovarsi in una cartella WooCommerce nel tema figlio. Se hai difficoltà a trovarlo, assicurati di aver impostato correttamente anche WooCommerce.

 Tema bambino
__/woocommerce
__/__content-single-product.php

Completa la stessa procedura di cui sopra creando un nuovo file al suo posto.

Definisci l'ambito e il tipo di schema sul wrapper div principale:

 <div itemscope itemtype ="http://schema.org/Product" <?php wc_product_class( '', $product ); ?>>

Possiamo anche usare la proprietà "description" su questo file:

 <div itemprop="description" class="summary entry-summary">

Tuttavia, per aggiungere più markup ai nostri prodotti, dovremo sovrascrivere file diversi.

Ad esempio, per aggiungere il prezzo dei prodotti allo schema, crea un nuovo percorso sui file del tema figlio:

woocommerce/templates/single-product/price.php

 Tema bambino
__/woocommerce
__/__/prodotto singolo
__/__/__/prezzo.php

sovrascrivere i file modello woocommerce

Dopo aver copiato il file price.php al suo posto, modifica come segue:

Codice sorgente:

 <p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $product->get_price_html(); ?></p>

Aggiunta di markup:

 <p itemscope itemtype="https://schema.org/Offer" itemprop="price" class=" <?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $prodotto->get_price_html(); ?></p>

Tieni presente che abbiamo creato un nuovo articolo con il tipo "Offerta" per definire il prezzo. È un indizio per capire come possiamo annidare diversi tipi di elementi l'uno nell'altro, seguendo la struttura HTML originale.

Ci sono altri file che puoi sovrascrivere per includere più markup.

  • title.php
  • stock.php
  • review.php
  • rating.php
  • product-image.php

Conclusione

Questo ci porta alla fine del nostro tutorial su come aggiungere il markup dello schema a WordPress in modo programmatico. Per fare ciò, è necessaria una conoscenza di base di come funziona uno schema insieme ad alcune conoscenze di programmazione.

È anche molto importante capire che tutte le proprietà e i tipi devono corrispondere a quelli definiti sul sito Web schema.org. Ciò include anche proprietà con più livelli di eredità.

Per riassumere, puoi aggiungere uno schema al tuo sito web utilizzando due modi principali:

  • Aggiungi un file JSON-LD in testa
  • Aggiungi il markup dei microdati all'output HTML

L'aggiunta del file JSON-LD è un approccio molto semplice ed è considerata dalla maggior parte degli utenti. Tutto quello che devi fare è stampare il codice JSON-LD nella sezione <head> del tuo sito web.

Tuttavia, l'utilizzo dell'approccio del markup dei microdati per incorporare il markup dello schema direttamente nei file modello può essere molto utile per te. La sovrascrittura dei file modello può aiutarti a personalizzare il sito Web con ancora più flessibilità se disponi delle risorse necessarie. Puoi persino aggiungere il markup dello schema a elementi specifici del tuo sito Web come post e prodotti WooCommerce.

Quindi puoi aggiungere il markup dello schema al tuo sito Web utilizzando questi frammenti di codice ora? Fateci sapere se questo tutorial è stato utile o meno nei commenti.

Nel frattempo, ecco alcuni dei nostri post che potrebbero interessarti e aiutarti a migliorare il tuo sito Web WordPress:

  • Come creare un plugin personalizzato per WordPress
  • Aggiungi Telegram a WordPress (Guida completa)
  • Come modificare HTML in WordPress