Schema.org toevoegen aan een HubSpot website

Schema.org toevoegen aan een HubSpot website

Met Schema.org markeer je bepaalde gegevens op jouw website, zodat zoekmachines deze gegevens herkennen en goed kunnen verwerken. Structured data is onderdeel van technische SEO. Door Schema.org in te stellen markeer je bijvoorbeeld de bereidingstijd van een recept of wie de auteur is van een artikel. Je voegt dus een structured data markup toe aan je content. Schema.org wordt door zowel websites als webshops gebruikt.

Wanneer je gebruik maakt van de software van HubSpot, is het ook mogelijk om Schema.org te gebruiken. Een developer of jij zelf voert dit gemakkelijk door in de HubSpot CMS. 

Wat is Schema en structured data? 

Schema is een structured data markup. Oftewel een bepaalde notatie van microdata op je websitepagina. Deze opmaak vertelt zoekmachines wat de content en eigenschappen van een pagina zijn. De Schema markup is ontwikkeld door Schema.org. Een initiatief, opgezet door Google, Microsoft, Yahoo en Yandex. De reden hiervoor? Het makkelijker herkennen en verwerken van waardevolle data binnen zoekmachines. Normale HTML tags vertellen een browser hoe de tekst weergeven moet worden. Zo zorgt een <b></b> tag ervoor dat een stuk tekst vetgedrukt wordt weergeven. Structured data wordt via Schema ook op een soortgelijke manier weergeven. 

Wanneer je structured data gebruikt heb je kans dat Google extra informatie over jouw website toont in de zoekresultaten. Zo zorgt het toevoegen van reviews ervoor dat je met het aantal sterren in de zoekresultaten getoond wordt. Het goed gebruiken van structured data kan daarom bijdragen aan een hogere CTR en een hogere positie. Structured data is door de kansen een niet te vergeten onderdeel van zoekmachine optimalisatie geworden.

Schema itemtypes en itemprops

De schema notatie is opgedeeld in itemtypes en itemprops.

Itemtypes

Itemtypes zijn een classificatie van het type content dat je wilt markeren. De volgende itemtypes kun je markeren op je website:

  • Boeken
  • Films
  • Muziek(opnames)
  • Recepten
  • TV-series
  • Creative work
  • Evenementen
  • Medicijnen
  • Organisaties
  • Personen
  • Locaties
  • Lokale bedrijven
  • Restaurants
  • Producten
  • Aanbiedingen
  • Reviews
  • Handelingen

Alle itemtypes bekijk je makkelijk via de website van Schema.org. 

Itemprops

Een itemprop is een eigenschap van een itemtype. Een itemtype bevat in bijna alle gevallen meerdere itemprops. Zo bevat het itemtype 'Organization' vaak de merknaam, een gemiddelde rating van het bedrijf, een logo, een adres en een telefoonnummer. Alle itemprops, van een specifieke itemtype, worden op de website van Schema.org weergeven bij het betreffende itemtype.

Tussen de itemprops, van verschillende itemtypes, zit een bepaalde overlap. Zowel personen als bedrijven kunnen bijvoorbeeld een naam, e-mailadres en telefoonnummer bevatten. De meeste itemprops die je implementeert zijn optioneel en worden aanbevolen, maar een aantal itemprops zijn verplicht. Zonder deze itemprops kan Google niets met de itemtypes. Via Google’s Structured Data Testing tool test je gemakkelijk of je Schema goed hebt geïmplementeerd.

Schema implementeren

De implementatie van structured data is vrij simpel. Je kunt gebruik maken van een Microdata implementatie, RDFa of JSON-LD. Microdata wordt geïmplementeerd via HTML tags, zoals de <b></b> tag. RDFa werkt op een soortgelijke manier. Een JSON-LD implementatie werkt anders. Hierbij moet je een JSON fragment toevoegen in de code van de pagina. Dit JSON fragment bevat alle data die de zoekmachines nodig hebben. Voor HubSpot kun je Schema het makkelijkste implementeren via een JSON-LD fragment. Wanneer je een webshop hebt is een implementatie via microdata veelal het handigste en ook de meest gekozen vorm. 

Schema voor HubSpot websites

Schema voor HubSpot websites wordt gebruikt voor onder meer bedrijfsinformatie. De onderstaande JSON-LD code gebruik je voor de algemene pagina's op je website, zoals de voorpagina, contactpagina en een over ons pagina.

 {% raw %} 
