Programming

Hoe Schema.org Markup op uw website te gebruiken en waarom u dat zou moeten doen

Hoe Schema.org Markup op uw website te gebruiken en waarom u dat zou moeten doen / Programming

Zoekmachines zijn ongelooflijk krachtig 7 Alternatieven voor Google Zoeken en hun handelsmerken 7 Alternatieven voor Google Zoeken en hun handelsmerken Bent u een die-hard Google-gebruiker? Geef deze alternatieve zoekmachines een kans. Van privacy tot het helpen van goede doelen, deze zoekmachines kunnen u een aantal redenen geven om de manier waarop u bladert te veranderen. Lees verder . Ze kunnen de vaak onduidelijke taal interpreteren die we gebruiken om erachter te komen waar we naar op zoek zijn, om de beste bron te bepalen om onze vragen te beantwoorden en om ons binnen een fractie van een seconde te laten zien.

Google wordt zelfs heel goed in het beantwoorden van vragen op de pagina met zoekresultaten, waardoor het niet nodig is ergens op te klikken. Het personaliseert zelfs zoekresultaten Hoe Google's personalisatie van zoekresultaten uitschakelen Hoe Google's personalisatie van zoekresultaten uitschakelen Lees meer. En dat helpt mensen sneller de informatie te vinden waarnaar ze op zoek zijn.

Maar zoekmachines kunnen dit niet alleen - ze hebben hulp nodig van site-eigenaren en ontwikkelaars. En schema-opmaak is een manier waarop u op uw eigen site kunt helpen.

Wat is schema-opmaak?

Schema-markeringen zijn een manier om specifieke stukken gestructureerde gegevens te markeren.

Wat zijn gestructureerde gegevens? Haar informatie die is georganiseerd en getagd dus het kan beter worden begrepen door machines. Kort gezegd, schema-opmaak is informatie die zoekmachines helpt om specifieke soorten informatie op uw webpagina te vinden. Het is het gemakkelijkst om naar een voorbeeld te kijken.

Google heeft een eigen interactief voorbeeld van schema-opmaak dat een recept voor appeltaart beschrijft:

Hierboven ziet u de JavaScript-code die de voorbereidingstijd, totale tijd, receptierendement en verschillende voedingsfeiten voor het recept definieert.

Op dit punt moet worden opgemerkt dat er twee belangrijke manieren zijn om de gestructureerde gegevens te markeren: met JSON What Is JSON? Overzicht van A Layman Wat is JSON? Het overzicht van A Layman Of u nu een webontwikkelaar wilt zijn of niet, het is een goed idee om op zijn minst te weten wat JSON is, waarom het belangrijk is en waarom het overal op internet wordt gebruikt. Meer lezen of met inline HTML-tags. Google beveelt de JSON-methode aan, maar we zullen beide later bespreken.

Dit is hoe Google de specifieke voedingsinformatie ophaalt:

Schema.org heeft duizenden verschillende soorten markeringen die u kunt gebruiken om zoekmachines de informatie op uw pagina beter te laten zien. Het TechArticle-type bevat bijvoorbeeld, naast vele andere dingen, de volgende kenmerken:

  • vaardigheidsniveau
  • Aantal woorden
  • publiek
  • Schepper
  • Datum gecreeërd
  • dateModified
  • datum gepubliceerd
  • publishingPrinciples
  • typicalAgeRange

Er is een volledig schema voor bibliotheken, logiesbedrijven, appartementen, visuele kunstevenementen, uitzendkanalen, bezorgmethoden, statussen van gameservers en meer.

Het idee is om ervoor te zorgen dat zoekmachines weten wat elk stukje informatie op uw pagina daadwerkelijk vertegenwoordigt, zodat het die stukjes informatie kan tonen aan mensen die ernaar op zoek zijn.

De voordelen van schema-opmaak

OK. Schema markup vertelt zoekmachines wat er op uw pagina staat - wat is het probleem?

Google zegt het zo:

“Wanneer informatie zeer gestructureerd en voorspelbaar is, kunnen zoekmachines deze gemakkelijker organiseren en op een creatieve manier weergeven.”

