SEO 與社群媒體預覽檢查工具

1. 基本 SEO 預覽 Meta（搜尋引擎）

搜尋結果主要依賴以下標籤──

			<title>網頁標題，建議 50–60 字元內</title>
			<meta name="description" content="簡短描述，建議 120–160 字元內">
			<meta name="robots" content="index, follow">
					

• <title> ：搜尋結果標題，長度過長會被截斷。
• <meta name="description"> ：搜尋結果下方的摘要文字。
• <meta name="robots"> ：控制頁面是否允許被索引／追蹤。

2. Open Graph Protocol（Facebook、LinkedIn、LINE 等）

Open Graph（OG）由 Facebook 發起，幾乎所有社群平台都支援：

			<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/page.html">
			<meta property="og:type"         content="website">
			<meta property="og:site_name"    content="網站名稱">
			<meta property="og:image:width"  content="1200">
			<meta property="og:image:height" content="630">
					

• og:title／og:description ：分享卡片的標題與說明。
• og:image ：建議至少 1200×630 px，比例 1.91:1。
• og:type ：指定內容類型（例如 article 、 video.movie ）。

3. Twitter Cards（Twitter）

			<meta name="twitter:card"        content="summary_large_image">
			<meta name="twitter:title"       content="推文標題">
			<meta name="twitter:description" content="推文摘要">
			<meta name="twitter:image"       content="https://example.com/twitter-image.jpg">
			<meta name="twitter:site"        content="@你的官方帳號">
			<meta name="twitter:creator"     content="@作者或發佈者">
					

• twitter:card ： summary 或 summary_large_image 。
• twitter:site / twitter:creator ：分別對應網站與作者的官方帳號。

4. Schema.org 結構化資料（Rich Results）

			<script type="application/ld+json">
			{
				"@context": "https://schema.org",
				"@type": "Article",
				"headline": "文章標題",
				"description": "文章摘要",
				"image": ["https://example.com/image1.jpg"],
				"author": {
					"@type": "Person",
					"name": "作者姓名"
				},
				"publisher": {
					"@type": "Organization",
					"name": "網站名稱",
					"logo": {
						"@type": "ImageObject",
						"url": "https://example.com/logo.png"
					}
				},
				"datePublished": "2025-04-24T08:00:00+08:00"
			}
			</script>
					

• @type 可為 Article 、 Product 、 Event 等。
• 豐富結果可顯示星級評分、商品價格、活動時間等。

5. 其他常見平台支援

• Slack / WhatsApp：多數採用 Open Graph。
• Pinterest：支援 og:image 及 pin:media 等專屬標籤。
• WeChat（微信）：也會讀取 OG，但建議同時提供 <meta name="description"> 。

小結

• 搜尋引擎： <title> 、 <meta name="description"> 、結構化 JSON-LD
• Facebook/LinkedIn/LINE：Open Graph
• Twitter：Twitter Cards
• Rich Snippets：Schema.org JSON-LD