Open Graph 元标签新手指南

搜索引擎关注行为因素,包括网站在社交网络上的活动。Open Graph 协议充分利用了社交网络在搜索引擎优化方面的力量,提高了用户在其个人资料中分享的指向您网站的链接的点击率。这对您的网站在网络上的可见性和吸引力有重大影响。

Open Graph协议由 Facebook 创建。为什么要使用它?为了使社交网络中的网页预览可见。从全球意义上讲,是为了实现语义网的理念。即标准化万维网上的所有信息,使其适合自动处理。

为何实施 Open Graph

现在,大多数流行的社交网络和通讯应用都支持 Open Graph:

Facebook ;
推特;
Pinterest;
Viber;
电报;
WhatsApp。
该协议还可以帮助AdSense 的“推荐内容块”功能更好地发挥作用。

让我们仔细看看如果您的网站上没有实施 Open Graph 会发生什么情况。

Facebook 不知道预览中要加载哪些元素,元标签新手 柬埔寨 whatsapp 号码数据 所以它会从页面上截取任意图片(甚至可以截取广告横幅)。此外,它还会完全加载标题。

带有标记的页面的几个示例。

柬埔寨 whatsapp 号码数据

将在预览中显示的图像的

 

预览看起来更有吸引力且更易于点击,因为标记包含我们选择的图像、标题和描述。

重要提示:如果需要 网页设计:打造令人印象深刻的在线形象的 6 个技巧 标题和描述可以与网页的标题和描述不同。

Open Graph 允许您为社交网络中的页面预览生成所需的片段。

基本开放图谱协议标签
标记提供了许多属性(标签)。元标签新手主要有:

1. og:title – 标题 bqb 目录 表征页面,对外显示。

 

2. og:type – 页面主要内容的类型。

例如:

 

3. og:image – 将在预览中显示的图像的 URL。

 

og:url 是网页的规范 URL 。它用作对象标识符(网页)。例如:

<meta property=”og:url” content=”https://www.site.ru/example/” />
如果仅使用基本属性的示例代码:

1. og:site_name – 指定在预览中显示的站点名称。

 

2. og:description – 页面描述(该元素并不总是加载。元标签新手有时,例如,Facebook 可能不会在预览中显示描述。)

 

附加可选标签
1. og:locale – 以“language_REGION”格式指定语言和地区。例如:

<meta property=”og:locale” content=”fr_FR” />
如果未指定此属性,则默认语言和地区为“en_US”。

语言代码应设置为ISO 639-1 ,国家代码应设置为ISO 3166-1。

2. og:audio – 指定音频文件的 URL。

3. og:video – 指定视频文件的 URL。例如:

<meta property=”og:video” content=”https://site.com/video/example.mp4″ />
如何使用高级标签属性
标签可以包含高级属性。例如, og:image 具有以下属性:

og:image:secure_url – 指定图像的 URL,通过 HTTPS 运行;
og:image:width – 宽度的像素数;
og:image:height – 高度的像素数;
og:image:type – 指定图像的MIME类型(现有 MIME 类型的列表)。
在代码中它看起来像这样:

如果要一次性设置多张图片的分辨率,可以使用数组。顶部的第一个父标签将分配一个附加属性。

例如,您有三幅具有不同分辨率的图像 image1、image2、image3。代码如下所示:

也就是说,image1的尺寸为800×600,image2高500像素,并且宽度未指定,image3没有指定尺寸。

标记允许您通过指定替代图像等方式为自己提供保障。如果第一个 URL 不可用,则第二个图像将加载到预览中。顺序(优先级)是从上到下。

滚动至顶部