這個元標籤標題產生器是否自行寫入標籤?

是的。無論您在頁面標題中輸入什麼,都會寫為元素,並重複為 og:title 和 twitter:title。欄位旁邊的計數器會變成紅色超過 60 個字符,輸出上方會出現警告,30 個字符以下的標題會收到一條註釋,表明有空閒空間。它不建議給您措辭;標題文字是您寫的。

我可以在這裡產生一個關鍵字元標記嗎?它仍然有用嗎?

是的,填寫關鍵字(逗號分隔),輸出獲得行;將其留空並省略標籤。 Google 在 2009 年宣布,它忽略了 Web 排名的關鍵字元標籤,因此將其視為可選。一些內部網站搜尋工具仍然會讀取它。

og:locale 是如何從語言領域建構的?

兩個字母的語言值會添加其通常的區域,因此 en 變為 en_US,ja 變為 ja_JP,fr 變為 fr_FR。對於不同的區域,鍵入完整的區域設置,例如 en_GB 或 pt-BR,並且它用於 language_TERRITORY 形式 Open Graph expect 中的 og:locale。語言值也寫為鍵入到語言元標籤中。

我的標題和元描述應該多久？

目標是大約 50 到 60 個字元的標題和大約 120 到 160 個字元的描述。除了這些長度之外，Google 通常會在搜尋結果中截斷文字。生成器在您鍵入時會計數字元，並在可能切斷欄位時警告您。

什麼是 Open Graph 標籤?我需要它們嗎?

Open Graph 標籤是元標籤,用於控制在 Facebook、LinkedIn、Slack 和許多其他平台上分享時頁面的外觀。如果沒有它們,共享連結可能不會顯示任何圖像或錯誤的文字。如果您想要有吸引力、可預測的連結預覽,強烈建議新增 Open Graph 標籤。

兩種 Twitter 卡類型有什麼不同？

「摘要」卡片在標題和描述旁邊顯示一個小方形縮圖，而「summary_large_image」顯示它們上方的大型橫幅圖像。當您擁有寬廣、高品質的共享圖像並希望它主導預覽時，請使用大圖像卡；使用摘要以獲得更緊湊的外觀。

我要將生成的元標記放在哪裡？

將生成的區塊貼到 HTML 頁面的元素中，最好在其他腳本之前靠近頂部。在 Next.js、React 或 Vue 等框架中，您將透過框架的 Head 或 Metadata API 添加等效標籤。產生的 HTML 是準確使用哪些標籤和值的直接參考。

如果我有 Open Graph 標籤,我還需要規範 URL 嗎?

是的。規範連結告訴搜尋引擎哪個 URL 是頁面的權威版本，這有助於避免重複內容問題，而 OG:URL 設定社交預覽中使用的 URL。它們服務於不同的目的，因此即使價值觀通常相同，但設定兩者都是很好的做法。

元標記產生器是免費的還是私有的？

是的。它是免費的,無需註冊,每日複製使用量有限制(客人每天 10 次,註冊帳戶每天 50 次),並且每個標籤都在瀏覽器內用 JavaScript 內建。您輸入的文字、URL 和圖像連結永遠不會傳送到伺服器,因此您可以安全地為未發布的或內部頁面準備元資料。

添加元標記是否保證更好的排名？

元標記有助於搜尋引擎和社交平台正確理解和顯示您的頁面，但它們是眾多因素之一。寫得好的標題和描述可以提高點擊率，結構化數據可以實現豐富的結果，但內容品質、連結和技術健康仍然推動排名。將良好的元標記視為必要的基礎，而不是排名捷徑。

元標

元標記產生器

Q: 這個元標籤標題產生器是否自行寫入 標籤?

是的。無論您在頁面標題中輸入什麼,都會寫為 元素,並重複為 og:title 和 twitter:title。欄位旁邊的計數器會變成紅色超過 60 個字符,輸出上方會出現警告,30 個字符以下的標題會收到一條註釋,表明有空閒空間。它不建議給您措辭;標題文字是您寫的。

Q: 我可以在這裡產生一個關鍵字元標記嗎?它仍然有用嗎?

是的,填寫關鍵字(逗號分隔),輸出獲得 行;將其留空並省略標籤。 Google 在 2009 年宣布,它忽略了 Web 排名的關鍵字元標籤,因此將其視為可選。一些內部網站搜尋工具仍然會讀取它。

Q: 我的標題和元描述應該多久？

