大纲介绍

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. oeasy教您玩转vim - 69 - # 折叠folding入门

    ​ 折叠入门 回忆上次 上次学习了一种新的容器 tabs选项卡 tabs选项卡 包含多个选项卡tab 可以列两个tab 一个编写文件 一个执行指令 互不影响 每个 tab选项卡 还可以对应多个wind ...

  2. 如何在 Vue 和 JavaScript 中截取视频任意帧图片

    如何在 Vue 和 JavaScript 中截取视频任意帧图片 大家好!今天我们来聊聊如何在 Vue 和 JavaScript 中截取视频的任意一帧图片.这个功能在很多场景下都非常有用,比如视频编辑. ...

  3. 全网最适合入门的面向对象编程教程：20 类和对象的 Python 实现-组合关系的实现与 CSV 文件保存

    全网最适合入门的面向对象编程教程:20 类和对象的 Python 实现-组合关系的实现与 CSV 文件保存 摘要: 本文主要介绍了在使用 Python 面向对象编程时,如何实现组合关系,同时对比了组合 ...

  4. C#：进程之间传递数据

    一.思路 在Windows程序中,各个进程之间常常需要交换数据,进行数据通讯.常用的方法有 使用内存映射文件 通过共享内存DLL共享内存 使用SendMessage向另一进程发送WM_COPYDATA ...

  5. 深度解读GaussDB(for MySQL)与MySQL的COUNT查询并行优化策略

    本文分享自华为云社区<[华为云MySQL技术专栏]GaussDB(for MySQL)与MySQL的COUNT查询并行优化策略>,作者:GaussDB 数据库. 1.背景介绍 统计表的行数 ...

  6. UML各类基础知识总结

    1.UML关系 泛化(也就是我们传统意义上的继承关系) 子类继承父类,关系用extend关键字标识: 关联 可以说是一种属于关系,图中即说的是PhoneNumber类属于Master类,同时,除了一对 ...

  7. 【Java】Annotation 注解

    Annotation 注解 注解是一种元数据 MetaData,从JDK5开始 在Java代码中是一个特殊的标记,可以在编译,类加载,运行时读取,执行对应的处理 程序可以在不改变原有逻辑的基础上嵌入一 ...

  8. 【转载】冲压过程仿真模拟及优化 —— 冲压仿真的方法分类PPT

    地址: https://www.renrendoc.com/paper/310415051.html

  9. faster-fifo：C++实现的python多进程通信队列 —— 强化学习ppo算法库sample-factory的C++实现的python多进程通信队列 —— python3.12版本下成功通过测试

    项目地址: https://github.com/alex-petrenko/faster-fifo 需要注意,该项目给出了两种安装方法,一种是pip从pypi官网安装,一种是从GitHub上的源码安 ...

  10. Ubuntu18.04环境下 以太坊Geth的安装

    ubuntu18.04系统下安装: sudo apt-get install software-properties-common sudo add-apt-repository -y ppa:eth ...