Personalizing for interest: nuxt3 and complexity: easy. Manage your personalisation profile.
my name is Tim Benniks and this is aturbo tutorialso in this quick tutorial i want to showyou how you can add schema.org and microdata to your next three applicationschema.org data is really importantright you can actually get really nicesearch results in google or other searchengines when you say hey this is a blogpost or this is my organization and youcan add all that enrichment data to yourpages and everything gets better from itand it's quite simple to add so why notgo into the computer and i'll show youhow it's done so in vs code here this isa clean nuxt 3install but i've added the nextschema.orgmodule and this module actually wrapsthe few use schema arcfunctionality but makes it work in nuxt 3with all the ease of use that you wouldwant out of a module for nuxt 3 sothe only thing you'd have to do for nowat least in my instance i just addthe host the base host for the canonicalurl and things like that are actuallyadded here and oh by the way i saidcanonical but it's not actually usingthat it uses this to concatenate otherthings inside the micro dataso basically let's go to app.viewand let's have a look what i've addedhere to make this work and so when youadd this module it injects a bunch offunctions that you can use that are autoresolved so if you want to actually setany sort of schema org stuff you can douse the composable use schema org andthere's a whole bunch of inputs that youcan give in an arrayand so for me i'm actually defining thewebsite and it's my for my press kitsite for example and you can define aperson which is me with the icon that ihave and my urland then you define a web page and sothose definitions togetherbasically combine your schema.org microdata on a page and of course you can dothis with all the slugs and dynamicallyfill this uplike if something is a blog post you addsome other stuff and so how to do thati'll show you in a sec so let's firsthave a look at the browser of what cameout of this so i just have this pagewith friends because why not and so hereyou can see the html and there'sactually now a script tag withapplication slash ld plus json or jsonand that's exactly what we want this isour schema.org graph and so when youopen it you see a whole bunch of thingsso it actually took that tim bennex.devhost and filled it up with a bunch ofstuff here so this is my prescientwebsite my publisher and then there's anidentity which is me and then this is aweb page and it actually grabs all thestuff that it needs from that to show onthe pageandthat's literally it it's really simpleright and this makes that work andbefore this was a whole bunch of codeyou had to doand there are some modules out there fornox2 to do it as well i know of a fewthat i useand in few three you now use this oneit's really easy so what if you have ablog or something else or like a productor e-commerce stuff well you canactually just go to the few useschema.orgdocs and i just clicked on blog here andyou can literally just say okay let'sdefine an article nowall right and well how about we do thatso let's just grab this stuff right soit has an image and all that other stuffand so let's just say you know whatlet's define an article and i don'tthinkwe have to define a web page now becausethis is an article let's see what comesoutokay soapplication json here's my base schemathere's my person and then beamhere's our article the type articledates titles thumbnail i just added allthat stuffworks magically and there's no longerlike looking up what the specs say andconcatenating it yourself this justworks so that's what i wanted to showyou today thank you for watching andi'll see you in the next turbo tutorialcheers
Learn how easy it is to add rich schema.org data to your Nuxt 3 application
Learn how to add information to the head of the page with Nuxt 3
How to use Vue components in Nuxt Content v2
Learn how to use client-only components in Nuxt 3