大纲介绍

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. Springboot层级关系以及作用

    entity entity是实体层,与model,pojo相似,是存放实体的类,类中定义了多个类属性,并且与数据库表的字段保持一致,一张表对应了一个entity类.主要用于定于与数据库对象对应的属性, ...

  2. 2024-07-24:用go语言,给定一个整数数组 nums,其中至少包含两个元素。 可以根据以下规则执行操作:选择最前面两个元素删除、选择最后两个元素删除,或选择第一个和最后一个元素删除。 每次操作

    2024-07-24:用go语言,给定一个整数数组 nums,其中至少包含两个元素. 可以根据以下规则执行操作:选择最前面两个元素删除.选择最后两个元素删除,或选择第一个和最后一个元素删除. 每次操作 ...

  3. Linux 中 Crontab 执行时的环境变量问题(allure命令不执行)

    前几天做了UI自动化脚本部署linux服务器,但是放下脚本的allure命令不执行(生成allure报告和启动allure服务的命令不执行),然后就各种找问题,一开始怀疑是allure的环境变量问题, ...

  4. 使用with 还是 join

    用分解关联查询的方式查询具有以下优势:多次单表查询,让缓存的效率更高:许多应用程序可以方便地缓存单表查询对应的结果对象.对 MYSQL 的查询缓存来说,如果关联中的某个表发生了变化,那么就无法使用查询 ...

  5. 【Shiro】06 自定义Realm授权实现

    创建一个激活的用户类: public class ActiverUser { private User user; private List<String> roleList; priva ...

  6. 人形机器人(humanoid)(双足机器人、四足机器人) —— 硬件测试的方法

    硬件测试的方法: 硬件的稳定性.鲁棒性.为机器人设定好固有的执行策略,然后长时间的让机器人重复执行这些既定好的动作.该种测试方法主要测试硬件的设计是否合理,硬件在长时间的运行中是否可以稳定运行而不是出 ...

  7. 【转载】 梯度的直观理解_谈谈优化算法之一(动量法、Nesterov法、自然梯度法)

    原文地址: https://blog.csdn.net/weixin_34613462/article/details/112333623 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA ...

  8. 如何配置域名的 CNAME —— 添加记录集时,为什么会提示“与已有解析记录冲突”?

    参考: https://support.huaweicloud.com/dns_faq/dns_faq_016.html https://developer.qiniu.com/fusion/kb/1 ...

  9. uview-ui toast 二次封装

    开发用到uview 的toast 很常用的内容使用却很繁琐 所以做了简单封装方便使用 前后对比: this.$refs.uToast.show({ type: 'success', title: '成 ...

  10. js 实现俄罗斯方块(一)

    上学的时候就想尝试写个游戏了,不过那时一直想的都是些不太切合自身能力的高级游戏(需要花很多时间学习引擎,需要美工等等)最终都没有实现. 最近突然又想写了就利用业余时间写了个俄罗斯方块js写的画面也比较 ...