H5分享鏈接之OG協(xié)議知多少

前段時(shí)間我們項(xiàng)目接到了個(gè)H5活動(dòng)頁(yè)的需求疆偿，既然是H5活動(dòng)頁(yè)家厌，那么其目的就是通過大量的傳播進(jìn)行引流芜赌、促活，我們的目的也正如此冒冬。PM希望我們的H5頁(yè)面在別家的APP內(nèi)傳播時(shí)能自動(dòng)解析我們的鏈接伸蚯，這怎么做呢？當(dāng)時(shí)我們也不知道简烤，因此經(jīng)過一番調(diào)研得知需要用到本文的主人公 "OG"

本文就來分享一下我同事獨(dú)釣寒江雪總結(jié)的關(guān)于OG的相關(guān)知識(shí)朝卒！文章不是很長(zhǎng)，希望對(duì)大家有所幫助乐埠！

原文：https://juejin.cn/post/7023173942001008670

Open Graph 是一種互聯(lián)網(wǎng)協(xié)議抗斤，最初由 Facebook 創(chuàng)建，用于標(biāo)準(zhǔn)化網(wǎng)頁(yè)中元數(shù)據(jù)的使用丈咐，使得社交媒體得以以豐富的“圖形”對(duì)象來表示共享的頁(yè)面內(nèi)容瑞眼。

看到這個(gè)標(biāo)題，也許你會(huì)陷入疑惑棵逊，什么是開放圖譜協(xié)議（The Open Graph protocol）伤疙？我們?yōu)槭裁此坪鹾苌僖姷剿克降子惺裁从媚兀看_實(shí)徒像，對(duì)于很多前端開發(fā)來說黍特，開放圖譜協(xié)議（The Open Graph protocol）是一個(gè)比較陌生的概念。

什么是 Open Graph Protocol

Open Graph Protocol（開放圖譜協(xié)議）锯蛀，簡(jiǎn)稱 OG 協(xié)議灭衷。它是 Facebook 在 2010 年 F8 開發(fā)者大會(huì)公布的一種網(wǎng)頁(yè)元信息（Meta Information）標(biāo)記協(xié)議，屬于 Meta Tag （Meta 標(biāo)簽）的范疇旁涤，是一種為社交分享而生的 Meta 標(biāo)簽翔曲，用于標(biāo)準(zhǔn)化網(wǎng)頁(yè)中元數(shù)據(jù)的使用，使得社交媒體得以以豐富的“圖形”對(duì)象來表示共享的頁(yè)面內(nèi)容劈愚。它允許在 Facebook 上瞳遍，其他網(wǎng)站能像 Facebook 內(nèi)容一樣具有豐富的“圖形”對(duì)象，進(jìn)而促進(jìn) Facebook 和其他網(wǎng)站之間的集成菌羽。

簡(jiǎn)單來說掠械，該協(xié)議就是用來標(biāo)注頁(yè)面的類型和描述頁(yè)面的內(nèi)容。其靈感來自 Dublin Core[1]注祖、link-rel canonical猾蒂、Microformats 和 RDFa，雖然有這些不同的技術(shù)和模式并且可以組合在一起氓轰，但沒有一種技術(shù)可以提供足夠的信息來豐富地表示社交圖中的任何網(wǎng)頁(yè)婚夫。Open Graph 協(xié)議建立在這些現(xiàn)有技術(shù)的基礎(chǔ)上，以開發(fā)人員使用的簡(jiǎn)單性為關(guān)鍵目標(biāo)署鸡，并為開發(fā)人員提供了一個(gè)實(shí)施方案案糙，它為許多技術(shù)設(shè)計(jì)決策提供了信息。

看了這么多靴庆，好像還是不理解什么是開放圖譜協(xié)議时捌？

舉個(gè)簡(jiǎn)單的例子，當(dāng)我們分享一個(gè)鏈接（URL）給朋友時(shí)炉抒，在有的 App 上它只是一個(gè)鏈接奢讨，而在有的 APP 上，他卻可以包含如下圖所示的標(biāo)題焰薄、圖片拿诸、描述等信息：

