带有GatsbyJS的丰富片段的JSON-LD模式

问题描述 投票：0回答：1

我在Gatsby上有一个基本的博客设置，在发布此问题时lacks good documentation for SEO components。有一些基本的SEO组件示例，但我想要的是更深入的内容。也许，如果在这里达成解决方案，则可以将其贡献给Gatsby文档，以使其他人受益。

除了通常的标题和描述元标记以及facebook / twitter开放图元（我已经做过），我想为rich snippets添加结构化数据，具体数据取决于博客文章的类型。例如，我可能有一个常规的帖子，它会打印Article模式，有些帖子可能是How-to，在这种情况下，我想打印HowTo模式而不是Article。在某些时候，我可能会写一篇适合FAQ模式的文章。

我不知道这是否是最好的方法，但这就是我的想法：

1。在frontmatter中，将我想要的架构类型设置为true，其余设置为false。

我也在考虑将模式数据存储在最前面，但由于此数据非常复杂，并且会因职位类型而异（文章，HowTo等），因此我不确定这是否是一个好主意？ 

---
title: Hello World
description: How to say hello
article: false
how-to: true
faq: false
---

2。在SEO组件中测试是非，并打印正确的架构。

下面是我的整个SEO组件，这显然行不通，但您可以希望看到我的想法前进的方向。我已经剖析并从gatsby advanced starter component和gatsby starter prismic component中借用了，但是都不能完全满足我的需要。这是我的：

import React from "react"
import Helmet from "react-helmet"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import Facebook from "./Facebook"
import Twitter from "./Twitter"

const SEO = ({
  title,
  desc,
  banner,
  pathname,
  published,
  modified,
  article,
  webpage,
  node,
}) => {
  const { site } = useStaticQuery(query)

  const {
    buildTime,
    siteMetadata: {
      siteUrl,
      defaultTitle,
      defaultDescription,
      defaultBanner,
      headline,
      siteLanguage,
      ogLanguage,
      author,
      twitter,
      facebook,
    },
  } = site

  const seo = {
    title: title || defaultTitle,
    description: desc || defaultDescription,
    image: `${siteUrl}${banner || defaultBanner}`,
    url: `${siteUrl}${pathname || "/"}`,
    date_published: published,
    date_modified: modified,
  }

  // Default Website Schema
  const schemaOrgJSONLD = [
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      url: siteUrl,
      name: defaultTitle,
      alternateName: headline ? headline : "",
    },
  ]

  if (howto) {
    schemaOrgJSONLD.push({
      /* HowTo Schema here */
    })
  }

  if (faq) {
    schemaOrgJSONLD.push({
      /* FAQ Schema here */
    })
  }

  if (article) {
    schemaOrgJSONLD.push({
      /* Regular Article Schema */
      "@context": "http://schema.org",
      "@type": "Article",
      author: {
        "@type": "Person",
        name: author,
      },
      copyrightHolder: {
        "@type": "Person",
        name: author,
      },
      copyrightYear: "2019",
      creator: {
        "@type": "Person",
        name: author,
      },
      publisher: {
        "@type": "Organization",
        name: author,
        logo: {
          "@type": "ImageObject",
          url: `${siteUrl}${defaultBanner}`,
        },
      },
      datePublished: seo.date_published,
      dateModified: seo.date_modified,
      description: seo.description,
      headline: seo.title,
      inLanguage: siteLanguage,
      url: seo.url,
      name: seo.title,
      image: {
        "@type": "ImageObject",
        url: seo.image,
      },
      mainEntityOfPage: seo.url,
    })
  }

  return (
    <>
      <Helmet title={seo.title}>
        <html lang={siteLanguage} />
        <meta name="description" content={seo.description} />
        <meta name="image" content={seo.image} />
        {/* Schema.org tags */}
        <script type="application/ld+json">
          {JSON.stringify(schemaOrgJSONLD)}
        </script>
      </Helmet>
      <Facebook
        desc={seo.description}
        image={seo.image}
        title={seo.title}
        type={article ? "article" : "website"}
        url={seo.url}
        locale={ogLanguage}
        name={facebook}
      />
      <Twitter
        title={seo.title}
        image={seo.image}
        desc={seo.description}
        username={twitter}
      />
    </>
  )
}

export default SEO

SEO.propTypes = {
  title: PropTypes.string,
  desc: PropTypes.string,
  banner: PropTypes.string,
  pathname: PropTypes.string,
  published: PropTypes.string,
  modified: PropTypes.string,
  article: PropTypes.bool,
  webpage: PropTypes.bool,
  node: PropTypes.object,
}

SEO.defaultProps = {
  title: null,
  desc: null,
  banner: null,
  pathname: null,
  published: null,
  modified: null,
  article: false,
  webpage: false,
  node: null,
}

const query = graphql`
  query SEO {
    site {
      buildTime(formatString: "YYYY-MM-DD")
      siteMetadata {
        siteUrl
        defaultTitle: title
        defaultDescription: description
        defaultBanner: logo
        headline
        siteLanguage
        ogLanguage
        author
        logo
        twitter
        facebook
      }
    }
  }
`

我可以看到的问题是：

  1. 如何测试使用哪种模式类型并打印它
  2. 包括所有类型的面包屑架构
  3. 仅打印单个架构JSON-LD脚本标记，避免任何重复的架构
  4. 在适合存储复杂模式数据的markdown文件中使用frontmatter
  5. 检索模式的前端数据
javascript reactjs gatsby google-rich-snippets
1个回答
0
投票

我决定采用此解决方案。

在前题：

---
type: howto // Use either 'article' or 'howto'
---

使用GraphQL进行查询，就像处理其他数据一样：

frontmatter {
 title
 published(formatString: "MMMM DD, YYYY")
 modified(formatString: "MMMM DD, YYYY")
 description
 type
}

将其传递给您的SEO组件：

<SEO
 title={post.frontmatter.title}
 desc={post.frontmatter.description}
 published={post.frontmatter.published}
 modified={post.frontmatter.modified}
 type={post.frontmatter.type}
/>

在SEO组件中，您可以像这样使用它（对所有类型都执行相同的操作）。您可以根据需要设置您的帖子和SEO组件作为我的类型，常见问题解答，课程等：

const schemaType = type

if (schemaType === "howto") {
 schemaHowTo = {
  // Your howto schema here
 }
}

if (schemaType === "article") {
 schemaArticle = {
  // Your article schema here
 }
}

最后，在React Helmet中，我们有：

<Helmet>
 {schemaType === "howto" && (
  <script type="application/ld+json">
   {JSON.stringify(schemaHowTo)}
  </script>
 )}
 {schemaType === "article" && (
  <script type="application/ld+json">
   {JSON.stringify(schemaArticle)}
  </script>
 )}
...
<Helmet>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.