Open Graph协议是由Facebook推出的元数据协议

最新推荐文章于 2025-05-17 09:23:22 发布
最新推荐文章于 2025-05-17 09:23:22 发布
阅读量355 收藏 3
点赞数 5
分类专栏： html 文章标签： facebook dreamweaver
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54645949/article/details/147948407
版权

参考资料

  1. Meta自动刷新
  2. Meta字符编码声明
  3. meta‌搜索引擎索引规则
  4. Open Graph协议是由Facebook推出的元数据协议
  5. Meta Twitter 卡片
  6. Meta 文档类型声明（DOCTYPE）是HTML文档开头的声明
  7. Meta 暗色模式适配
  8. Meta标签禁止电话号码自动识别

简介：
Open Graph协议是由Facebook推出的元数据协议，用于标准化网页内容在社交网络中的呈现方式。它通过在网页HTML头部添加特定meta标签来实现。

功能：

  1. 控制内容在社交平台分享时的显示形式

  2. 定义丰富的分享预览（标题、描述、图片等）

  3. 支持内容类型标记（文章、视频、产品等）

  4. 实现跨平台内容一致性展示

基本语法：

 

  1. <meta property="og:属性名" content="属性值" />
 

核心属性：
 

  •  
    og:title - 内容标题
     
  •  
    og:type - 内容类型（article/video/website等）
     
  •  
    og:url - 规范URL
     
  •  
    og:image - 预览图片URL
     
  •  
    og:description - 内容描述
     
  •  
    og:site_name - 网站名称
     
 

示例代码：
 

 

  1. <head>
  2.   <meta property="og:title" content="示例文章" />
  3.   <meta property="og:type" content="article" />
  4.   <meta property="og:url" content="https://example.com/article" />
  5.   <meta property="og:image" content="https://example.com/image.jpg" />
  6.   <meta property="og:description" content="这是示例文章的描述" />
  7.   <meta property="og:site_name" content="示例网站" />
  8. </head>
 

注意事项：
 

  1.  
    图片推荐尺寸至少1200x630像素
     
  2.  
    必须包含title、type、url、image四个基本属性
     
  3.  
    URL需使用绝对路径
     
  4.  
    不同平台可能支持不同的扩展属性
     
  5.  
    可使用Facebook分享调试工具验证效果
     
  6.  
    内容更新后可能需要重新抓取才能生效
     

                

        

    

  



    



                



	

		

			

				
					
open graph协议

				
			

			

				

					蛐蛐的博客
				

				

					07-04
					
					464
					
				

			

		

		

			
				
文档：The Open Graph protocolOpen Graph 协议使任何网页都可以成为社交图中的丰富对象。这在 Facebook 上用于允许任何网页具有与 Facebook 上的任何其他对象相同的功能。要将网页变成图形对象，需要将基本元数据添加到页面。这基于 RDFa协议的初始版本，这将在网页中放置额外的标签。每个页面的四个必需属性是：


以下属性对于任何对象都是可选的：


某些属性可以附加额外的元数据。og:image属性具有一些可选的结构化属性：


如果一个标签可以有多个值...

			
		

	



                

            
              



	

		

			

				
					
Open Graph 分享预览

				
			

			

				

					magicpince的专栏
				

				

					08-18
					
					2819
					
				

			

		

		

			
				
产品部这周给了我如下需求，在twitter,skype,telegram中用户分享网站的链接时会生成一张小卡片

大概是这个这样子



那么我们如何完成这个需求呢？

Facebook定义了名为Open Graph 协议，网页在meta标签定义OG的属性，而社交软件则读取meta中的属性，显示卡片

名称
			说明
		og:url
			对象的网址，即权威链接。通常是放置属性标签的页面的网址...

			
		

	



              


  
              

                


	

		

			

				
					
The Open Graph Protocol（开放图谱协议）

				
			

			

				

					旧梦
				

				

					03-14
					
					411
					
				

			

		

		

			
				
当今互联网时代，社交媒体成为了人们分享信息和互动的主要平台之一。为了优化网站在社交媒体上的展示，提高网站内容的可分享性和可访问性，开放图谱协议（The Open Graph Protocol）应运而生。开放图谱协议是一种开放标准，旨在帮助网站确定如何在社交媒体上分享页面的内容。它由Facebook于2010年首次推出，后来成为开放社交图谱的一部分，支持包括Facebook、Twitter、LinkedIn等在内的多个社交媒体平台。该协议使用HTML标签来定义页面的元数据，以提供更丰富的社交分享信息。

			
		

	





	

		

			

				
					