目標是大約 50 到 60 個字元的標題和大約 120 到 160 個字元的描述。 除了這些長度之外，Google 通常會在搜尋結果中截斷文字。 生成器在您鍵入時會計數字元，並在可能切斷欄位時警告您。

Q: 我要將生成的元標記放在哪裡？

將生成的區塊貼到 HTML 頁面的 元素中，最好在其他腳本之前靠近頂部。 在 Next.js、React 或 Vue 等框架中，您將透過框架的 Head 或 Metadata API 添加等效標籤。 產生的 HTML 是準確使用哪些標籤和值的直接參考。

Q: 如果我有 Open Graph 標籤,我還需要規範 URL 嗎?

是的。 規範連結告訴搜尋引擎哪個 URL 是頁面的權威版本，這有助於避免重複內容問題，而 OG:URL 設定社交預覽中使用的 URL。 它們服務於不同的目的，因此即使價值觀通常相同，但設定兩者都是很好的做法。

為任何頁面產生 SEO、Open Graph 和 Twitter 卡元標籤,並進行即時預覽和長度檢查

Page Title64/60

Meta Description145/160

Keywords (comma separated)

Author

Canonical URL

Page URL (og:url)

Site Name

Social Image URL

Image Alt Text

Twitter Handle

Theme Color

OG Type

Twitter Card

Robots

Language

Include charset

Include viewport

Title is 64 characters; over ~60 it may be truncated in search results.

Generated Meta Tags

<!-- Primary Meta Tags -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Free Online Developer Tools - Format, Convert &amp; Generate | Toolz</title>
<meta name="description" content="A fast, private collection of 600+ browser-based tools for developers: JSON, PDF, image, text, and more. No signup, no uploads, 100% client-side." />
<meta name="keywords" content="developer tools, json formatter, online tools, free tools" />
<meta name="author" content="Toolz" />
<meta name="robots" content="index, follow" />
<meta name="language" content="en" />
<meta name="theme-color" content="#4466EE" />
<link rel="canonical" href="https://toolz.dev/" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://toolz.dev/" />
<meta property="og:title" content="Free Online Developer Tools - Format, Convert &amp; Generate | Toolz" />
<meta property="og:description" content="A fast, private collection of 600+ browser-based tools for developers: JSON, PDF, image, text, and more. No signup, no uploads, 100% client-side." />
<meta property="og:site_name" content="Toolz" />
<meta property="og:image" content="https://toolz.dev/images/og/meta-tag-generator.webp" />
<meta property="og:image:alt" content="Toolz - free online developer tools" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://toolz.dev/" />
<meta name="twitter:title" content="Free Online Developer Tools - Format, Convert &amp; Generate | Toolz" />
<meta name="twitter:description" content="A fast, private collection of 600+ browser-based tools for developers: JSON, PDF, image, text, and more. No signup, no uploads, 100% client-side." />
<meta name="twitter:image" content="https://toolz.dev/images/og/meta-tag-generator.webp" />
<meta name="twitter:image:alt" content="Toolz - free online developer tools" />
<meta name="twitter:site" content="@toolz" />
<meta name="twitter:creator" content="@toolz" />

JSON-LD Structured Data

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Free Online Developer Tools - Format, Convert & Generate | Toolz",
  "url": "https://toolz.dev/",
  "description": "A fast, private collection of 600+ browser-based tools for developers: JSON, PDF, image, text, and more. No signup, no uploads, 100% client-side.",
  "image": "https://toolz.dev/images/og/meta-tag-generator.webp",
  "author": {
    "@type": "Person",
    "name": "Toolz"
  }
}
</script>

什麼是元標記產生器？

元標籤產生器建立駐留在頁面 <head> 中的 HTML 區塊,並告訴搜尋引擎和社交網路如何顯示您的頁面。您填寫一次標題、描述、圖像和其他一些字段,工具輸出格式正確的元標籤 - 標準 SEO 標籤、Facebook 和 LinkedIn 的Open Graph 標籤以及 Twitter 卡標籤 - 您將其直接貼到模板中。不再手動鍵入重複屬性="og:..."行或忘記twitter:卡標籤。

取得這些標籤很重要,因為它們控制您的搜尋片段和連結預覽。 <title> 和元描述塑造了您在 Google 中的結果; Open Graph 標題、描述和圖像決定共享連結在社交提要中的外觀。此產生器使所有三個內容與運行經過長度搜尋引擎顯示的單組輸入、標記標題和描述保持同步,並且可以為結構化資料添加匹配的 JSON-LD 區塊。

