schema.org templates

[serkanalgur]

Hello there,

Can we add schema.org jsonLD template for BlogPosting. I use your blog starter (v1) and i changed Seo.js, created an condition for postSEO and changed original code like below;

If is that possible, i will fork this repo & try to update base SEO.js

const Seo = props => {
  const { data, facebook, postSEO } = props;
  const postTitle = ((data || {}).frontmatter || {}).title;
  const postDescription = ((data || {}).frontmatter || {}).subTitle;
  const postCover = ((data || {}).frontmatter || {}).original;
  const postSlug = ((data || {}).fields || {}).slug;
  const okat = ((data || {}).frontmatter || {}).category;
  const date = ((data || {}).fields || {}).prefix;

  const title = postTitle ? `${postTitle} - ${config.shortSiteTitle}` : config.siteTitle;
  const description = postDescription ? postDescription : config.siteDescription;
  const image = postCover ? postCover.childImageSharp.resize.src : config.siteImage;
  const url = config.siteUrl + config.pathPrefix + postSlug;

  const schemaOrgJSONLD = [
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      url: config.siteUrl,
      name: config.siteTitle,
      alternateName: config.shortSiteTitle ? config.shortSiteTitle : "",
      description: postSEO ? postDescription : config.siteDescription
    }
  ];

  if (postSEO) {
    schemaOrgJSONLD.push({
      "@context": "http://schema.org",
      "@type": "BlogPosting",
      url: url,
      mainEntityOfPage: url,
      name: title,
      articleBody: data.html,
      alternateName: config.shortSiteTitle ? config.shortSiteTitle : "",
      headline: title,
      author: config.authorName,
      datePublished: date,
      dateModified: date,
      publisher: {
        "@type": "Organization",
        name: config.authorName,
        logo: {
          "@type": "imageObject",
          url: "https://serkanalgur.com" + image
        }
      },
      image: {
        "@type": "ImageObject",
        url: "https://serkanalgur.com" + image
      },
      description
    });
  }

  return (
    <Helmet
      htmlAttributes={{
        lang: config.siteLanguage,
        prefix: "og: http://ogp.me/ns#"
      }}
    >
      {/* General tags */}
      <title>{title}</title>
      <meta name="description" content={description} />
      {/* OpenGraph tags */}
      <meta property="og:url" content={url} />
      <meta property="og:title" content={title} />
      <meta property="og:site_name" content={config.siteTitle} />
      <meta property="og:description" content={description} />
      <meta property="og:locale" content={config.siteLanguage} />
      <meta property="og:image" content={"https://serkanalgur.com" + image} />
      <meta property="og:type" content={postSEO ? "article" : "website"} />
      {postSEO ? (
        <meta property="article:author" content="https://facebook.com/serkan.algur" />
      ) : (
        ""
      )}
      {postSEO ? (
        <meta property="article:publisher" content="https://facebook.com/serkan.algur" />
      ) : (
        ""
      )}
      {postSEO ? <meta property="article:section" content={okat} /> : ""}
      <meta property="fb:app_id" content={facebook.appId} />
      {/* Twitter Card tags */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta
        name="twitter:creator"
        content={config.authorTwitterAccount ? config.authorTwitterAccount : ""}
      />
      <script type="application/ld+json">{JSON.stringify(schemaOrgJSONLD)}</script>
    </Helmet>
  );
};

Seo.propTypes = {
  data: PropTypes.object,
  facebook: PropTypes.object.isRequired,
  postSEO: PropTypes.bool,
  date: PropTypes.any
};

export default Seo;

[greglobinski]

Hi @serkanalgur schema.org is absolutely worth to support by Seo component.

But I think that not in that way. I do not want any longer to pass the config object to the component.

I recently refactored the component and the way I will add schema.org support is by passing the whole schemaOrgJSONLD to the component as a optional prop, so if the prop will be passed to the component the schema will be rendered, without any additional postSEO prop.

The react-website-themes are created for gatsby-starter-kit but I want to maintain them independently from it or event gatsby. That's why I named it "react-website-themes" not "gatsby-website-themes" :)

update: so, the creation of a proper schemaOrgJSONLD will be starter's code job not the Seo component.