大纲介绍

Open Graph protocol 是 facebook 2010 年推出的一套规范, 用途是通过一些简单的 meta tag 来描述网站的内容。

这样在 sharing 网址的时候就可以拉出一些资料和图片, 而不只是单调的一个 link.

学习资源

什么是 Open Graph 标签？不懂你还做什么社交营销优化？！

视频介绍

Generator

Facebook tester

Twitter tester

LinkedIn tester

小困惑

关于 prefix 是会有一点点 confuse 的, 有些网站干脆就没有放.

Meaning of HTML prefix attribute (Open Graph Protocol)?

OpenGraph prefix in header necessary?

Do we need open graph prefix in header?

How to successfully implement og:image for the LinkedIn

How to integrate OGP into a webpage (有教怎样写 prefix)

最后我的写法是

html 写

header 和 og:Type 的写发

比如 og:type="music.song", namespace 是 music

所以 head prefix="music: https://ogp.me/ns/music"

注意事项

WhatsApp 图片必须小过 300kb 不然会出不来哦.

Provide an image for WhatsApp link sharing

Open Graph protocol的更多相关文章

  1. Open Graph Protocol(开放内容协议)

    最近在整理公司hexo博客的时候突然发现在页面 head 里面有一个这个奇怪的 meta Open Graph Protocol(开放内容协议) 开放内容协议一种新的HTTP头部标记,即这种协议可以让 ...

  2. The Open Graph protocol

    https://www.quora.com/What-does-this-tag-mean-html-lang-en-US-prefix-og-http-ogp-me-ns https://stack ...

  3. Python 资源大全中文版

    Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Python 资源列 ...

  4. Html 移动web开发细节处理

    1.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影.备注:transparent的属性值在and ...

  5. 【转载】移动web开发经验总结

    本文出自: http://blog.163.com/hsb001_mobile/blog/static/15524028020111177221254/ 1.-webkit-tap-highlight ...

  6. 深入理解css系列：meta标签

    积累太少,时间管理技巧欠缺,所以导致了博客更新的速度迟缓.学习中成长,成长中学习.加油吧!最近在做h5的项目,对于meta标签层出不穷的各式属性值有点头晕,所以查资料整理了下. 关键字:meta na ...

  7. [转载]Python 资源大全

    原文链接:Python 资源大全 环境管理 管理 Python 版本和环境的工具 p – 非常简单的交互式 python 版本管理工具. pyenv – 简单的 Python 版本管理工具. Vex  ...

  8. python常用库

    本文由 伯乐在线 - 艾凌风 翻译,Namco 校稿.未经许可,禁止转载!英文出处:vinta.欢迎加入翻译组. Awesome Python ,这又是一个 Awesome XXX 系列的资源整理,由 ...

  9. WEBAPP开发技巧(手机网站开发注意事项)

    以下只是我个人得总结,如果你有更好的建议,请留言,一起共勉进步!!- -! 1.要响应式开发web,也就是页面必须自适应屏幕大小,可以采用流体布局,如之前的文章(自适应宽度布局),其他具体的小问题可以 ...

  10. Python框架、库以及软件资源汇总

    转自:http://developer.51cto.com/art/201507/483510.htm 很多来自世界各地的程序员不求回报的写代码为别人造轮子.贡献代码.开发框架.开放源代码使得分散在世 ...

随机推荐

  1. jQuery 插件autocomplete 应用

    项目中有时会用到自动补全查询,就像Google搜索框.淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能. auto ...

  2. Django 自定义创建密码重置确认页面

    要实现上述功能,你需要修改模板文件以添加"忘记密码"链接,并创建新的视图函数来处理密码丢失修改页面.验证和密码修改.下面是你可以进行的步骤: 1. 修改模板文件 在登录页面的表单下 ...

  3. 打开电脑属性 设置 windows

    组合键:win+R,输入sysdm.cpl,然后运行. 右键"此电脑",选择属性,然后点击高级系统设置. 组合键:win+Pause/Break. 在命令提示符中输入SystemP ...

  4. RHCA rh442 001 调优本质 调优方法 监控

    调优是一种感知 调优按照成本和性能 一.架构及调优 二.代码及调优 三.配置类调优 从调优效果和成本成正比 设计电商,日访问百万级,未来可能千万级 数据库 系统 服务器多少台 缓存 appache,n ...

  5. Jmeter函数助手21-evalVar

    evalVar函数用于执行变量表达式. 变量的名称:填入变量的名称name.注意不是引用变量${name} 1.evalVar函数和eval函数的区别:evalVar只能接收变量名称:eval能接收引 ...

  6. 【Java】POI Excel导出 动态行合并

    一般情况: Excel导出一般都是一行一行的记录输出 . 这是Controller代码: 标题行的设置: 标题行会设置获取的结果集的字段名,数据会自动根据设置的名称匹配装填 特殊的需求: 如页面的效果 ...

  7. 【DataBase】MySQL 31 游标

    游标 Cursor 游标是用来存储查询的结果集的数据类型,也称为是光标 在存储过程和函数中可以使用光标对结果集进行循环的处理 光标的使用包括1.声明,2.开启,3.关闭,4.Fetch 游标仅用于存储 ...

  8. 【Vue】Re03 computed属性计算和ES6的一些补充

    一.Computed属性计算 四种计算处理的方式方法 <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. NVIDIA的OpenUSD是什么？ —— Universal Scene Description (USD)

    正如NVIDIA的老黄在2024年的技术大会上的展示一样,NVIDIA公司或许最准确的定义应该是计算机图形学公司,因为不论是NVIDIA搞GPU还是搞通用计算还是搞软件生态以至于现在搞AI搞机器人搞自 ...

  10. nginx实战教程

    大纲 为了让大家更快的学会,该博客中的内容录制成了视频课程:马上在线学习 1.什么是nginx Nginx是一款高性能的http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器. 由 ...