graph meta_Facebook Open Graph META标签

graph meta

It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One problem I've always found with sharing URLs on Facebook is that you often have no control over the image and description text that accompany the URL.  Had I known about Facebook Open Graph API, I would've known the solution to that problem.

众所周知，Facebook已成为所有类型网站的主要流量驱动因素。 如今，甚至大型公司也将消费者引导至其Facebook页面，而不是直接将其引导至公司网站。 当然，每个网站上都有Facebook“赞”和“推荐”小部件。 我在Facebook上共享URL时经常发现的一个问题是，您通常无法控制URL附带的图像和描述文本。 如果我知道Facebook Open Graph API，就会知道该问题的解决方案。

Facebook's Open Graph protocol allows for web developers to turn their websites into Facebook "graph" objects, allowing a certain level of customization over how information is carried over from a non-Facebook website to Facebook when a page is "recommended", "liked", or just generally shared.  The information is set via custom META tags on the source page.  Let's take a look at the different META tags Facebook uses to allow you to customize how your website is shared.

Facebook的Open Graph协议允许Web开发人员将其网站转换为Facebook“图形”对象，从而在“推荐”，“点赞”页面时，允许一定程度的自定义，以了解如何将信息从非Facebook网站转移到Facebook。 ，或只是一般共享。 该信息通过源页面上的自定义META标签设置。 让我们看一下Facebook用于允许您自定义网站共享方式的不同META标签。

View Demo 观看演示

All of Facebook's Open Graph META tags are prefixed with og:, then continued with more specific the specific property to be set.  The data relative to the property set goes within the content attribute:

Facebook的所有Open Graph META标签都以og:为前缀，然后继续进行更具体的设置。 与属性集相关的数据位于content属性内：

<meta property="og:{tagName}" content="{tagValue}"/> 

Using this simple META tag strategy, you can tell Facebook what images, text, and more to use when sharing your webpage.  Let's review a few key META tags!

使用这种简单的META标签策略，您可以告诉Facebook共享网页时要使用哪些图像，文本等。 让我们回顾一些关键的META标签！

Facebook开放图元标记 (Facebook Open Graph Meta Tags)

图片 (image)

The image META tag directs Facebook to use the specified image when the page is shared:

共享页面时，图像META标签指示Facebook使用指定的图像：

<meta property="og:image" content="https://davidwalsh.name/wp-content/themes/klass/img/facebooklogo.png"/>

It's best to use a square image, as Facebook displays them in that matter. That image should be at least 600px wide in any of the usually supported image forms (JPG, PNG, etc.)

最好使用正方形图片，因为Facebook会在此情况下显示它们。 在任何通常支持的图像格式(JPG，PNG等)中，该图像的宽度至少应为600px

标题 (title)

The title to accompany the URL:

URL附带的标题：

<meta property="og:title" content="Facebook Open Graph META Tags"/>

In most cases, this should be the article or page title.

在大多数情况下，这应该是文章或页面标题。

网址 (url)

The URL should be the canonical address for the given page:

该URL应该是给定页面的规范地址 ：

<meta property="og:url" content="https://davidwalsh.name/facebook-meta-tags"/>

Familiarize yourself with the canonical LINK type if you aren't aware of its purpose -- it could help your SEO out greatly!

如果您不了解LINK类型的用途，请熟悉一下它-它可以大大帮助您的SEO！

site_name (site_name)

Provides Facebook the name that you would like your website to be recognized by:

向Facebook提供您希望您的网站被以下人员识别的名称：

<meta property="og:site_name" content="David Walsh Blog"/>

This is very useful as Facebook may have no way of knowing outside of this META tag.

这非常有用，因为Facebook可能无法在此META标签之外知道。

类型 (type)

Provides Facebook the type of website that you would like your website to be categorized by:

向Facebook提供您希望您的网站归类的网站类型：

<meta property="og:type" content="blog"/>

Read the complete list of website types to best categorize your website.

阅读网站类型的完整列表，以对您的网站进行最佳分类。

更多Facebook Open Graph META标签 (More Facebook Open Graph META Tags)

The META tags provided above are just a few of the special Open Graph META tags sniffed by Facebook.  Open Graph also specified META tags for:

上面提供的META标签只是Facebook嗅探的一些特殊的Open Graph META标签。 Open Graph还为以下项指定了META标签：

• Facebook Application-specific settings, if your website also has a Facebook app
  特定于Facebook应用程序的设置(如果您的网站还具有Facebook应用程序)
• Activities
  活动项目
• Businesses
  业务领域
• Groups
  团体
• Locations
  地点

Visit the Facebook Open Graph page to retrieve more details about each META tag and its intended information.  Facebook also provides a Lint tool to help you validate what you're sending!

访问Facebook Open Graph页面，以获取有关每个META标签及其预期信息的更多详细信息。 Facebook还提供Lint工具，以帮助您验证发送的内容！

View Demo 观看演示

The Open Graph protocol is a great way to not only share a page's information but to also control how your site's information is shared.  Using these META tags could be the difference in attracting just a few visitors from Facebook or attracting loads of visitors because your shared links provide useful keywords and imagery!

Open Graph协议是一种很好的方式，不仅可以共享页面信息，还可以控制如何共享站点信息。 使用这些META标签可能与从Facebook吸引少量访问者或吸引大量访问者有所不同，因为您的共享链接提供了有用的关键字和图像！

翻译自: https://davidwalsh.name/facebook-meta-tags

graph meta