如何解决SEO缺少Gatsby JS元描述吗?
我创建了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网站检查器,当前显示描述的方法显然无法正常工作。
解决方法
只需将og:description
更改为description
(独立):
{
property: `description`,content: metaDescription,},
og
属性代表 O 笔 G 速动。它们主要用于社交网络以在共享Web时获取信息,您可以自定义这些社交网络的描述,而不用获取页面本身的描述。如果您不在乎,请将其更改为description
,如果需要,请保留两个元标记:
{
property: `og:description`,content: anoterOgMetaDescription,{
property: `description`,
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。