一切都運行客戶端。您輸入的 URL、複製和圖像連結永遠不會上傳,因此您可以私下為未發布的頁面或內部工具準備標籤。載入後,生成器會離線工作,輸出是您擁有的純 HTML - 複製它,將其放入框架中,然後發貨。

三個細節解釋了大多數損壞的預覽。 Open Graph 影像 URL 必須是絕對的,包括方案,因為取得它們的爬蟲沒有頁面上下文來解決相對路徑。 Twitter 會回退到Open Graph,因為它沒有 Twitter 標籤,因此完整的 og 集加上卡片類型覆蓋兩個平台,並且不需要複製每個值。每個平台都會積極快取預覽,因此在該平台自己的偵錯工具中重新抓取 URL 之前不會出現固定標籤。長度警告反映了 Google 截斷的位置,而不是硬限制:較長的描述有效且將被刪除,重複標題的描述會浪費其擁有的空間。

用作元標籤標題產生器,它會在您鍵入時顯示長度問題。輸入用於小房間的手工橡木辦公桌,以實木和油建造,頁面標題和計數器在 72/60 處變紅,並警告標題可能會被截斷。將其切換到小房間的手工橡木辦公桌,計數器讀數為 34/60,警告清除,相同的文字落在標題 og:title 和 twitter:title 標籤中。一個欄位提供搜尋、Open Graph 和 Twitter 輸出,這就是 SEO 的元標籤產生器應該做的事情。

如何使用元標記產生器？

輸入您的核心詳細資料
填寫頁面標題和元描述。字元計數器和警告會告訴您何時超過通常顯示的長度搜尋引擎。
新增社交和網站資訊
設定規範 URL、網站名稱、社交分享圖像和 Twitter 句柄,以便您的 Open Graph 和 Twitter 卡預覽完成。
選擇標籤選項
選擇Open Graph 類型、Twitter 卡樣式、機器人指令以及是否包含字元集和視窗標籤。輸出即時更新。
複製產生的 HTML
複製完整的元標記區塊並將其貼到您的頁面的 <head>。也可以選擇複製匹配的 JSON-LD 結構化資料片段。

主要特點

SEO、Open Graph 和 Twitter 合而為一
將標準搜尋標籤加上 Open Graph 和 Twitter 卡標籤一起生成,並與一組輸入保持同步
即時長度警告
標記超過 60 個字元的標題和超過 160 個字元的描述，因此您的片段不會在搜尋結果中被截斷
JSON-LD 結構化資料
可選擇輸出匹配的網站或文章 JSON-LD 區塊，以加強您頁面對搜尋引擎的意義
正確的 HTML 逃避
文字中的引號、護目鏡和夾角括號安全地逃脫，因此生成的標籤永遠不會破壞您的標記

Frequently Asked Questions

它產生標準 SEO 標籤 - 標題、描述、關鍵字、作者、機器人和規範 - 以及 Open Graph 標籤(og:title、og:description、og:image、og:url 等)和 Twitter 卡標籤。它還可以輸出 JSON-LD 結構化資料區塊。您選擇要填寫的字段,並且僅包含包含內容的標籤。

Related Tools

seo

Content Analyzer

Audit any page for on-page SEO and readability: title, description, headings, alt text, internal links, Flesch score and keyword frequency, with a score out of 100.

seo

Hreflang Generator

Free hreflang generator for multilingual and multi-region sites - build hreflang tags as HTML link tags, XML sitemap entries, or an HTTP header. Validates codes and x-default. Runs client-side.

HRG

seo

htaccess Redirect Generator

Generate Apache .htaccess 301 and 302 redirect rules from a list of old-to-new URLs, plus force-HTTPS and www canonicalization directives, all in the browser.

OGP

seo

Open Graph Preview

Preview how your link will look on Facebook, X, LinkedIn, Slack, and Discord, validate your og: tags, and copy a correct meta block

Comments

0 comments

No comments yet. Be the first to share your thoughts!

meta tag generatormeta tag title generatormeta tag generator for seometa tag seo generatorkeyword meta tag generatoropen graph generatorog tag generatortwitter card generatorseo meta tagsmeta description generatorsocial meta tagshtml head tagsmeta tags for website

了解更多

閱讀完整的元標記產生器指南

Command Palette

元標記產生器

什麼是元標記產生器？

如何使用元標記產生器？

輸入您的核心詳細資料

新增社交和網站資訊

選擇標籤選項

複製產生的 HTML

主要特點

SEO、Open Graph 和 Twitter 合而為一

即時長度警告

JSON-LD 結構化資料

正確的 HTML 逃避