大纲介绍

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. jmeter目录结构含义

    backups :脚本备份目录.格式JMXbin目录∶存放Jmeter的启动脚本,配置文件.模块文件.jmeter.bat启动Jmeterjmeter.properties核心配置文件.docs:离线 ...

  2. jmeter forEach循环获取response参数值进行接口请求

    jmeter forEach循环获取response参数值进行接口请求 注意: 一,ForEach控制器 输入变量前缀:输入正则表达式变量的引用名称即可 Start index for loop(ex ...

  3. 1、Git简介

    1.1.概述 Git 是一个开源免费的分布式版本控制系统,用于快速高效地管理各种小型或大型项目的代码. Git 不仅容易学习.占用空间小,而且性能快如闪电. Git 具有廉价的本地分支.方便的暂存区域 ...

  4. 【微信小程序】 全局数据共享

    1.什么是全局数据共享 全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题. 开发中常用的全局数据共享方案有: Vuex.Redux. MobX等. 2.小程序中的全局数据共享方案 在小 ...

  5. 【Mybatis-Plus】使用QueryWrapper作为自定义SQL的条件参数

    发现同事的自定义SQL写法是这样的 连表之后使用的条件是 ${ew.customSqlSegment} @Param声明的常量: /** * wrapper 类 */ String WRAPPER = ...

  6. 面向分布式强化学习的经验回放框架(使用例子Demo)——Reverb: A Framework for Experience Replay

    相关前文: 面向分布式强化学习的经验回放框架--Reverb: A Framework for Experience Replay 论文题目: Reverb: A Framework for Expe ...

  7. Correct the classpath of your application so that it contains a single, compatible version of xxx报错解决

    1.背景 有时候引入包有冲突,比如在Maven项目中的不同模块多次重复引入等 这里遇到的问题是重复映入了如下包: <dependency> <groupId>com.baomi ...

  8. 快速基于 ClickHouse + Grafana 搭建可观测性解决方案 - 分布式链路追踪篇(ClickHouse 官方博客)

    引言 在 ClickHouse,我们认为可观测性仅仅是另一个实时分析问题.作为一款高性能的实时分析数据库,ClickHouse 被用于多种场景,包括时间序列数据的实时分析.其应用场景的多样性推动了大量 ...

  9. Git-HEAD 的含义

    在 Git 中,"HEAD" 是一个特殊的引用,它指向当前所处的分支或提交. 当你进行一些操作时,比如提交代码.切换分支等,HEAD 的指向会随之改变.下面是 HEAD 在不同情况 ...

  10. VUE—CLI学习

    https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create 需要的自己来看吧 关于旧版本 Vue CLI 的包名称由 vue-c ...