Open Graph Protocol

在twitter发布文章时，别人输入链接有这种效果：

而你却是这样的：

怎么实现图1的效果呢？
这时就学到一个新的知识点：Open Graph Protocol，即开放图谱协议，简称OG协议。
它是一种新的HTTP头部标记，由Facebook在2010年在开发者大会上发布。这种协议可以让网页成为一个‘富媒体对象’，使用Meta Property=og标签，使得SNS可以从页面抓取有效信息并呈现出来。所以当我们分享一个链接（URL）时，在有的 网站或者APP 上它只是一个链接，而在有的 网站或者APP  上，它却可以包含如图1所示的标题、图片、描述等信息。

实现：在项目的html文件头部加上：

<meta property="og:site_name" content="XXX" /> <!-- 网站名称-->
    <meta property="og:title" content="XXX" /> <!-- 标题-->
    <meta property="og:description" content="XXX" /> <!-- 描述-->
    <meta property="og:url" content="XXX" />  <!-- 图像链接-->
    <meta property="og:type" content="article" /> <!-- 图像的类型：article、vedio等等-->
    <meta property="article:publisher" content="XXX" /> <!-- 项目网址-->
    <meta property="article:section" content="Coding" />
    <meta property="article:tag" content="Coding" />
    <meta property="og:image"
        content="https://XXX.png" />
    <meta property="og:image:secure_url"
        content="https://XXX.png" />
    <meta property="og:image:width" content="1280" /> <!-- 图像宽-->
    <meta property="og:image:height" content="640" /> <!-- 图像高 宽高2：1-->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:image"
        content="https://XXX.png" />
    <meta property="twitter:site" content="" />

然后可以使用以下推特检测链接去检测是否生效

https://cards-dev.twitter.com/validator