Facebook Open Graph META Tags
来源:互联网 发布:阿里云 usb调试 编辑:程序博客网 时间:2024/05/17 18:11
http://davidwalsh.name/facebook-meta-tags
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'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.
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:
<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!
Facebook Open Graph Meta Tags
image
The image META tag directs Facebook to use the specified image when the page is shared:
<meta property="og:image" content="http://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.)
title
The title to accompany the 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:
<meta property="og:url" content="http://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!
site_name
Provides Facebook the name that you would like your website to be recognized by:
<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.
type
Provides Facebook the type of website that you would like your website to be categorized by:
<meta property="og:type" content="blog"/>
Read the complete list of website types to best categorize your website.
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:
- Facebook Application-specific settings, if your website also has a Facebook app
- 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!
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!
- Facebook Open Graph META Tags
- Magento添加Facebook/Pinterest open graph meta,Google商店Feed
- Facebook搬运工:Open Graph Permissions
- Facebook为Open Graph添加新功能Mention Tagging
- What are meta tags?
- Facebook Open Graph就像兴奋剂 创业公司需谨慎服用
- 从iOS端Facebook分享的预览效果到Open Graph Protocol(开放内容协议)
- SEO优化开放内容协议:meta property=og(Open Graph Protocol)
- Graph search (facebook) 转
- Facebook Graph Search
- Facebook Graph API使用介绍
- Facebook Graph API 开发常见问题
- Facebook Graph API 开发常见问题
- Open Scene Graph
- Facebook Open Platform搭建
- What Are HTML Meta Tags? (Meta Tag Tutorial)
- Open Scene Graph 内存管理
- Core Concept-Open Graph 01
- Leetcode: Letter Combinations of a Phone Number
- Unique Paths
- 在AJAX返回结果中循环执行另一个AJAX
- Merge K Sorted List
- Unique Paths II
- Facebook Open Graph META Tags
- What does appending “?v=1” to CSS and Javascript URLs in link and script tags do?
- VirtualBox如何配置Bridge和Host-Only虚拟网卡
- Optimize Facebook Sharing
- Creating “Share This on Facebook/Twitter” Links
- 随笔20141103
- How To Set Up Twitter Cards
- java.net.SocketException: Broken pipe
- Get current URL in JavaScript?