Nuxt 3: schema org

my name is Tim Benniks and this is a
turbo tutorial
so in this quick tutorial i want to show
you how you can add schema.org and micro
data to your next three application
schema.org data is really important
right you can actually get really nice
search results in google or other search
engines when you say hey this is a blog
post or this is my organization and you
can add all that enrichment data to your
pages and everything gets better from it
and it's quite simple to add so why not
go into the computer and i'll show you
how it's done so in vs code here this is
a clean nuxt 3
install but i've added the next
schema.org
module and this module actually wraps
the few use schema arc
functionality but makes it work in nuxt 3
with all the ease of use that you would
want out of a module for nuxt 3 so
the only thing you'd have to do for now
at least in my instance i just add
the host the base host for the canonical
url and things like that are actually
added here and oh by the way i said
canonical but it's not actually using
that it uses this to concatenate other
things inside the micro data
so basically let's go to app.view
and let's have a look what i've added
here to make this work and so when you
add this module it injects a bunch of
functions that you can use that are auto
resolved so if you want to actually set
any sort of schema org stuff you can do
use the composable use schema org and
there's a whole bunch of inputs that you
can give in an array
and so for me i'm actually defining the
website and it's my for my press kit
site for example and you can define a
person which is me with the icon that i
have and my url
and then you define a web page and so
those definitions together
basically combine your schema.org micro
data on a page and of course you can do
this with all the slugs and dynamically
fill this up
like if something is a blog post you add
some other stuff and so how to do that
i'll show you in a sec so let's first
have a look at the browser of what came
out of this so i just have this page
with friends because why not and so here
you can see the html and there's
actually now a script tag with
application slash ld plus json or json
and that's exactly what we want this is
our schema.org graph and so when you
open it you see a whole bunch of things
so it actually took that tim bennex.dev
host and filled it up with a bunch of
stuff here so this is my prescient
website my publisher and then there's an
identity which is me and then this is a
web page and it actually grabs all the
stuff that it needs from that to show on
the page
and
that's literally it it's really simple
right and this makes that work and
before this was a whole bunch of code
you had to do
and there are some modules out there for
nox2 to do it as well i know of a few
that i use
and in few three you now use this one
it's really easy so what if you have a
blog or something else or like a product
or e-commerce stuff well you can
actually just go to the few use
schema.org
docs and i just clicked on blog here and
you can literally just say okay let's
define an article now
all right and well how about we do that
so let's just grab this stuff right so
it has an image and all that other stuff
and so let's just say you know what
let's define an article and i don't
think
we have to define a web page now because
this is an article let's see what comes
out
okay so
application json here's my base schema
there's my person and then beam
here's our article the type article
dates titles thumbnail i just added all
that stuff
works magically and there's no longer
like looking up what the specs say and
concatenating it yourself this just
works so that's what i wanted to show
you today thank you for watching and
i'll see you in the next turbo tutorial
cheers