圖片

OG協(xié)議

像飛書、WhatsApp塞茅、Twitter亩码、Facebook 等社交軟件，都會(huì)根據(jù)鏈接去抓取你給定 URL 的內(nèi)容野瘦，以確定要包含哪些屬性來進(jìn)行共享展示描沟。你可以通過在頁(yè)面的頭部代碼中包含 og:tags 來顯式定義屬性飒泻；如果沒有這些顯示定義的信息，這些社交軟件將在完成對(duì)給定 URL 的頁(yè)面抓取后推斷屬性吏廉，然后使用這些屬性信息組裝共享框并進(jìn)行展示泞遗。

其實(shí)這一切也是依賴于具體 APP 的實(shí)現(xiàn)的（是否會(huì)根據(jù)URL去抓取內(nèi)容），對(duì)于同一 URL席覆，我們可以看看在飛書和微信上的不同形態(tài)：

微信（此處手動(dòng)@微信官方史辙，為啥微信不做鏈接解析呢？有懂產(chǎn)品的小伙伴給解釋一下不娜睛？）：

image.png

飛書：

圖片

OG協(xié)議

為什么需要 OG協(xié)議髓霞？

我們知道卦睹，構(gòu)建內(nèi)容和維護(hù)網(wǎng)站通称杞洌可能需要耗費(fèi)大量時(shí)間，我們當(dāng)然希望自己的內(nèi)容能夠在社交分享時(shí)能夠脫穎而出结序。先來看下有無(wú) OG 協(xié)議時(shí)障斋，同一個(gè)鏈接被解析的差別：

沒有開放圖譜協(xié)議時(shí)：此時(shí)社交軟件正確地獲取了頁(yè)面的標(biāo)題和描述，但它所含有的信息有限徐鹤，看起來并不誘人垃环。

image.png

有開放圖譜協(xié)議時(shí)：

圖片

有開放圖譜

互聯(lián)網(wǎng)上的內(nèi)容通常至少有一個(gè)目標(biāo)——與他人分享。如果你只是將它發(fā)送給一個(gè)朋友返敬，有沒有開放圖譜協(xié)議可能不重要遂庄。但是如果你想運(yùn)營(yíng)、分享或希望它在任何具有豐富預(yù)覽功能的社交網(wǎng)絡(luò)或應(yīng)用程序上共享劲赠、傳播時(shí)涛目，你會(huì)希望該預(yù)覽盡可能抓住別人的眼球。像下面這樣豐富而有效的信息將有助于鼓勵(lì)人們點(diǎn)擊查看你的內(nèi)容凛澎。

圖片

吸引眼球的OG協(xié)議

如果你的內(nèi)容沒有開放譜圖協(xié)議標(biāo)簽會(huì)怎樣霹肝？也許對(duì)于網(wǎng)站內(nèi)容來說不會(huì)有什么影響，但你的內(nèi)容將很難從互聯(lián)網(wǎng)上大量其他內(nèi)容中脫穎而出塑煎。

如果網(wǎng)頁(yè)采用 OG 協(xié)議沫换，分享結(jié)果會(huì)結(jié)構(gòu)化展示，這樣站點(diǎn)在被鏈接分享時(shí)會(huì)有更豐富的內(nèi)容展現(xiàn)最铁，同時(shí)站點(diǎn)的轉(zhuǎn)化率將會(huì)提升讯赏。

如何給網(wǎng)站添加 OG 協(xié)議

基礎(chǔ)屬性

要將你的網(wǎng)頁(yè)轉(zhuǎn)換為可控結(jié)構(gòu)化圖形對(duì)象，你需要向頁(yè)面添加基本元數(shù)據(jù)冷尉。四個(gè)基本開放圖形標(biāo)簽是：

  • og:title - 指定你想要在共享時(shí)展示的標(biāo)題漱挎。這通常與你網(wǎng)頁(yè)的<title>標(biāo)簽相同，例如“百度一下网严，你就知道”识樱。
  • og:type- 對(duì)象的類型，例如“video.movie”。根據(jù)你指定的類型的不同怜庸，可能還需要添加一些其他的不同屬性当犯。
  • og:image - 一個(gè)圖片 URL。
  • og:url - 指定你想要共享的 URL/當(dāng)前頁(yè)面的 URL（可以是短鏈接）割疾，例如嚎卫，“https://www.baidu.com/[2]”。