开源神器：Open Graph Builder——打造完美网页元数据的得力助手

				
			

			

				

					gitblog_00037的博客
				

				

					06-26
					
					519
					
				

			

		

		

			
				
开源神器：Open Graph Builder——打造完美网页元数据的得力助手
 open-graphLibrary that assists in building Open Graph meta tags项目地址:https://gitcode.com/gh_mirrors/op/open-graph 在当今信息爆炸的时代，每一个网站都希望能在社交媒体上获得最佳展示效果，而这离不开强大的Ope...

			
		

	



		

			
		



	

		

			

				
					
探索Laravel OpenGraph：轻松获取网页元数据的利器

				
			

			

				

					gitblog_00880的博客
				

				

					08-29
					
					879
					
				

			

		

		

			
				
探索Laravel OpenGraph：轻松获取网页元数据的利器
 OpenGraphA Laravel package to fetch Open Graph data of a website.项目地址:https://gitcode.com/gh_mirrors/openg/OpenGraph 在当今的互联网时代，网页元数据（Metadata）对于搜索引擎优化（SEO）和社交媒体分享至关重要...

			
		

	





	

		

			

				
					
前端需要了解的：开放图谱协议（The Open Graph protocol）

				
			

			

				

					厦门在乎科技
				

				

					11-25
					
					1017
					
				

			

		

		

			
				
Open Graph 是一种互联网协议，最初由 Facebook 创建，用于标准化网页中元数据的使用，使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容。

什么是 Open Graph Protocol（开放图谱协议）

  Open Graph Protocol（开放图谱协议），简称OG 协议。它是 Facebook 在 2010 年 F8 开发者大会公布的一种网页元信息（Meta Information）标记协议，属于 Meta Tag （Meta 标签）的范畴。

是一种为社交分享而生的 M.

			
		

	





	

		

			

				
					
OpenGraph 项目使用教程

				
			

			

				

					gitblog_00870的博客
				

				

					08-27
					
					1004
					
				

			

		

		

			
				
OpenGraph 项目使用教程
 OpenGraphA Laravel package to fetch Open Graph data of a website.项目地址:https://gitcode.com/gh_mirrors/openg/OpenGraph 项目介绍
OpenGraph 是一个用 Python 编写的库，用于解析网页中的 Open Graph 协议信息。Open Gra...

			
		

	





	

		

			

				
					
VuePress 博客之 SEO 优化（四） Open Graph protocol

				
			

			

				

					weixin_55475226的博客
				

				

					03-19
					
					677
					
				

			

		

		

			
				
前言
在 《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。
本篇讲讲 SEO 优化中的 Open Graph protocol。
meta 标签
如果我们打开思否任意一篇文章，比如这篇《VuePress 博客优化之增加 Vssue 评论功能》，查看 DOM 元素，我们可以在 head 中找到这样一段 meta 标签：

我们可以发现 name 都是以 og: 开头，这是什么意思呢，又是什么

			
		

	





	

		

			

				
					
Next.js流量教程：实现 Open Graph 标签

				
			

			

				

					二进制的梦想
				

				

					12-16
					
					1220
					
				

			

		

		

			
				
Open Graph 标签是一组用于社交媒体平台的元数据，旨在提供网页的详细信息，如页面标题、描述、图片等内容。Facebook 在 2010 年推出了 Open Graph 协议，旨在改善内容共享和展示。随着时间的推移，越来越多的社交平台（如 Twitter、LinkedIn 等）也支持 Open Graph 标签，从而使得这些标签成为网页优化的标准之一。通过正确设置 Open Graph 标签，你可以确保在社交媒体上分享你的内容时，获得最佳的可视化展示效果。og:title：网页的标题。

			
		

	





	

		

			

				
					
p5-Facebook-OpenGraph: Facebook 图形协议的 Perl 实现

				
			

			

				

					
				

			

		

		

			
				
资源摘要信息:"Facebook Open Graph协议是一套由Facebook开发的社交图谱协议，它允许网站开发者将网页内容与Facebook的社交网络相结合。通过使用Open Graph标记，开发者可以在网页中添加特定的元数据，这样当用户将...

			
		

	





	

		

			

				
					
