大纲介绍

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. CF916C 题解

    CF916C 题解 思路 思考发现,如果我们让很多边的边权变得非常大,而故意留下 \(1\) 到 \(n\) 的某一条路径,使整条路径之和甚至还没有剩下一条边的权值大,这条路径显然就是最短路了. 更重 ...

  2. java面试一日一题:rabbitMQ如何保证消息不丢失

    问题:请讲下rabbitMQ如何保证消息不丢失 分析:该问题属于概念题,同时也是一个设计方面的题,牵扯到部分设计层面的东西: 回答要点: 主要从以下几点去考虑, 1.rabbitMQ在保证消息不丢失方 ...

  3. Mysql将查询出的数值转换为中文显示case..when..then

    我们经常需要在数据库导出文件,可是导出某些字段时不是中文含义其它同事分不清.可以通过case..when..then根据一一对应的关系将值转成中文,再进行导出方便大家查阅. 1.正常sql未处理之前查 ...

  4. 【RabbitMQ】04 路由模式

    在订阅模式的基础上制定一些特定发送规则 创建路由模式的生产者: 注意这些变化,跟之前的订阅模式并不一样 package cn.dzz.routineQueueInProducer; import co ...

  5. OpenAI内讧更多细节曝光:奥特曼离间董事会失败

    参考: https://www.thepaper.cn/newsDetail_forward_25512687 ============================== 根据 https://ww ...

  6. 记一次失败记录: MindSpore1.3.0 GPU 源码安装 —— Ubuntu18.04系统 (最终安装结果为失败)

    官网地址: https://www.mindspore.cn/install 系统:Ubuntu18.04 硬件: i7-9700k CPU 2060super nvidia显卡 由于考虑到minds ...

  7. 【转载】 机器学习的高维数据可视化技术(t-SNE 介绍) 外文博客原文:How t-SNE works and Dimensionality Reduction

    原文地址: https://www.displayr.com/using-t-sne-to-visualize-data-before-prediction/ 该文是网上传的比较多的一个 t-SNE ...

  8. C# 命名空间和程序集 小记

    前言 本文只是为了复习,巩固,和方便查阅,一些知识点的详细知识会通过相关链接和文献标记出来. 命名空间 1.1 概念 可以把命名空间看做字符串,他加在类名或类型名前面并且通过点进行分割 既然看做是字符 ...

  9. 用户案例 | 蜀海供应链基于 Apache DolphinScheduler 的数据表血缘探索与跨大版本升级经验

    导读 蜀海供应链是集销售.研发.采购.生产.品保.仓储.运输.信息.金融为一体的餐饮供应链服务企业.2021年初,蜀海信息技术中心大数据技术研发团队开始测试用DolphinScheduler作为数据中 ...

  10. 10. 从0学ARM-基于Exynos4412的pwm详解

    一.什么是PWM PWM,英文名Pulse Width Modulation,是脉冲宽度调制缩写,它是通过对一系列脉冲的宽度进行调制,等效出所需要的波形(包含形状以及幅值),对模拟信号电平进行数字编码 ...