Some meta data in html head.-CSDN博客

本文链接：https://blog.csdn.net/weixin_45470563/article/details/146008414

这是一个典型的 HTML 文档的 <head> 部分，包含了一些常见的元数据、外部资源链接和 SEO 相关的标签。以下是逐行解析和说明：

1. 文档声明

<!DOCTYPE html>

声明文档类型为 HTML5。

2. `<head>` 部分

<head>

<head> 标签包含文档的元数据、外部资源链接和其他非可视内容。

3. 字符编码

<meta charset="utf-8">

指定文档的字符编码为 UTF-8，支持多语言字符。

4. 关键词

<meta name="keywords" content="HTML,CSS,JavaScript,THREE.js">

为搜索引擎提供页面关键词，帮助搜索引擎理解页面内容。

5. 视口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

设置页面视口，使页面在移动设备上能够正确缩放和显示。

6. 外部样式表

<link rel="stylesheet" type="text/css" href="style.css?v=3">

引入外部 CSS 文件 style.css，?v=3 用于缓存控制，确保浏览器加载最新版本。

7. 页面标题

<title>Nature 150 Interactive</title>

定义页面的标题，显示在浏览器标签栏中。

8. 页面描述

<meta name="description" content="Explore Nature’s archive in an interactive graphic." />

提供页面的简短描述，通常显示在搜索引擎结果中。

9. OpenGraph 元数据

<meta property="og:url" content="https://www.nature.com/immersive/d41586-019-03165-4/index.html" /> <meta property="og:type" content="article" /> <meta property="og:title" content="On the shoulders of giants" /> <meta property="og:description" content="Explore Nature’s archive in an interactive graphic." /> <meta property="og:image" content="https://www.nature.com/immersive/d41586-019-03165-4/textures/d41586-019-03165-4.jpg" />

这些是 OpenGraph 协议的元数据，用于在社交媒体（如 Facebook、LinkedIn）上分享页面时显示标题、描述和图片。
og:url：页面的 URL。
og:type：页面的类型（这里是 article）。
og:title：分享时显示的标题。
og:description：分享时显示的描述。
og:image：分享时显示的图片。

10. Twitter 元数据

<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@nature" /> <meta name="twitter:title" content="On the shoulders of giants" /> <meta name="twitter:description" content="Explore Nature’s archive in an interactive graphic." /> <meta name="twitter:image" content="https://www.nature.com/immersive/d41586-019-03165-4/textures/d41586-019-03165-4.jpg" />

这些是 Twitter Card 的元数据，用于在 Twitter 上分享页面时显示标题、描述和图片。
twitter:card：卡片类型（这里是 summary_large_image，显示大图）。
twitter:site：页面对应的 Twitter 账号。
twitter:title：分享时显示的标题。
twitter:description：分享时显示的描述。
twitter:image：分享时显示的图片。