<!-- Schema.org JSON-LD implementatie voor pagina's via SmartRanking -->
<script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "Organization",
 "mainEntityOfPage":{
 "@type":"WebPage",
 "@id":"{{content.absolute_url}}",
 "description": "{{ content.meta_description }}"
 },
 "url": "{{ company_domain }}",
 "logo": "{{ site_settings.logo_src }}",
 "image": "AFBEELDING INVOEGEN",
 "name": "{{ company_name }}",
 "description": "OMSCHRIJVING VAN JE BEDRIJF INVOEGEN",
 "address": {
 "@type": "PostalAddress",
 "streetAddress": "{{ site_settings.company_street_address_1 }} {{ site_settings.company_street_address_2 }}",
 "addressLocality": "{{ site_settings.company_city }}",
 "addressRegion": "{{ site_settings.company_state }}",
 "addressCountry": "{{ site_settings.company_country }}",
 "postalCode": "{{ site_settings.company_zip }}"
 },
 "areaServed": {
 "@type": "GeoCircle",
 "geoMidpoint": {
 "@type": "GeoCoordinates",
 "latitude": "LATITUDE INVOEGEN",
 "longitude": "LONGITUDE INVOEGEN"
 },
 "geoRadius": "RADIUS INVOEGEN"
 },
 "telephone": "{{ site_settings.company_phone }}",
 "email": "E-MAILADRES HIER IN VOEGEN",
 "sameAs": [
 "FACEBOOK URL INVOEGEN",
 "TWITTER URL INVOEGEN",
 "LINKEDIN URL INVOEGEN",
 "INSTAGRAM URL INVOEGEN"
 ]
}
</script>
<!-- Einde van Schema.org implementatie -->
{% endraw %}

Met behulp van tags als {{ company_domain }} en {{ company_name }} zorg je ervoor dat HubSpot zelf de inhoud voor de itemprops invult. Wanneer je iets in je Instellingen wijzigt zal de informatie in het JSON-LD fragment automatisch worden bijgewerkt. In het bovenstaande voorbeeld zal je enkele itemprops nog moeten voorzien van inhoud, dit is bij de betreffende itemprops aangegeven. Het is niet nodig om alle itemprops in te vullen. Indien dit van toepassing is, haal je deze weg uit de code.

Schema toevoegen aan je website

Het JSON-LD voeg je als volgt toe aan je website:

  1. Kopieer de bovenstaande code.
  2. Ga in je HubSpot portaal naar Instellingen > Website > Pages > Templates.
  3. Plak de code bij Site header HTML.
  4. Pas alle aan te passen informatie aan naar de informatie van jouw bedrijf.
  5. Sla de wijzigingen op.

Schema voor blogs

 {% raw %} 
<!-- Schema.org JSON-LD implementatie voor blogs via SmartRanking -->
<script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "BlogPosting",
 "headline": "{{ content.name|striptags }}",
 "image": {
 "@type": "ImageObject",
 "url": "{{ content.featured_image }}"
 },
 "datePublished": "{{ content.publish_date }}",
 "dateModified": "{{ content.updated|datetimeformat('%Y-%m-%d %X') }}",
 "author": {
 "@type": "Person",
 "name": "{{ content.blog_post_author|default('{{company_name}}') }}"
 },
 "publisher": {
 "@type": "Organization",
 "name": "{{ company_name }}",
 "logo": {
 "@type": "ImageObject",
 "url": "{{ site_settings.logo_src }}"
 }
 },
 "description": "{{ content.meta_description }}"
 },
 "wordcount": "{{ content.post_body|wordcount }}"
 </script>
<!-- Einde van Schema.org implementatie -->
{% endraw %}

Schema toevoegen aan je blog

Voor de Schema implementatie voor je blog hoef je niets aan te passen in het JSON-LD fragment. Alle informatie wordt automatisch door HubSpot ingevuld. Het JSON-LD fragment voeg je als volgt toe aan je blog:

  1. Kopieer de bovenstaande code.
  2. Ga naar Instellingen > Website > Blog > Templates.
  3. Plak de code bij Site header HTML.
  4. Vink "Use the same header HTML for blog posts" aan.
  5. Sla de wijzigingen op.
SmartRankers

SAMEN MEER BEREIKEN?

Wij drinken graag een warme of koude (én na 4 uur een alcoholische) versnapering met jou! Laat je contactgegevens achter en we bellen je terug om een afspraak in te plannen.

Heresingel 18A, Groningen