国外开放知识图谱
It can take a lot of time to build content and maintain a website. How can we make sure our content stands out when getting shared on social feeds around the internet?
建立内容和维护网站可能需要很多时间。 在互联网上的社交供稿上共享时，如何确保我们的内容脱颖而出？
什么是开放图？ (What is Open Graph?)
Open Graph is an internet protocol that was originally created by Facebook to standardize the use of metadata within a webpage to represent the content of a page.
Open Graph是一种互联网协议，最初由Facebook创建，旨在标准化网页中元数据的使用以表示网页的内容。
Within it, you can provide details as simple as the title of a page or as specific as the duration of a video. These pieces all fit together to form a representation of each individual page of the internet.
您可以在其中提供与页面标题一样简单的细节，或与视频持续时间一样具体的细节。 这些部分全部组合在一起，以代表互联网的每个单独页面。
我为什么需要它？ (Why do I need it?)
Content on the internet is typically created with at least one goal in mind -- to share it with others. This might not necessarily matter if you’re just sending it to one friend, but if you want to share it or want it to be shared on any social network or app that utilizes rich previews, you’ll want that preview to be as effective as possible.
互联网上的内容创建时通常会考虑至少一个目标-与他人共享。 如果您只是将其发送给一个朋友，这可能不一定重要，但是如果您想共享它或希望在使用丰富预览功能的任何社交网络或应用上共享它，则希望该预览功能同样有效尽可能。
This will help encourage people to check out your content and inevitably click through to your content.
这将有助于鼓励人们签出您的内容，并不可避免地点击进入您的内容。
如果我没有它会怎样？ (What happens if I don’t have it?)
Most social networks by default will try to make their best effort in creating a preview of your content. This more often than not doesn’t go so well.
默认情况下，大多数社交网络都将尽最大努力创建内容预览。 这往往不是很顺利。
Take for instance my website colbyfayock.com.
以我的网站colbyfayock.com为例 。
It correctly grabs the title of my page and the description, but it's not the most enticing looking tweet in a feed.
它正确地抓住了我页面的标题和描述，但这不是提要中最吸引人的推文。
Contrast that to the preview of a single post and we see a different story.
与单个帖子的预览相比，我们看到了一个不同的故事。
So what happens if you don’t have open graph tags? Nothing bad will happen, but you won’t be taking advantage of some of the features that help make your content stand out next to the loads of other content getting posted on the internet.
那么，如果您没有开放式图形标签怎么办？ 不会有任何不好的事情发生，但是您将无法利用某些使您的内容脱颖而出的功能，使其比其他在互联网上发布的内容更能脱颖而出。
从开放图的基础开始 (Starting with the basics of open graph)
The four basic open graph tags that are required for each page are og:title, og:type, og:image, and og:url. These tags should be unique for each page you serve, meaning your homepage’s tags should all be different from your blog post article’s page.
每个页面所需的四个基本的开放图标记是og:title ， og:type ， og:image和og:url 。 这些标记对于您所服务的每个页面都应该是唯一的，这意味着您首页的标记应与博客文章的页面均不同。
While it should be pretty straightforward, here’s a breakdown of what each of the tags mean:
尽管它应该非常简单，但是下面是每个标签的含义的细分：
og:title: The title of your page. This is typically the same as your webpage's<title>tag unless you’d like to present it differently.og:title：页面的标题。 这通常与网页的<title>标记相同，除非您希望以不同的方式呈现它。og:type: The “type” of website you have. I’ll explain more in the next section, though a generic “type” is “website”.og:type：您拥有的网站的“类型”。 尽管通用的“类型”是“网站”，但我将在下一部分中进行更多说明。og:image: This should be a link to an image that you’d like to represent your content. It should be a high resolution image that the social networks will use in their feeds.og:image：这应该是您想要表示内容的图像的链接。 这应该是社交网络在供稿中使用的高分辨率图像。og:url: This should be the URL of the current page.og:url：这应该是当前页面的URL。
When placing a tag on your website, you should place it in the <head> along with any other metadata. The tag used will be a <meta> tag and should look like this pattern:
在网站上放置标签时，应将其与任何其他元数据一起放在<head> 。 使用的标记将是<meta>标记，并且应类似于以下模式：
<meta property=“[NAME]” content=“[VALUE]” />So if I were to create a set four basic open graph tags for my website, colbyfayock.com, it might look like:
因此，如果我要为我的网站colbyfayock.com创建一组四个基本的开放式图形标签，它可能看起来像：
<meta property="og:title" content="Colby Fayock - A UX Designer & Front-end Developer Blog" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/static/website-social-card-44070c4a901df708aa1563ac4bbe595a.jpg" />
<meta property="og:url" content="https://www.colbyfayock.com" />网站开放图类型 (Website open graph type)
The open graph protocol has a few variations of the “type” of website it supports. This includes types like website, article, or video.
开放图式协议对其支持的网站“类型”有一些变体。 这包括网站，文章或视频之类的类型。
When setting up your open graph tags, you’ll want to have an idea of which type will make more sense for your website. If your page is focused on a single video, it probably makes sense to use the type “video”. If it’s a general website with no specific vertical, you would probably just want to use the type “website”.
设置开放式图形标签时，您需要了解哪种类型对您的网站更有意义。 如果您的页面只关注单个视频，则可以使用“视频”类型。 如果它是没有特定行业的常规网站，则您可能只想使用“网站”类型。
Similar to the others, this is unique for each page. So if your homepage is "website,” you could always have another page of type “video”.
与其他页面相似，每个页面都是唯一的。 因此，如果您的主页是“网站”，那么您始终可以拥有另一个类型为“视频”的页面。
So if I were to create an open graph type for my website, it might look like the following on my homepage:
因此，如果我要为我的网站创建一个开放图形类型，它可能类似于我的主页上的以下图形：
<!-- colbyfayock.com -->
<meta property=“og:type” content=“profile” />When navigating to a blog post, it would look like:
导航到博客文章时，它看起来像：
<!-- https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/ -->
<meta property=“og:type” content=“article” />You can find the most common open graph website types on the open graph webpage: https://ogp.me/#types
您可以在打开图网页上找到最常见的打开图网站类型： https : //ogp.me/#types
其他一些值得添加的开放图标记 (Some other open graph tags that are worth adding)
Though you’ll generally be okay with the basics, here are a few more that would be worth adding:
尽管您通常对基础知识还可以，但是这里还有一些值得补充的地方：
og:description: A description of your page. Similarly toog:title, this may be the same as your website’s<meta type=“description”>tag, unless you’d like to present it differently.og:description：页面描述。 与og:title类似，它可能与您网站的<meta type=“description”>标记相同，除非您希望以不同的方式呈现它。og:locale: If you want to localize your tags, it would probably make sense to include locale. The format islanguage_TERRITORY, where the default isen_US.og:locale：如果要本地化标签，则包括区域设置可能很有意义。 格式为language_TERRITORY，默认值为en_US。og:site_name: The name of the overall website your content is on. If you're on a blog post page, you might have atitleusing that blog post’s title, where thesite_namewould be the name of your blog.og:site_name：您的内容所在的整个网站的名称。 如果你是一个博客文章页面上，你可能有一个title使用该博客文章的标题，其中site_name将是你的博客的名称。og:video: Have a video that supports your content? Here’s a chance to include it. Add a link to your video using this tag.og:video：是否有支持您内容的视频？ 这是一个包含它的机会。 使用此标记将链接添加到您的视频。
These tags will be added in the same pattern as before:
这些标签的添加方式与以前相同：
<meta property=“[NAME]” content=“[VALUE]” />使用开放图的Twitter和其他社交媒体网络 (Twitter and other social media networks using open graph)
Most of the social networks adhere to the basics of open graph standards, but a few of them also include their own extension to help customize the look and feel within their ecosystem.
大多数社交网络都遵循开放图标准的基础，但其中一些还包括自己的扩展，以帮助自定义其生态系统中的外观。
Twitter for instance, allows you to specify twitter:card, which is the type of “card” you can use when they show your website. At this time, their card types include:
例如，Twitter允许您指定twitter:card ，这是当他们显示您的网站时可以使用的“卡”类型。 目前，他们的卡类型包括：
- summary 摘要
- summary_large_image summary_large_image
- app 应用程式
- player 播放器
This will help you choose how your links are used in their feed. If you choose summary_large_image for instance, Twitter will show your links with big high resolution images as long as you’re providing it in the in the og:image tag.
这将帮助您选择在其供稿中使用链接的方式。 例如，如果您选择summary_large_image ，则只要您在og:image标记中提供链接，Twitter就会显示带有高分辨率图片的链接。
Here are some quick references to the documentation of how to use open graph tags with some of the social media sites:
以下是一些有关如何在某些社交媒体网站上使用开放图标记的文档的快速参考：
Twitter: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
Twitter： https ： //developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
Facebook: https://developers.facebook.com/docs/sharing/webmasters/
脸书： https : //developers.facebook.com/docs/sharing/webmasters/
Pinterest: https://developers.pinterest.com/docs/rich-pins/overview/?
Pinterest： https : //developers.pinterest.com/docs/rich-pins/overview/吗？
领英(LinkedIn)： https : //www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin? lang =en
打开图中的图像 (Images in open graph)
While adding your image as og:image should often be enough, sometimes it can be challenging to get your image to show up correctly. If you seem to be running into trouble, the open graph standard includes a few image tags such as og:image:url vs og:image:secure_url as well as the og:image:width and og:image:height.
虽然将图像添加为og:image通常应该足够了，但有时使图像正确显示可能会遇到挑战。 如果您似乎遇到麻烦，开放图标准会包含一些图像标签，例如og:image:url和og:image:secure_url以及og:image:width和og:image:height 。
Try to make sure you’re following all of the notes and examples in the open graph documentation. Additionally, some of the social networks have image requirements. Twitter for instance requires a ratio of 2:1 with a minimum size of 300x157 and a maximum size of 4096x4096 that’s under 5MB and of JPG, PNG, WEBP or GIF format.
尝试确保您遵循打开的图形文档中的所有注释和示例 。 另外，一些社交网络具有图像要求。 例如，Twitter要求比例为2：1，最小尺寸为300x157，最大尺寸为4096x4096，小于5MB，格式为JPG，PNG，WEBP或GIF。
If you’re stuck, test your tags using the social media network’s tools to see if you can find the issue.
如果您遇到问题，请使用社交媒体网络的工具测试代码，以查看是否可以找到问题。
测试您的开放图标签 (Testing your open graph tags)
Luckily, our favorite social networks also provide tools to help us debug our tags. Once you make sure that your tags are actually showing up in the source code of your website, you’ll be able to preview how your website will look in the feed.
幸运的是，我们最喜欢的社交网络还提供了可帮助我们调试标签的工具。 一旦确定您的标签实际显示在网站的源代码中，便可以预览网站在Feed中的外观。
Pinterest: https://developers.pinterest.com/tools/url-debugger/
Pinterest： https ： //developers.pinterest.com/tools/url-debugger/
进一步挖掘开放图形标签 (Digging further into open graph tags)
While most of these should cover a basic website, there are a few more tags that might help you and your business’s discoverability throughout social networks.
尽管其中大多数应涵盖基本网站，但还有其他一些标签可以帮助您和您的企业在整个社交网络中被发现。
If you’re interested in diving in more, the documentation does a great job at providing a list of all of the available tags for you to use.
如果您有兴趣进一步研究， 该文档可以很好地为您提供所有可用标签的列表。
我可以举个例子吗？ (Can I get an example?)
If you’re simply looking for an example to get started, here’s what you should end up with when setting up your tags for a blog post:
如果您只是想寻找一个入门示例，那么为博客文章设置标签时应遵循以下步骤：
<meta property="og:site_name" content="Colby Fayock" />
<meta property=“og:title” content=“Anyone Can Map! Inspiration and an introduction to the world of mapping - Colby Fayock" />
<meta property="og:description" content="Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of…" />
<meta property="og:url" content="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/" />
<meta property="og:type" content="article" />
<meta property="article:publisher" content="https://www.colbyfayock.com" />
<meta property="article:section" content="Coding" />
<meta property="article:tag" content="Coding" />
<meta property="og:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="og:image:secure_url" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="twitter:site" content="@colbyfayock" />寻找其他方式来优化和分析您的内容？ (Looking for other ways to optimize and analyze your content?)
How to Add a Social Media Image to Your Github Project Repository
How to Make Sense of Google Analytics and the Traffic to Your Website
How to set up and track YouTube Channel performance with Google Analytics
翻译自: https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/
国外开放知识图谱
3973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
