如何在共享站點連結時顯示圖片

當你在社交媒體上分享你的網站連結時，如何讓圖片顯示出來呢？讓我們找出答案！

有人在 Twitter 上問了這個問題：

要如何在分享我所建立的網站連結時顯示圖片？

要分享圖片，你需要使用Open Graph meta標籤，也被稱為OG標籤。

讓我們看看這篇博文：如何在 macOS 上設置 GitHub 憑證。在Chrome上，右鍵點擊頁面，然後按下View Source。或者在Safari上，從開發菜單中點擊Show Page Source（需要在設置中啟用開發菜單）。

你可以在HTML的<head>部分找到這些標籤：

<meta property="og:title" content="如何在 macOS 上設置 GitHub 憑證">
<meta property="og:description" content="設置GitHub身份驗證，以便您可以從VS Code或命令行中使用它">
<meta property="og:type" content="article">
<meta property="og:url" content="https://flaviocopes.com/setup-github-credentials-macos/">
<meta property="og:image" content="https://flaviocopes.com/img/avatar.png"/>

這些標籤中，og:image 是關於圖片的重要部分，但所有的標籤都有助於為其他軟體更好地顯示我們的網站。

每次進行任何更改時，都可以使用 Twitter Card 驗證器網站，並貼上頁面的 URL。這將顯示預覽並提供一些修正的提示:

預覽圖片

tags: [“image sharing”, “Open Graph tags”, “social media”, “website”, “Twitter”]