Je kunt bijvoorbeeld de tourdata voor de komende Slayer-tour rechtstreeks in de zoekresultaten zien:

Of krijg specifieke informatie over een film wanneer u ernaar zoekt:

Google wordt steeds beter in het vinden van deze informatie op zichzelf, maar correct gebruik van schema-opmaak vereenvoudigt het proces en maakt het waarschijnlijker dat de informatie op uw pagina wordt weergegeven.

En wanneer zoekmachines precies weten wat er op uw pagina staat, kunnen ze het laten zien aan mensen die ernaar zoeken binnen de zoekresultaten. En dat is goed voor iedereen.

Aan de slag met gestructureerde gegevens

Nu u de voordelen van het gebruik van Schema.org-markeringen hebt gezien, is het tijd om in te duiken. We beginnen met de eenvoudigste tool: Google's Data Highlighter.

U moet uw site verbinden met de Search Console van Google (voorheen Webmasterhulpprogramma's gebruiken Verdien meer inzichten voor uw site met zoekinstrumenten voor webmasterhulpprogramma's Verdien meer inzichten voor uw site met Webmasterhulpprogramma's Zoekopdracht zoekopdrachten Wijzigingen in het hulpprogramma Zoekopdrachten in Google Webmasters zou kunnen veranderen hoe u uw onderwerponderzoek doet. Content genereren op het web impliceert creativiteit en gebruikersgerichtheid, en veel zoekwoordonderzoek Lees meer). Als je hulp nodig hebt bij het instellen, bekijk dan Yoast's handige uitleg.

Zodra u dat hebt gedaan, meldt u zich aan bij Search Console en klikt u op Zoekopmaak> Data markeerstift. Druk op de Begin met markeren knop aan de rechterkant van het scherm.

Vervolgens moet u de URL invoeren van een pagina die u wilt labelen en het type markup selecteren dat u gaat doen. In dit specifieke geval gebruiken we het opmaaktype Artikelen.

Omdat ik een artikel markeer op een site die veel artikelen plaatst, houd ik het bij Tag deze pagina en anderen vinden het leuk gecontroleerd.

Nu zie je een gesplitst scherm: je pagina aan de linkerkant en beschikbare markup-velden aan de rechterkant.

Het is echt eenvoudig vanaf hier. Begin gewoon te markeren! Wanneer u tekst markeert (of op een afbeelding klikt), verschijnt er een klein menu waarin u het type informatie kunt selecteren dat u hebt gemarkeerd.

Hier heb ik de titel van de pagina gemarkeerd. Ik hoef alleen maar te klikken “Titel” in het menu.

Nu wordt de titel in het rechterdeelvenster ingevuld.

Ik ga verder en belicht de auteur, de gepubliceerde datum, de hoofdafbeelding en de categorie (ik heb de tags boven aan het artikel gemarkeerd en alle drie zijn als categorieën geïmporteerd).

En we zijn klaar! Dat is alles wat er is.

Wanneer je slaat Gedaan, Data Highlighter helpt u deze opmaak toe te passen op andere vergelijkbare pagina's op uw site.

Meer details toevoegen

Met Data Markeerstift kunt u alleen krassen maken op het oppervlak van gestructureerde gegevensmarkeringen. Zoals je hierboven zag, kon ik slechts een handvol attributen toevoegen aan dat artikel. Schema.org's Artikeltype bevat veel meer kenmerken die kunnen worden ingesteld.

Wat doen we als we meer detail willen toevoegen aan de schema-opmaak?

Je zult op dit punt in de code moeten duiken. Zoals ik eerder al zei, zijn er twee manieren om de gestructureerde gegevens te representeren: met JSON en met inline HTML-tags. Omdat de HTML-tags 17 Eenvoudige HTML-codevoorbeelden die u kunt leren in 10 minuten 17 Eenvoudige HTML-codevoorbeelden die u in 10 minuten kunt leren Als u de volgende 17 HTML-tags kent (en de extra paar die daarbij horen), kunt u om een ​​basis webpagina helemaal opnieuw te maken of de code te wijzigen die is gemaakt door een app als ... Lees meer zijn wat intuïtiever, we zullen die eerst bespreken.

Inline Schema.org HTML-markup

Als voorbeeld markeren we een eenvoudige zin: “Ik woon in Denver.” In HTML wordt dat eenvoudig weergegeven, zoals dit:

Ik woon in Denver.

Om de opmaak te starten, moeten we specificeren dat deze specifieke zin over een persoon gaat (weergegeven door het itemitem Persoon). Dit doen we als volgt:

 
Ik woon in Denver.

Nu zal een zoekmachine weten dat alles wat hierin is opgenomen

tag heeft te maken met een persoon.

Vervolgens voegen we een markup-kenmerk toe: Homelocation. Schema.org definieert homeLocation als “Een contactlocatie voor de woning van een persoon.”

We moeten dat specifieke kenmerk aan de HTML toevoegen. Dit doen we als volgt:

 
ik woon in Denver.

Nu “Denver” is geïdentificeerd als de Homelocation eigendom, en Google weet dat de persoon die in deze alinea wordt genoemd, daar woont.

Als we de zin wijzigen in “Ik woon en werk in Denver,” we kunnen dat ook laten zien:

 
Ik woon en werk in Denver.

Denver is nu geïdentificeerd als beide Homelocation en werk locatie. (Met dank aan Lloyd Bank en unor bij Stack Exchange voor het schetsen van dit voorbeeld.)

Dit is een vrij eenvoudig geval van schema-opmaak, maar u begrijpt het wel. Door het gebruiken van

en tags kunt u kenmerken en eigenschappen toevoegen aan alles op uw pagina.

Schema.org Markup With JSON

Google beveelt het gebruik van JSON-LD (JavaScript-objectnotatie voor gekoppelde gegevens) voor schema-opmaak aan. Het grootste voordeel van deze methode is dat het je HTML veel schoner houdt. Als je teruggaat naar het bewerken van een pagina en je ziet tientallen pagina's met code met markeringen, zul je niet gelukkig zijn.

JSON-markeringen vereisen nog steeds veel ruimte, maar het is gescheiden van uw HTML, waardoor het gemakkelijker te onderhouden is.

Laten we zeggen dat u een boekwinkel heeft genaamd Harker's en dat u de volgende informatie op uw contactpagina hebt opgenomen:

Telefoonnummer: 555-8710 Adres: 749 Stoker St., Boulder, Colorado Uur: 10-9 maandag tot vrijdag, 11-8 zaterdag, 12-5 zondag

Zo zou je dat voorstellen met JSON-LD:

Dit staat in de kop van uw pagina. Zoals u ziet, gaat dit veel ruimte in beslag nemen, omdat deze inhoud vrijwel zeker ook in HTML op uw pagina wordt weergegeven. Dus alles wat u wilt markeren, wordt twee keer geschreven.

Ondanks die duplicatie verdient de JSON-methode vaak de voorkeur, omdat het de schema-opmaak en uw HTML scheidt. Veel best practices in HTML 9 Fouten die je niet zou moeten maken bij het bouwen van een webpagina 9 Fouten die je niet zou moeten maken bij het bouwen van een webpagina Deze volgende HTML-codeerfouten zijn gemakkelijk te maken, maar als je ze eerder in plaats van later uitzet, pagina ziet er beter uit, is gemakkelijker te onderhouden en functioneert zoals u dat wilt. Lees meer lijkt een beetje vreemd totdat je je realiseert dat ze sites gemakkelijker te onderhouden maken. Dit is hetzelfde.

Schema markup toevoegen aan uw site

Nu u een paar verschillende manieren hebt gezien om gestructureerde gegevensnotatie aan uw site toe te voegen, kunt u aan de slag! Het is een goed idee om te beginnen met de Data Highlighter en van daaruit verder te gaan. De documentatie van Schema.org is de ultieme bron, maar het is een beetje moeilijk om door te bladeren.

Of je nu voor de basis gaat of alles in het zicht wilt markeren, je hebt nu de middelen die je nodig hebt om te beginnen!

Heeft u Schema.org-markup op uw eigen site gebruikt? Heeft u tips voor site-eigenaren of ontwikkelaars die willen beginnen? Deel uw mening in de reacties hieronder!

Image Credit: iinspiration via Shutterstock.com

.