open graph protocol 使用
August 02, 2023约2分钟阅读The Open Graph protocol 属于 SEO 中的一部分， 在支持 og 协议的社交平台中把链接转为卡片渲染，能极大增加网页链接被点击率。 本文通过升级当前文档系统集成 og 标签，从而更进一步了解 og 协议
标签说明
og:title
卡片标题
og:description
卡片描述
og:url
点击链接
其他一些标签详见文档
绝大部分社交平台不会执行 js, 故标签的生成必须在服务端
应用
使用 react-helmet 注入 关联 meta 标签
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 默认使用服务端渲染， 故无需关注其他问题
实际钉钉中效果
电报效果
Reference
未经许可, 不可转载