搜索引擎优化缺少Gatsby JS Meta描述？
搜索引擎优化缺少Gatsby JS Meta描述？
提问于 2020-10-26 10:35:18
我创建了一个SEO组件，但由于某些原因，当我通过灯塔或SEO检查器运行我的网站时，它显示我缺少元描述。
这是我的SEO组件
import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
function SEO({ description, title, keywords, siteUrl, lang, meta }) {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
description
keywords
title
siteUrl
}
}
}
`
)
const metaDescription = description || site.siteMetadata.description
const defaultTitle = site.siteMetadata.title
const metaUrl = siteUrl || site.siteMetadata.siteUrl
const metaKeywords = keywords || site.siteMetadata.keywords
return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
meta={[
{
property: `og:title`,
content: title,
},
{
property: `og:siteurl`,
content: metaUrl,
},
{
name: `keywords`,
content: metaKeywords,
},
{
property: `og:description`,
content: metaDescription,
},
{
property: `og:type`,
content: `website`,
},
].concat(meta)}
/>
)
}
SEO.defaultProps = {
lang: `en`,
meta: [],
description: ``,
}
SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
}
export default SEO当我检查我的网站时，它显示
<meta data-react-helmet="true" property="og:description" content="My coding blog about tech
and design.">所以我不确定我需要为我的SEO组件添加或更改什么，因为我目前显示描述的方法显然不是基于灯塔或其他SEO网站的检查器。
回答 1
Stack Overflow用户
发布于 2020-10-26 13:42:58
只需将og:description更改为description (独立)：
{
property: `description`,
content: metaDescription,
},og attributes代表Open Graph。它们主要用于社交网络，以便在共享web时获取信息，您可以自定义这些社交网络的描述，而不是获取页面本身的描述。如果您不关心这一点，请将其更改为description，如果您关心，请保留两个元标记：
{
property: `og:description`,
content: anoterOgMetaDescription,
},
{
property: `description`,
content: metaDescription,
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64530833
复制相关文章
相似问题
腾讯云开发者