各標(biāo)簽控制區(qū)域如下圖所示：

image.png

給網(wǎng)站設(shè)置 OG 標(biāo)簽時(shí)宏榕，應(yīng)該將其與其他元數(shù)據(jù)一起放置在<head>標(biāo)簽中拓诸。使用的標(biāo)簽還是<meta>，添加方式如下：

<meta property="“[NAME]”" content="“[VALUE]”" />

例如麻昼，以下是 IMDB 上 The Rock 的 Open Graph 協(xié)議標(biāo)記：

<html prefix="og: https://ogp.me/ns#">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock" />
    <meta property="og:type" content="video.movie" />
    <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
    <meta
      property="og:image"
      content="https://ia.media-imdb.com/images/rock.jpg"
    />
    ...
  </head>
  ...
</html>

開放圖標(biāo)簽介紹

上面介紹了基本元數(shù)據(jù)標(biāo)簽奠支，下面將進(jìn)一步對(duì)一些屬性進(jìn)行說明。如果你想要獲得更全面的信息抚芦，請(qǐng)轉(zhuǎn)到 Open Graph[3] (https://ogp.me/[4])進(jìn)行閱讀倍谜。

title

最多 65 個(gè)字符。

<title>your keyword rich title of the website and/or webpage</title>

description

最多 155 個(gè)字符叉抡。

<meta
  name="description"
  content="description of your website/webpage, make sure you use keywords!"
/>

og:title

最多 35 個(gè)字符尔崔。

<meta property="og:title" content="short title of your website/webpage" />

og:site_name

你的內(nèi)容所在的整個(gè)網(wǎng)站的名稱。如果你的對(duì)象是較大網(wǎng)站的一部分褥民，則應(yīng)為整個(gè)網(wǎng)站的名稱季春。

og:url

當(dāng)前網(wǎng)頁(yè)地址的完整鏈接。

<meta property="og:url" content="https://www.example.com/webpage/" />

og:description

頁(yè)面的描述消返，最多 65 個(gè)字符载弄。類似 og:title，這通常應(yīng)該和你網(wǎng)站的<meta type=“description”>標(biāo)簽相同侦副，當(dāng)然侦锯，你也可以使其不同。

<meta property="og:description" content="description of your website/webpage" />

og:image

尺寸小于 300KB 且最小尺寸為 300 x 200 的圖像（JPG 或 PNG）秦驯。此圖像一般應(yīng)通過具有有效非自簽名證書的 HTTPS 鏈接提供尺碰。

<meta
  property="og:image"
  content="http://cdn.example.com/uploads/images/webpage_300x200.png"
/>

雖然使用og:image添加圖像比較容易，但有時(shí)讓你的圖像正確顯示可能具有挑戰(zhàn)性译隘。開放圖譜協(xié)議包括一些圖像標(biāo)簽亲桥，例如og:image:urlvsog:image:secure_url以及og:image:width和og:image:height，可以對(duì)圖像進(jìn)行更細(xì)致的控制固耘。

盡量確保你遵循開放圖形文檔[5]中的所有注釋和示例题篷。此外，一些社交網(wǎng)絡(luò)可能會(huì)對(duì)圖像有特殊要求厅目。例如番枚，Twitter 要求比例為2:1法严，最小尺寸為 300x157，最大尺寸為 4096x4096葫笼，小于 5MB深啤，JPG、PNG路星、WEBP 或 GIF 格式溯街。

og:video

og:video 標(biāo)簽與 og:image 標(biāo)簽相同，用于補(bǔ)充“圖形”對(duì)象的視頻文件的 URL洋丐。

og:type

為了在圖形中表示你的對(duì)象呈昔，你需要指定其類型。這里[7] 是可用的全部類型列表友绝。你還可以指定自己的類型堤尾。

<meta property="og:type" content="article" />

設(shè)置開放圖標(biāo)簽時(shí)，你需要了解哪種類型對(duì)你的網(wǎng)站更有意義九榔。如果你的頁(yè)面專注于單個(gè)視頻哀峻，則使用“video”類型可能是有意義的涡相；如果它是一個(gè)沒有特定垂直行業(yè)的一般網(wǎng)站哲泊，你可能更適合使用“website”類型。

og:locale

資源的語(yǔ)言環(huán)境催蝗。如果你有其他語(yǔ)言翻譯可用切威，你也可以使用 og:locale:alternate。如果不指定 og:locale丙号，則默認(rèn)為 en_US先朦。

<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

video/audio

還可以共享音頻/視頻。例如犬缨，F(xiàn)acebook 和 Twitter 可以很好地共享視頻喳魏。當(dāng)然，WhatsApp 也有這個(gè)選項(xiàng)怀薛，比如當(dāng)你分享 Instagram 或 Youtube 鏈接時(shí)刺彩，WhatsApp 的預(yù)覽會(huì)在應(yīng)用內(nèi)附帶視頻播放。

products, persons, movies 等

此類信息實(shí)際上取決于提供商（Facebook枝恋、Google）创倔，WhatsApp 和 Twitter 可以啟用對(duì)產(chǎn)品的支持。這樣焚碌，你與之共享鏈接的人可能會(huì)在共享鏈接“小部件”中看到價(jià)格畦攘、平均評(píng)分、評(píng)論等內(nèi)容十电。

favicon

要獲得對(duì)所有瀏覽器和設(shè)備的最佳圖標(biāo)支持知押，請(qǐng)閱讀此內(nèi)容[8]叹螟。

Twitter 和其他使用開放圖的社交媒體

大多數(shù)社交網(wǎng)絡(luò)都遵循開放圖譜協(xié)議的基本元數(shù)據(jù)標(biāo)簽，當(dāng)然台盯，一些社交應(yīng)用也會(huì)包括自己的擴(kuò)展首妖，以幫助自定義其生態(tài)系統(tǒng)中的一些外觀展示。

例如爷恳，Twitter 允許你指定twitter:card有缆，這是你在展示你的網(wǎng)站時(shí)可以使用的“卡片”類型。他們的卡類型包括：

  • summary
  • summary_large_image
  • app
  • player

這將幫助你選擇如何在其 Feed 中使用你的鏈接温亲。例如棚壁，如果你使用了summary_large_image，只要你在 og:image 標(biāo)簽中提供了鏈接栈虚，Twitter 就會(huì)顯示帶有高分辨率大圖片的鏈接袖外。

要獲得最佳 Twitter 支持，請(qǐng)閱讀Twitter 的相關(guān)文檔[9]魂务。

要獲得最佳 Facebook 支持曼验，請(qǐng)閱讀Facebook 的分享指南[10]。

以下是有關(guān)如何在某些社交媒體網(wǎng)站上使用開放圖標(biāo)簽的文檔鏈接粘姜，供你參考：

  • Twitter[11]
  • Facebook[12]
  • Pinterest[13]
  • LinkedIn[14]

測(cè)試你的開放圖標(biāo)簽

如果你在開發(fā)過程中遇到困難鬓照，也可以使用一些社交媒體提供的工具來測(cè)試、調(diào)試你的標(biāo)簽：

  • Twitter[15]
  • Facebook[16]
  • Pinterest[17]

進(jìn)一步探究開放圖標(biāo)簽

雖然以上介紹涵蓋了一個(gè)網(wǎng)站中可能包含的大部分標(biāo)簽孤紧，但還有一些標(biāo)簽可能會(huì)幫助你和你的企業(yè)在整個(gè)社交網(wǎng)絡(luò)中更多的被吸引和發(fā)現(xiàn)豺裆。如果你有興趣深入研究，The Open Graph protocol[18]官方文檔將是一個(gè)很好的使用指南号显。

如果你只是在尋找入門示例臭猜，例如為博客文章添加設(shè)置標(biāo)簽，你可以采用類似下面的結(jié)果：

<meta property="og:site_name" content="Colby Fayock" />
<meta
  property="og:title"
  content="Anyone Can Map! Inspiration and an
introduction to the world of mapping - Colby Fayock"
/>
<meta
  property="og:description"
  content="Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of…"
/>
<meta
  property="og:url"
  content="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/"
/>
<meta property="og:type" content="article" />
<meta property="article:publisher" content="https://www.colbyfayock.com" />
<meta property="article:section" content="Coding" />
<meta property="article:tag" content="Coding" />
<meta
  property="og:image"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta
  property="og:image:secure_url"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="twitter:card" content="summary_large_image" />
<meta
  property="twitter:image"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta property="twitter:site" content="@colbyfayock" />

如果你正在尋找其他方法來優(yōu)化和分析你的內(nèi)容押蚤，下面幾個(gè)鏈接也許會(huì)使你感興趣：

  • 如何將社交媒體圖像添加到你的 Github 項(xiàng)目存儲(chǔ)庫(kù)[19]
  • 如何理解 Google Analytics 和你網(wǎng)站的流量[20]
  • 如何使用 Google Analytics（分析）設(shè)置和跟蹤 YouTube 頻道的表現(xiàn)[21]

OG 協(xié)議的其他說明

不同公司的許多技術(shù)審計(jì)結(jié)果表明蔑歌，使用 Open Graph 標(biāo)簽不會(huì)幫助你獲得更好的 SEO 排名，它們僅適用于在社交媒體展示豐富的“圖形”對(duì)象揽碘。

參考資料

[1]Dublin Core: https://link.segmentfault.com/?enc=3jOYnFTQwjsRHiqe5Wcfqg%3D%3D.jFmXd%2BjUa71kPZtws3MnaDsrGJ8XZBBw657r6vVW5%2F0BOtXU32562ZZHsWPIo%2FIXgC2jI7T%2Fw6KM9YHyjSsjOw%3D%3D[2]https://www.baidu.com/: https://link.segmentfault.com/?enc=36Sy6xdY3qBGWTu9788RIQ%3D%3D.4DftXT0QoXwlnO1x9GHZ8GhSvZGDOrXjj%2BNOJnA6gEw%3D[3]Open Graph: https://link.segmentfault.com/?enc=cCLjszExbRpeyJocK8vlVw%3D%3D.M2HfZhYlYucQL%2BxKFJIWYQ%3D%3D[4]https://ogp.me/: https://link.segmentfault.com/?enc=a89QPgl0YZF0a1AsLSEW6g%3D%3D.DAhMHvFSa8mCdd7r7SVZJQ%3D%3D[5]開放圖形文檔: https://link.segmentfault.com/?enc=7zlkFe7ZbP0FzqiKnOWy5A%3D%3D.R9EZiXzBB2bEOyJiXfaPXw1yzR93Py1bQvnfmPSFbrU%3D[6]https://developer.twitter.com...: https://link.segmentfault.com/?enc=pd95Ce4gBLO3CGkWN7wjfg%3D%3D.rY3E4HSM295%2B7HXHC2FvvUP88%2FU%2BMEsIG6sgDkUBWTcJDbpSUtP14ZaNUoc0nQg7ZlopdNZbvXsi8hlbd9TGeErSpnS5yzlTcunMnSsR2FTmeUWpDNkHyBMX1euJ5GWIReehLsO8ANNJ46X2DXL0Jg%3D%3D[7]這里: https://link.segmentfault.com/?enc=HEQyrnjiLeQBVK81Q1Lb7Q%3D%3D.fIwp1Jw7xaipcTam6cSYlhYPNavceRotim5Al4zRnMc%3D[8]此內(nèi)容: https://link.segmentfault.com/?enc=5xECg8MPoRSDaBN6TTNUXw%3D%3D.FBUmOLGBWEnTORONQ6K1%2Bt3PEusAwv5jFEDtFMCvU%2FSZy6ZKXR3BF3VbZ4c%2FU1yV[9]Twitter 的相關(guān)文檔: https://link.segmentfault.com/?enc=cjVMD0aU3F%2FQcKcZP9A5Gw%3D%3D.Sabq%2F8hV1ruuy4MOXHIcg3F4npmqk%2Fo5%2BoAduigz6etsdp3UQH%2B42v%2F7%2Fi5VOcIW[10]Facebook 的分享指南: https://link.segmentfault.com/?enc=QenZjA9NDXjiv10yNyn0Tg%3D%3D.zkb6%2FF2eIs%2BzS0S8Daqv1P%2FNMPnS3GFf60TmvZq%2Br8QiYkzswLlS0ck%2BdrHy8XMiBR1VjhvIDuR73O2Jj39kwA%3D%3D[11]Twitter: https://link.segmentfault.com/?enc=FQzsabi7jvSLKu4t0GXwIg%3D%3D.pqnzRROEepA4YrvYzo2UymV5k352YqIAyUEpVqEqf7gzLjLgw9nS2Q0rfBKQynIRyW86f5krrz8zyW%2Fud%2BX8o%2BsqWiz%2F0LofUiqLY%2BzF3Lfv6HVvrjrAKE5BKzGM0Y5C[12]Facebook: https://link.segmentfault.com/?enc=%2FuYK7rffIFc%2FOItVkx33Yw%3D%3D.UHotEdXT1v9EU2S3aizlxxdzsI9J8WwN2kyJCuof1AL5H3UP%2B58Diz8df%2B1rVY8QWLE2iw0Xjk4RXOR3pnSiEw%3D%3D[13]Pinterest: https://link.segmentfault.com/?enc=TxBX%2F7QugKxfpdJ%2F5YFYpA%3D%3D.QGTo3CdisZrB%2BwueioeCm4xgw4wFIHQbnVQ2XcDXH1w%2B14SlaOst0kBAeh6%2FCqHCMlqliER3E0TVSfYhCs9twQ%3D%3D[14]LinkedIn: https://link.segmentfault.com/?enc=Z0%2FCxX38t46cDeeSC%2FUWUQ%3D%3D.ySVwptLU%2BZwY8dF%2BFSjAjGf0P9yC7NpOpdrBVKmrdHIS3PoWKlVSAmEI%2Bs5q6i8YAXGsQkannBJgpnVTFnfj8kqeEQD4GQ5pmS8OKqB%2FVMZvgBq6ARUeqZBYeGmyAH%2BzJEUy8m7WC2gRl2Buo5xrag%3D%3D[15]Twitter: https://link.segmentfault.com/?enc=KZz8FfZYqTj1k4TPLTMOLg%3D%3D.Ybrzdc%2FoYPpBqNGeEIrwR35ByHjP3uCRx5Hf0qupvXhctxr6i2ILScWrqZlZBRQR[16]Facebook: https://link.segmentfault.com/?enc=AwNL39xHGyvZF%2FOMW7KAUQ%3D%3D.rzCDZehzuAX%2B9G5F8fL0lGeKJ%2B%2B6XfvSwQkU0KY3aN4BkBLFNz%2BTEFBsBww6q7xp[17]Pinterest: https://link.segmentfault.com/?enc=qwvL21%2BOTRcVdDUzzzMAWQ%3D%3D.xzb1w1ENdimc246SycsBE%2Bw20FjUJYoNiFCQEqiwLZf2nGkNEDT1eTQqnHUavUwbaLrcKuKX7IHAX9lm0ITyMg%3D%3D[18]The Open Graph protocol: https://link.segmentfault.com/?enc=cG%2BgI%2BwDYBOW5wD56Mm6bA%3D%3D.14IWdL%2FX4g4NdkkkR5Ektg%3D%3D[19]如何將社交媒體圖像添加到你的 Github 項(xiàng)目存儲(chǔ)庫(kù): https://link.segmentfault.com/?enc=NO1Y2dOiQR%2FXU2VkF8Y%2B9w%3D%3D.kYK6yhv5Ti0eOOhrb1HeDkm%2BrZw17AFtCr5p1ppZxPbOvKqb0Pkd%2F%2FzY%2FhmiUtpocNwHkjRupBqMtKZRpeR5lEQlJBR2dICja%2F9aV4vDRKSPZU4p53D55TIv4H%2FWR7PF[20]如何理解 Google Analytics 和你網(wǎng)站的流量: https://link.segmentfault.com/?enc=c2jycunozlN%2BU6gkQ6PXIA%3D%3D.uuWtkaCIK7XJZKNuPqvTEgWDI1YMlT3lX%2BHpSHIUZ7zcoPvkXrHsSJWy9SSPhap%2Fw8Wd7MOb1xHTp%2BONKoEGdo5dpTxlaDMwSVw20KZO8bMuRkegUdshfedlVKshBxtBOicCtQ453F8YsvwEudrsvg%3D%3D[21]如何使用 Google Analytics（分析）設(shè)置和跟蹤 YouTube 頻道的表現(xiàn): https://link.segmentfault.com/?enc=iDyhIYuMCinuERFvPPEFGA%3D%3D.GLble32AQxAuSGoX6BHGtEwZOdmf2LBz%2BGAfQvZRhQzWQqDi8Fngav%2BQYobStOeOaEnYt29Xx4T0DRa4s%2Fui8NLVfpbd%2BZK%2BvWWiy2%2BE0o5UYQ8xMFDN8L8ipCVp0eT4nl5ROn7VId%2Foc0mjbDRa2w%3D%3D[22]The Open Graph protocol: https://link.segmentfault.com/?enc=KR%2Bm8htb2yF6JJ5fVJInHQ%3D%3D.hHP8%2BAkCaTiPlTn%2BKz5ovw%3D%3D[23]What is Open Graph and how can I use it for my website?: https://link.segmentfault.com/?enc=qs%2FbX%2FDQiITfHfcnlSM8Ig%3D%3D.MrEdpkjpljq6SPid9MTmm3vC8cqwDKQq6atyL7UnClnLViB6Er7s8jMC2IgPIDmHyYQG%2B9v04pP3S8NBy2Yi1XgKK3FXm5imHjMSXZPvoze%2FeaBLFbM0pK6XdSio%2F2hv[24]Provide an image for WhatsApp link sharing: https://link.segmentfault.com/?enc=K6DkEGhoQnm3O%2BAp1kMfnQ%3D%3D.56CrvA6PUjvO9kxnUl1VCiruUXFkFl0Zb1JJ%2Bq9AUV93wiTTNhdOsqQq4egLKU26jsLik9NueONdlTbXMxOoVaK1AM82CtFNl%2FCZDDe8hkUik3f2q446lfE2JVI%2B21PK[25]How to Customize which URL, Text and IMG to Share: https://link.segmentfault.com/?enc=Or0z0RVZNkMXOaLOdF%2FGNg%3D%3D.71ri%2FM42sbxgX%2B%2FcGG0ZPCf%2BGrhW%2BHKRjA7RrBJxFiWXpnUpankf6xAsGgIHa4EG1YGluI%2B7a3RwRqLFjV2vUagFo5OreLU6khC%2FVDe8KQvcYKV5XXdOJG0%2Bic0BC7E%2B[26]個(gè)人博客: https://link.segmentfault.com/?enc=5aQvR2YDFkmOUu73CE1puQ%3D%3D.SWjkeYmRXAkzxHrnIJ%2BbHeaLbSHf0gqmYca2HzJAPQGwUyOGhJwEXcBi0isYxtZlJbtXZX2%2F1bbvT4iU6CA4%2Fw%3D%3D[27]指正和star: https://link.segmentfault.com/?enc=XZnFfAk1Y6Kykj6%2FhD%2FEkw%3D%3D.xKVGaZDW6JYxewDjzPWndJBGZ1m4gEuhLyDoMS62%2Bzm3aqvV9PHatdvjnxEMBf0e

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末次屠，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子钾菊，更是在濱河造成了極大的恐慌帅矗，老刑警劉巖，帶你破解...
    沈念sama閱讀 222,378評(píng)論 6贊 516
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件煞烫，死亡現(xiàn)場(chǎng)離奇詭異浑此，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)滞详，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門凛俱，熙熙樓的掌柜王于貴愁眉苦臉地迎上來紊馏，“玉大人，你說我怎么就攤上這事蒲犬≈旒啵” “怎么了？”我有些...
    開封第一講書人閱讀 168,983評(píng)論 0贊 362
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵原叮，是天一觀的道長(zhǎng)赫编。 經(jīng)常有香客問我，道長(zhǎng)奋隶，這世上最難降的妖魔是什么擂送？ 我笑而不...
    開封第一講書人閱讀 59,938評(píng)論 1贊 299
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮唯欣，結(jié)果婚禮上嘹吨，老公的妹妹穿的比我還像新娘。我一直安慰自己境氢，他們只是感情好蟀拷，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著萍聊，像睡著了一般问芬。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上脐区，一...
    開封第一講書人閱讀 52,549評(píng)論 1贊 312
  • 城市分裂傳說
    那天愈诚，我揣著相機(jī)與錄音，去河邊找鬼牛隅。 笑死，一個(gè)胖子當(dāng)著我的面吹牛酌泰，可吹牛的內(nèi)容都是我干的媒佣。 我是一名探鬼主播，決...
    沈念sama閱讀 41,063評(píng)論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼陵刹，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼默伍！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起衰琐，我...
    開封第一講書人閱讀 39,991評(píng)論 0贊 277
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤也糊，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后羡宙，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體狸剃，經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1贊 319
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年狗热，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了钞馁。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片虑省。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1贊 353
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖僧凰，靈堂內(nèi)的尸體忽然破棺而出探颈，到底是詐尸還是另有隱情，我是刑警寧澤训措，帶...
    沈念sama閱讀 36,413評(píng)論 5贊 351
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布伪节，位于F島的核電站，受9級(jí)特大地震影響绩鸣，放射性物質(zhì)發(fā)生泄漏架馋。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3贊 335
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一全闷、第九天 我趴在偏房一處隱蔽的房頂上張望叉寂。 院中可真熱鬧，春花似錦总珠、人聲如沸屏鳍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評(píng)論 0贊 25
  • 一樁弒父案局服，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)钓瞭。三九已至，卻和暖如春淫奔，著一層夾襖步出監(jiān)牢的瞬間山涡，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評(píng)論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國(guó)打工唆迁， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鸭丛，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3贊 378
  • 代替公主和親
    正文 我出身青樓唐责，卻偏偏與公主長(zhǎng)得像鳞溉，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子鼠哥，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2贊 361

推薦閱讀更多精彩內(nèi)容

  • 什么是跨域熟菲？ 跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源，這里跨域是廣義的朴恳。 廣義的跨域： 1.) 資...
    Jokery閱讀 587評(píng)論 0贊 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5抄罕？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 27,518評(píng)論 1贊 45
  • 常用網(wǎng)址（本人會(huì)把自己平時(shí)看過的好的網(wǎng)站于颖，網(wǎng)址放到該篇文章中呆贿，方便自己查找的同時(shí)，也可以給大家提供一些方便） 從這...
    羅小耳閱讀 1,644評(píng)論 0贊 18
  • 16宿命：用概率思維提高你的勝算 以前的我是風(fēng)險(xiǎn)厭惡者恍飘，不喜歡去冒險(xiǎn)榨崩，但是人生放棄了冒險(xiǎn)谴垫，也就放棄了無(wú)數(shù)的可能。 ...
    yichen大刀閱讀 6,059評(píng)論 0贊 4
  • 公元：2019年11月28日19時(shí)42分農(nóng)歷：二零一九年 十一月 初三日 戌時(shí)干支：己亥乙亥己巳甲戌當(dāng)月節(jié)氣：立冬...
    石放閱讀 6,889評(píng)論 0贊 2