The Open Graph protocol 属于 SEO 中的一部分, 在支持 og 协议的社交平台中把链接转为卡片渲染,能极大增加网页链接被点击率。 本文通过升级当前文档系统集成 og 标签,从而更进一步了解 og 协议
卡片标题
卡片描述
点击链接
其他一些标签详见文档
绝大部分社交平台不会执行 js, 故标签的生成必须在服务端
import Helmet from 'react-helmet'
const meta = [
{
property: 'og:image',
content: 'path-to-image',
},
{
property: 'og:url',
content: siteMetadata.siteOgUrl + slug,
},
{
property: 'og:title',
content: title,
},
{
property: 'og:description',
content: post.excerpt || tags.join(' '),
},
]
const Head = () => {
return <Helmet htmlAttributes={{ lang: 'cn' }} title={title} meta={meta} />
}
gatsby 默认使用服务端渲染, 故无需关注其他问题
实际钉钉中效果
电报效果