p5-Facebook-OpenGraph

				
			

			

				

					02-05
				

			

		

		

			
				
Facebook Open Graph（OG）是一种元数据标准，用于使网站内容可被Facebook识别和分享，从而增强在社交媒体上的互动性。Perl模块“p5-Facebook-OpenGraph”则提供了与这个API进行交互的工具，使得Perl开发者能够轻松...

			
		

	





	

		

			

				
					
php-open-graph：轻松实现Open Graph协议的PHP OOP工具

				
			

			

				

					
				

			

		

		

			
				
- **open-graph-protocol**: 即Open Graph协议，是由Facebook推出的一种协议，用于控制网页在社交网络上的呈现方式。 - **treeware**: 这个标签可能是指的某些软件项目宣传自己是“Treeware”，意味着所有通过软件或...

			
		

	





	

		

			

				
					
基于大数据分析的Facebook隐私保护策略

				
			

			

				

					weixin_44672358的博客
				

				

					05-17
					
					771
					
				

			

		

		

			
				
基于大数据分析的 Facebook 隐私保护策略，涵盖了数据收集与处理、用户隐私设置、数据安全与加密、第三方应用审查、用户教育与意识提升、政策与法规遵循等多个方面。通过这些策略，Facebook 为用户提供了一个更加安全、可靠的网络环境。同时，Facebook 也在不断探索和创新隐私保护技术，以应对日益复杂的网络环境，确保用户隐私得到最大程度的保护。

			
		

	





	

		

			

				
					
C# 实现雪花算法（Snowflake Algorithm）详解与应用

				
			

			

				

					net core ，前端 ，python 全栈开发
				

				

					05-15
					
					1712
					
				

			

		

		

			
				
雪花算法（Snowflake ID）是一个分布式唯一 ID 生成算法，旨在生成具有高性能、唯一性且按时间排序的 ID。它由 Twitter 在其早期分布式系统中提出，并迅速成为生成全局唯一 ID 的标准方案。雪花算法通过将 64 位的整数分为多个部分来编码信息。每一部分代表不同的含义，如时间戳、机器 ID、序列号等，确保生成的 ID 不仅唯一且具有一定的时间顺序。

			
		

	





	

		

			

				
					
VulnHub | Breach - 1

				
			

			

				

					Blue17 の 小窝
				

				

					05-16
					
					1077
					
				

			

		

		

			
				
0x01：Breach - 1 靶场描述0x01：Breach - 1 靶场描述0x0101：靶场简介"Breach 1.0" 是一个适合新手到中级玩家的 boot2root/CTF 挑战。它要求参与者进行扎实的信息收集和坚持不懈的探索。该靶场的关键信息如下（好像没有目标嘿）：目标 VM 的静态 IP 地址是 192.168.110.140，需要将主机的仅主机适配器配置到该子网。该靶场是该系列的第一个挑战，旨在提高参与者的渗透测试技能。如果遇到问题，可以联系发布者，其 Twitter 账号为。

			
		

	





	

		

			

				
					
疫情防控专题网站系统 2025免费毕设附带论文 SpringBoot+Vue.js

				
			

			

				

					05-19
				

			

		

		

			
				
2025免费毕设附带论文 SpringBoot+Vue.js

启动教程: https://www.bilibili.com/video/BV11ktveuE2d/?share_source=copy_web
二开教程：https://www.bilibili.com/video/BV18i421i7Dx/?share_source=copy_web
讲解视频：https://www.bilibili.com/video/BV1Tb421n72S/?share_source=copy_web

			
		

	





	

		

			

				
					
C语言数组图像数据转图片

				
			

			

				

					05-19
				

			

		

		

			
				
C语言数组图像数据转图片

			
		

	





	

		

			

				
					
基于深度学习的癫痫识别软硬件协同设计.zip

					
最新发布

				
			

			

				

					05-19
				

			

		

		

			
				
基于深度学习的癫痫识别软硬件协同设计.zip

			
		

	





	

		

			

				
					
毕业设计-农场小程序 1.7.6-整站商业源码.zip

				
			

			

				

					05-19
				

			

		

		

			
				
毕业设计-农场小程序 1.7.6-整站商业源码.zip

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值