页面通用设置 - (高级) META 分享配置 - 《宜搭帮助中心 - 旧版本》

1. 什么是 META？
2. 什么是 Open Graph?
- 2.1 主要标签属性
- 2.2 Open Graph 的作用
3. HTML示例代码
4. 定制 META 标签
备注

1. 什么是 META？

通常所说的META标签，是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。

META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的和之间（有些也不是在<head>和<title>之间）。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。<meta>除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。<br />所以有关搜索引擎注册、搜索引擎优化排名等网络营销方法内容中，通常都要谈论META标签的作用，我们甚至可以说，META标签的内容设计对于搜索引擎营销来说是至关重要的一个因素，合理利用 Meta 标签的 Description 和Keywords 属性，加入网站的关键字或者网页的关键字，可使网站更加贴近用户体验。</p> <p>从HTML代码实例中可以看到，一段代码中有3个含有meta的地方，并且meta并不是独立存在的，而是要在后面连接其他的属性，如description、Keywords、http-equiv等。下面简单介绍一些搜索引擎营销中常见的META标签的组成及其作用。</p> <p>具体文档，可参考：<a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta">https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta</a></p> <p><a name="Eqi9G"></a></p> <h2 id="df46ls"><a name="df46ls" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2. 什么是 Open Graph?</h2><p>Open Graph通讯协定(Protocol)本身是一种制定一套Metatags的规格，用来标注你的页面，告诉我们你的网页代表哪一类型的现实世界物件。</p> <p>Open Graph通讯协定(Protocol)本身是一种制定一套Metatags的规格，用来标注你的页面，告诉我们你的网页代表哪一类型的现实世界物件。另一伙伴网站，即Amazon旗下的Internet Movie Database(IMDb)，将用这个Open Graph Protocol为每一部电影标注页面。按下IMDb上的“赞”按钮，就会自动把那部电影加入Facebook使用者profile中的“最爱的电影”。</p> <p>Facebook已和Yahoo、Twitter合作采用OAuth 2.0认证标准。Graph API翻新了Facebook的平台程序代码，让Facebook里的每个物件都拥有独特的ID。通过Open Graph把其他社交网站建构的网络给连接起来，将创造一个更聪明、更与社交连接、更个人化也更具语意意识的网络。</p> <p><a name="svb2o"></a></p> <h3 id="c6p782"><a name="c6p782" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1 主要标签属性</h3><table> <thead> <tr> <th><strong>名称</strong></th> <th><strong>说明</strong></th> </tr> </thead> <tbody> <tr> <td><strong>og:url</strong></td> <td>对象的网址，即权威链接。通常是放置属性标签的页面的网址。不应包含任何会话变量、用户识别参数或计数器。请使用此标签的权威链接，否则赞和分享会分散到网址的所有变体中。</td> </tr> <tr> <td><strong>og:title</strong></td> <td>对象的标题、标题行或名称。</td> </tr> <tr> <td><strong>og:description</strong></td> <td>对象的简短说明或摘要。</td> </tr> <tr> <td><strong>og:image</strong></td> <td>对象的图片网址。图片应至少为 600×315 像素，但最好是 1200×630 像素或更大的尺寸（大小不超过 5MB）。将长宽比保持在 1.91:1 左右，以避免裁剪。游戏图标应为正方形，且至少为 600×600 像素。如果有多个可用的分辨率，可以添加多个 og:image 标签。如果在发布图片后更新了图片，请使用新网址，因为系统会根据之前的网址缓存图片，可能不会更新图片。</td> </tr> <tr> <td><strong>fb:app_id</strong></td> <td>网站应用的 Facebook 应用编号。</td> </tr> <tr> <td><strong>og:type</strong></td> <td>请参阅应用面板的操作类型版块，了解对象的类型。选择对象并在高级下找到其 og:type。在动态中发布对象后，就无法更改对象类型。</td> </tr> <tr> <td><strong>og:locale</strong></td> <td>对象属性使用的语言设置。默认为 en_US。</td> </tr> <tr> <td><strong>og:video</strong></td> <td>对象的视频网址。如果指定多个 og:video，则每个视频都需要提供 og:video:type。请参阅视频类型参考文档，了解如何内嵌播放视频。视频需要 og:image 标签，才能在动态消息中显示。</td> </tr> <tr> <td><strong>og:determiner</strong></td> <td>在动态中，显示在对象前面的词语，例如“an Omelette”（一份蛋饼）。此值应为属于 Enum {a、an、the、“”、auto} 的字符串。如果选择“auto”，Facebook 就会自动选择“a”或“an”。默认为空白。</td> </tr> <tr> <td><strong>og:updated_time</strong></td> <td>对象上次更新的时间。</td> </tr> <tr> <td><strong>og:see_also</strong></td> <td>用于提供额外的链接，显示与对象相关的内容。</td> </tr> <tr> <td><strong>og:rich_attachment</strong></td> <td>值为“true”时，发布的动态会呈现丰富的元数据，例如标题、说明、作者、网站名称和预览图片。</td> </tr> <tr> <td><strong>og:ttl</strong></td> <td>再次抓取此页面之前经过的秒数。此属性可用于限制 Facebook 内容爬虫的抓取频率。允许的最小值为 345600 秒（4 天）；如果设置更低的值，会使用最小值。如果不包括此标签，会根据网页服务器返回的“Expires”标头计算 ttl，否则默认为 7 天。</td> </tr> <tr> <td><strong>og:restrictions:age</strong></td> <td>[int]+ 形式的年龄值，用于表示特定的最小年龄。</td> </tr> <tr> <td><strong>og:restrictions:country</strong></td> <td>可以是 country:allowed 或 country:disallowed，随同使用 ISO 3166 标准指定的两字符国家/地区代码。</td> </tr> <tr> <td><strong>og:restrictions:content </strong></td> <td>当前仅支持对酒类产品进行内容限制。</td> </tr> </tbody> </table> <p><a name="nqyuk"></a></p> <h3 id="7ykgl7"><a name="7ykgl7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2 Open Graph 的作用</h3><p>经常我们可以看到，一个链接复制到钉钉的聊天窗口中，会出现下面这种卡片的形式展示。它其实就是使用的 Open Graph 协议抓取的信息。</p> <p>通过在网页源代码的 meta 标签中添加 og:image、og:type、og:site_name、og:title、og:description 等，即可实现。</p> <p><img src="https://cdn.nlark.com/yuque/0/2020/png/143125/1580956832374-ba454ccf-d84f-4093-8b7c-71c00ea97de3.png#align=left&display=inline&height=133&name=image.png&originHeight=266&originWidth=718&size=106723&status=done&style=none&width=359" alt="image.png"></p> <p><a name="Jd9HL"></a></p> <h2 id="6uakgg"><a name="6uakgg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3. HTML示例代码</h2><pre><code class="lang-html"><meta name="keywords" content="宜搭,SaaS,可视化搭建,表单,在线表单,流程,流程审批,报表,数据收集,工作协同,流程引擎,数据分析,可视化图表展示小应用,小程序"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="description" content="宜搭平台，是以表单模型驱动的泛业务场景的SAAS平台。我们希望通过可视化的拖拽、配置能力以及对表单、业务逻辑、数据三层能力的扩展，为广大中小企业在办公自动化领域的数据云化及操作移动化提供完整的解决方案，协助企业提升管理效能，实现数据驱动业务，打造企业的智慧大脑。"> <meta name="robots" content="index,follow"> <meta name="title" content="图片组件-砚心vigo"> <meta name="format-detection" content="telephone=no,date=no,address=no"> <meta property="og:image" content="https://img.alicdn.com/tfs/TB1wudGXRCw3KVjSZFlXXcJkFXa-120-120.png"> <meta property="og:type" content="website"> <meta property="og:site_name" content="宜搭"> <meta property="og:title" content="图片组件-砚心vigo"> <meta property="og:description" content="宜搭 - 人人搭建、人人使用。应用搭建，从未如此简单。"> </code></pre> <p><a name="dM6nL"></a></p> <h2 id="5iu3s9"><a name="5iu3s9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4. 定制 META 标签</h2><p>为了各个业务在宜搭上面搭建的应用，能够做进一步的宣传推广和 SEO 优化。宜搭特意开放了 META 标签的定制，针对每个页面进行 META 自定义。</p> <p><a name="aB7gW"></a></p> <h3 id="bfsevt"><a name="bfsevt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.1 定制步骤</h3><p>打开后台管理页面，切换到“设置”选项卡，在“基础设置”里面即可设置保存。</p> <p><img src="https://cdn.nlark.com/yuque/0/2020/png/143125/1580957834171-6c6e6b35-36fd-43f0-b174-0ad8436fa8aa.png#align=left&display=inline&height=710&name=image.png&originHeight=1420&originWidth=2720&size=537887&status=done&style=none&width=1360" alt="image.png"></p> <p><img src="https://cdn.nlark.com/yuque/0/2020/png/143125/1580957879991-48f5593a-a07b-4075-852d-599c8685892e.png#align=left&display=inline&height=708&name=image.png&originHeight=1416&originWidth=2708&size=489965&status=done&style=none&width=1354" alt="image.png"></p> <p>设置保存完后，我们再相对应的“图片组件”页面上，查看源代码，就可以看到我们定制的 meta 信息。</p> <p><img src="https://cdn.nlark.com/yuque/0/2020/png/143125/1580958111215-e1165253-75bd-4eaf-bff9-753331c95f7b.png#align=left&display=inline&height=708&name=image.png&originHeight=1416&originWidth=2720&size=2025019&status=done&style=none&width=1360" alt="image.png"></p> <p><a name="iwlhR"></a></p> <h3 id="7noq94"><a name="7noq94" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.2 如何支持中英文</h3><p>对于 META Name 中的 Value 和 META Property 中的 Content，我们支持双语配置，格式如下：</p> <pre><code class="lang-json">{ zh_CN: "阿里全球寻源平台", en_US: "Alibaba Global Direct Sourcing Platform" } </code></pre> <p><a name="xaPPF"></a></p> <h3 id="303jxc"><a name="303jxc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.3 如何支持变量</h3><p>对于标题，我们有时候需要使用表单中的某个字段，来动态显示在 title 上面。加入有一个名为<strong>“商品信息”</strong>的单行文本框，它的组件 id 是 <strong>“textField_k699ij1f”</strong><br /><strong><br /></strong>这时候，我们就可以在 Value 或者 Content 中使用，格式如下：<strong><br /></strong></p> <pre><code class="lang-json">分享${textField_k699ij1f}商品信息 </code></pre> <p>最后，在钉钉的聊天窗口，就可以看到链接分享的卡片形式。</p> <p><a name="03VHy"></a></p> <h2 id="1gbiub"><a name="1gbiub" class="reference-link"></a><span class="header-link octicon octicon-link"></span>备注</h2><ol> <li>目前只有宜搭官网首页，和免登的页面才能被钉钉抓取 meta 信息，然后卡片展示。</li><li>其它需要登录或者认证的页面，钉钉抓取不到。</li><li>内网 yida 域名的页面，由于安全限制，钉钉也抓取不到。</li></ol>