Microdata (schemas) support

infoxicator commented 4 years ago

Using microdata is a recommended practice to boost SEO https://schema.org/docs/gs.html

0xpatrickdev commented 3 years ago

Hey @infoxicator, what exactly did you have in mind when you say microdata?

Are you referring to stuff like itemscope, itemtype, and itemprop in the article you linked? Or were you thinking more along the lines of json/ld scripts (with schema.org data)?

infoxicator commented 3 years ago

itemscope, itemtype, and itemprop

Yeah that's it 👍

0xpatrickdev commented 3 years ago

Ok cool, YIL/TIL about this pattern for adding schema.org data to a web page. I also agree that Schema.org data would be a great addition to this library.

I am curious how search engines interpret the "microdata" approach vs "json/ld" scripts:

<!-- 'microdata' -->
<html>
  <body>
    <div itemscope itemtype ="http://schema.org/Movie">
      <h1 itemprop="name">Avatar</h1>
      <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
      <span itemprop="genre">Science fiction</span>
      <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
    </div>
  </body>
</html>

<!-- 'json/ld' -->
<html>
  <head>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Movie",
      "name": "Avatar",
      "director": {
        "@type": "Person",
        "name": "James Cameron"
      },
      "genre": "Science fiction",
      "trailer":  {
        "@type": "VideoObject",
        "contentUrl": "../movies/avatar-theatrical-trailer.html"
      }
    }
    </script>
  </head>
  <body>
    <div>
      <h1>Avatar</h1>
      <span>Director: James Cameron (born August 16, 1954)</span>
      <span>Science fiction</span>
      <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
    </div>
  </body>
</html>

It seems like json/ld might fit better with this library as 1) the schema data/markup is not coupled to DOM elements and 2) it can be injected into head like everything else in this lib. (If there is there is no difference from a SEO perspective).

Curious to hear @jgolden17's thoughts on supporting schema.org data in this library. It seems like it'd be relatively minimal effort to include a schemaScripts prop that takes an array of JSON schema objects, but a pretty heavy lift to include all of the type/prop validations for schema.org data. react-schemaorg is a neat project I came across that seems to do this with schema-dts.

ghost commented 3 years ago

I'm all for including json/ld support. I'm look at react-schemaorg now to see if we can use that library internally.

ghost commented 3 years ago

As far as microdata is concerned, I've been thinking about this on and off.

I haven't been able to figure out a clean solution short of exposing some kind of ItemProp component or doing something like

import { Movie } from 'react-seo';

<Movie.Name renderAs="h1">Avatar</Movie.Name>

Google seems to prefer structured data as json/ld so I'm thinking json/ld support is the way to go.

infoxicator commented 3 years ago

@pcooney10 I wasn't familiar with json/ld (haven't looked at SEO in a while) but seems the way to go... love the fact is not coupled to the elements and that it will fit right in with the rest of the design of this lib 👍

AdamFoskit commented 3 years ago

It looks like schema-dts may be a great library for autocompletion/TypeScript support for schemas supported on schema.org.

Maybe integrating react-helmet in combination with schema-dts would be a good way to integrate with react-seo.

Here is an example of the combination from react-schemaorg: helmet + schema-dts.

thelinuxlich commented 3 years ago

+1

americanexpress / react-seo

Microdata (schemas) support #17