在網頁製作中，設定Open Graph Protocol (OGP) 使網頁在社交媒體上分享時顯示自訂的標題、描述和縮圖等資訊。這樣可以提升網頁的可見性和點擊率。
設定OGP主要透過在HTML文件的<head>部分加入一組<meta>標籤來完成。這些標籤定義了網頁的基本屬性，如標題、描述、URL和圖像等，這些資訊會被Facebook、Twitter等社交平台讀取並顯示。
以下是一個設定OGP的簡單範例：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>網頁標題</title>
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="這是網頁的標題">
<meta property="og:description" content="這是網頁的描述，會顯示在分享時的預覽中。">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/">
<!-- 其他Meta標籤 -->
<meta name="description" content="這是網頁的描述。">
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是我的網頁內容。</p>
</body>
</html>
在這個範例中，我們設置了以下幾個主要的OGP屬性，這些標籤讓社交平台能夠正確提取並顯示網頁的預覽資訊，從而提升分享效果。CSS則可以用來設計網頁的視覺效果，但不會直接影響OGP的設定：
og:title: 設定分享時顯示的標題。og:description: 設定分享時顯示的描述文字。og:image: 設定分享時顯示的縮圖，可以是相對或絕對URL，建議圖像的尺寸至少為1200x630像素。og:url: 設定網頁的URL，這應該是該網頁的絕對網址。
iThome鐵人賽
看影片追技術