有时候会发现分享在 twitter 的网站封面图都很好看,国外大部分网站都设置一些 Mete 信息:
CleanShot 2023-11-29 at 20.30.47@2x.png

这些 metalink 标签的作用是提供有关网站和其内容的信息,主要用于搜索引擎优化(SEO)和社交媒体分享。下面是对每个标签的详细解释:

  1. <meta name="description" content="…">:
    • 用途:提供网站页面的简短描述。
    • 内容:介绍了一个注重极简设计的笔记应用,强调其与用户思维方式相匹配,并提到集成了原生 AI 功能。
  2. <meta name="og:description" content="…">:
    • 用途:为 Open Graph 协议(主要用于社交媒体)设置页面描述。
    • 内容:与 meta name="description" 相同,用于当页面在社交媒体上分享时显示描述。
  3. <meta name="twitter:card" content="summary_large_image">:
    • 用途:定义 Twitter Card 类型,用于在 Twitter 上分享链接时的展现形式。
    • 内容:指定使用“summary_large_image”布局,这意味着分享的卡片将包含一个大的特色图片。
  4. <meta name="twitter:site" content="@reflectnotes">:
    • 用途:指定 Twitter 用户名。
    • 内容:当在 Twitter 上分享此页面时,会显示与这个用户名相关联的信息。
  5. <meta name="twitter:image" content="…">:
    • 用途:为 Twitter Card 设置特色图片。
    • 内容:提供了一个图片 URL,用于在 Twitter 上分享时展示。
  6. <meta name="og:title" content="Reflect">:
    • 用途:为 Open Graph 协议设置网页标题。
    • 内容:设置标题为“Reflect”,用于社交媒体分享。
  7. <meta name="og:image" content="…">:
    • 用途:为 Open Graph 设置特色图片。
    • 内容:提供了一个图片 URL,用于在社交媒体上分享时展示。
  8. <meta name="og:url" content="…">:
    • 用途:为 Open Graph 设置网页的 URL。
    • 内容:提供了网页的 URL,用于确保社交媒体分享时链接正确。
  9. <meta name="apple-mobile-web-app-title" content="Reflect">:
    • 用途:定义添加到苹果设备主屏幕的网页应用的标题。
    • 内容:指定标题为“Reflect”。
  10. <meta name="theme-color" content="#080808">:
    • 用途:定义浏览器工具栏的颜色(主要在移动设备上)。
    • 内容:设置颜色为深黑色( #080808 )。
  11. <link rel="apple-touch-icon" href="…">:
    • 用途:定义添加到苹果设备主屏幕的网页应用的图标。
    • 内容:提供了用作网页应用图标的图片 URL。

这些标签的整体目的是提升用户体验和网站在社交媒体平台上的展示效果,同时也有助于提高搜索引擎排名。