手機QQ訪問時，html頁面在QQ中自定義預覽和自定義分享　　　　　　　　　　　　　　　　

有一天，產品說要做個自定義預覽和分享功能，於是很快在微信上實現了，可是不知道在QQ上怎么實現，查看了很多網站，最后才找到了解決方案，於是想和大家分享一下。

一、首先來看看效果。

1.預覽效果圖

使用手機QQ客戶端或者PC版的QQ發送http鏈接給別人后，在手機QQ端看到的並不是http鏈接，而是自己定義的圖片和標題以及描述。

這樣做的好處就是可以馬上讓對方了解這個頁面的大概內容。

2.打開頁面分享給朋友

打開的地址：http://3.wxcarlsvn.sinaapp.com/shareTest.html

預覽效果如下圖：

 

二、那么這種效果是怎么實現的呢？

本來我以為會像微信一樣，騰訊提供了什么特別的接口（如微信官網文檔：http://mp.weixin.qq.com/wiki/7/1c97470084b73f8e224fe6d9bab1625b.html）。

但是經過查找資料發現QQ並沒有提供前端的接口，只有PC端和移動端app的接口。

找了好久才發現，只需要在html頁面中head標簽中加入如下代碼即可。

    <meta name="description" itemprop="description" content="這里是自定義分享的描述---Carl Zhang">
    <meta itemprop="name" content="這里是標題">
    <meta itemprop="image" content="http://static.acg12.com/uploads/2015/08/d338720078a8177c2ca568e91f36e4e7-192x192.png"><!-- 圖片 -->