Question

我正在使用Gatsby，并且尝试使用数组的map来生成嵌套的JSON-LD，该嵌套的schema.org会得到验证。

代码是：

class TagRoute extends React.Component {
  render() {
    const posts = this.props.data.allMarkdownRemark.edges
    const blogPostSchema = JSON.stringify(posts.map(post => (
      {
      "@context": "https://schema.org",
      "@type": "BlogPosting",
      "name": `${post.node.frontmatter.title}`,
      'headline': `${post.node.frontmatter.title}`,
      "mainEntityOfPage": `https://example.com${post.node.fields.slug}`,
      "alternativeHeadline": `${post.node.frontmatter.title}`,
      "image": { 
        "@type": "imageObject", 
        "url": `https://example.com${
          !!post.node.frontmatter.image.childImageSharp ? post.node.frontmatter.image.childImageSharp.fluid.src : post.node.frontmatter.image
        }`,
        "height": "640px",
        "width": "1280px"
        },
        "author": "Author Name",
        "genre": "SEO and Technical Marketing",
        "wordcount": `${post.node.fields.readingTime.words}`,
        "publisher": {
          "@type": "Organization",
          "name": "Author Name",
          "logo": {
          "@type": "imageObject",
          "url": `https://example.com/img/author.jpg`,
          "height": "200px",
          "width": "200px"
          },
          "mainEntityOfPage": "https://example.com",
          "sameAs": ["https://au.linkedin.com/in/social-account", "https://www.facebook.com/social-account/", "https://www.twitter.com/social-account/", "https://www.instagram.com/social-account/"],
          "url": "https://example.com"
        },
      "url": `https://example.com${post.node.fields.slug}`,
      "datePublished": `${ post.node.frontmatter.date }`,
      "dateModified": `${ post.node.frontmatter.date }`,
      "description": `${ post.node.frontmatter.description}`,
    })))
    const blogSchema = JSON.stringify(
      {
        "@context": "https://schema.org",
        "@type": "Blog", 
        "author": "Author Name",
        "blogPosts": `${blogPostSchema}`,
      }
    )
    ... other stuff here

最后我得到两个结果。

结果A）嵌套的JSON.Stringify：：输出变为用引号引起来，并在结果中添加了\-这并不奇怪，因为它嵌套了JSON.Stringify()它以字符串形式。 Gist 结果B）JSON解析返回[对象对象]：如果我将JSON.parse()用作const或直接在一个this.props.data.allMarkdownRemark.edges.map(post => (...))中写入JSON.stringify()函数，它返回[object Object]而不是JSON-LD代码的值。 Gist

GraphQL如下，但是它完美地引用了对象。

export const tagPageQuery = graphql`
  query TagPage($tag: String) {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(
      limit: 1000
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { tags: { in: [$tag] } } }
    ) {
      totalCount
      edges {
        node {
          excerpt(pruneLength: 260)
          id
          html
          fields {
            slug
            readingTime {
              text
              words
            }
          }
          frontmatter {
            title
            description
            image {
              childImageSharp {
                fluid(maxWidth: 2048, quality: 75) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
            templateKey
            date(formatString: "MMMM DD, YYYY")
          }
        }
      }
    }
  }
`

此JSON.stringfy()接近有效的JSON+LD，需要删除数组开头和结尾的引号，并删除所有\。但是，当我首先要实现数组的方式一定有问题时，我不想替换字符串以清除有效代码。

Answer 1

也许您应该避免两次JSON.stringify？由于blogPostSchema是有效对象，因此可以直接在blogSchema中引用它。

const blogPostSchema = posts.map(post => ({ // no JSON.stringify here
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "name": post.node.frontmatter.title,
  ...
}))

const blogSchema = JSON.stringify({
  "@context": "https://schema.org",
  "@type": "Blog", 
  "author": "Author Name",
  "blogPosts": blogPostSchema,  //  <--- refer to blogPostSchema directly
})

嵌套的JSON Stringify将代码包装为“和\。JSON解析产生[object Object]

1 个答案: