OG 协议说明

概要

Open Graph Protocol（开放图谱协议），简称 OG 协议。

在 Html 页面的 head 标签内，添加 meta 元素，各消息平台（）转发链接时，会解析链接的页面，获取 meta 对应属性的内容，展示成卡片。

目前，主流为 OG 协议（FaceBook），其次为 Twitter 的 twitter 协议。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<head>
    <meta property="og:description" content="">
    <meta property="og:url" content="https://gearing.netlify.app/">
    <meta property="og:site_name" content="Gear">
    <meta property="og:type" content="website">
    <meta property="og:updated_time" content=" 2022-11-15T11:26:38+08:00 ">
    
    <meta name="twitter:title" content="Gear">
    <meta name="twitter:description" content="">
</head>

OG 标签

property	demo	备注
title	`<title>your keyword rich title of the website and/or webpage</title>`
description	`<meta name="description" content="description of your website/webpage, make sure you use keywords!" />`
og:title	`<meta property="og:title" content="short title of your website/webpage" />`
og:site_name
og:url	`<meta property="og:url" content="https://www.example.com/webpage/" />`
og:description	`<meta property="og:description" content="description of your website/webpage" />`
og:image	`<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png" />`	宜 https
og:video
og:type	`<meta property="og:type" content="website" />`
og:locale		语言环境
video/audio
products, persons, movies
favicon

OG 协议说明

概要

OG 标签

Preview: