Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Microdata (schemas) support #17

Open
infoxicator opened this issue May 27, 2020 · 8 comments
Open

Microdata (schemas) support #17

infoxicator opened this issue May 27, 2020 · 8 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@infoxicator
Copy link
Contributor

Using microdata is a recommended practice to boost SEO https://schema.org/docs/gs.html
@infoxicator infoxicator added the good first issue Good for newcomers label May 27, 2020
@ghost ghost added the enhancement New feature or request label May 27, 2020
@0xpatrickdev
Copy link
Contributor

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
Copy link
Contributor Author

itemscope, itemtype, and itemprop

Yeah that's it 👍

@0xpatrickdev
Copy link
Contributor

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
Copy link

ghost commented Oct 21, 2020

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
Copy link

ghost commented Oct 21, 2020 •
edited by ghost

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
Copy link
Contributor Author

@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
Copy link
Collaborator

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
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@thelinuxlich @0xpatrickdev @infoxicator @AdamFoskit