学习WordPress页面头部的Meta信息

2019-12-20 13:09

#HTML5

#WordPress

#meta

引言

这个学习需求，来自冯大辉老师在其免费知识星球“互联网消息”中，对一个年轻小朋友关于工作和成长的问题，给出的回答：“给别人讲一下页面头部的那些Meta都是干啥的”。见下图摘录：

于是我悄悄在浏览器中输入了“wordpress.com”网址，然后打开源代码瞄了一眼。果然，我这样的过时程序员，立马就在现代 HTML5 代码面前完全迷失了方向。

虽说我仅仅是刚入门 HTML5 （前些天刚手写了一个极简网页样式，将其做成一个hugo theme，并用到本网站上），甚至可以说只是远远瞧见了门的样子，但遇到这样的“挑战”，还是不妨沉下心，顺带着学习一遍，也是好的。

然后，便有了这一篇。

概览

首先贴一下wordpress.com整个头部（部分过长内容做了删减，并以“…”表示）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta charset="utf-8" />
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P24PF4B');</script>
<!--
<meta property="fb:page_id" content="6427302910" />
-->
<link rel="dns-prefetch" href="//s.w.org" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//fonts.gstatic.com" />
<link rel="dns-prefetch" href="//www.googletagmanager.com" />
<meta name="google-site-verification" content="7VWES_-rcHBcmaQis9mSYamPfNwE03f4vyTj4pfuAw0" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blog Tool, Publishing Platform, and CMS &mdash; WordPress.org</title>
<meta name="referrer" content="always">
<link href="//s.w.org/wp-includes/css/dashicons.min.css?20181204" rel="stylesheet" type="text/css" />
<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//s.w.org/style/wp4.css?82" />
<link rel="shortcut icon" href="//s.w.org/favicon.ico?2" type="image/x-icon" />
<meta name="apple-itunes-app" content="app-id=335703880" />
<link rel="alternate" type="application/rss+xml" title="WordPress Blog RSS" href="http://wordpress.org/news/feed/" />
<style type="text/css"> ... </style>
<link rel="alternate" href="https://af.wordpress.org/" hreflang="af" />
<link rel="alternate" href="https://ak.wordpress.org/" hreflang="ak" />
...
<link rel="alternate" href="https://wordpress.org/" hreflang="en" />
<link rel="alternate" href="https://en-au.wordpress.org/" hreflang="en-au" />
...
<link rel="alternate" href="https://cn.wordpress.org/" hreflang="zh-cn" />
<link rel="alternate" href="https://zh-hk.wordpress.org/" hreflang="zh-hk" />
<link rel="alternate" href="https://tw.wordpress.org/" hreflang="zh-tw" />
<link rel="canonical" href="https://wordpress.org/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Blog Tool, Publishing Platform, and CMS - WordPress" />
<meta property="og:description" content="Open source software which you can use to easily create a beautiful website, blog, or app." />
<meta name="description" content="Open source software which you can use to easily create a beautiful website, blog, or app." />
<meta property="og:url" content="https://wordpress.org/" />
<meta property="og:site_name" content="WordPress" />
<meta property="og:image" content="https://s.w.org/images/home/screen-themes.png?3" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@WordPress" />
<script type="application/ld+json"> ... </script>
<script type="text/javascript" src="//s.w.org/wp-includes/js/jquery/jquery.js?v=1.11.1"></script>
<script>document.cookie='devicePixelRatio='+((window.devicePixelRatio === undefined) ? 1 : window.devicePixelRatio)+'; path=/';</script>
</head>

接下来逐条学习。

学习笔记

为方便阅读，我会采取如下格式：先摘取上面的代码，然后根据自己的理解进行讲解，同时配上相应的学习参考链接。

(1)

1

<!DOCTYPE html>

这是HTML5的标准开头，方便浏览器识别当前文件的格式。

(2)

1

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">

整个HTML的最外层标签，这里设置了三个属性：

xmlns：由于html本身是xml格式的特例，这个属性是用于定义相应的名字空间（namespace），从而帮助一个格式校验器（validator）检查是否符合相应的语法规范。这里设置的“http://www.w3.org/1999/xhtml”，其实是缺省值。
dir：内容文字方向，这里设置的“ltr”是从左到右，也是缺省值。
lang：内容语言，这里设置的“en”是英文，也是缺省值。

我不知道wordpress为什么要把这些缺省值都显式地写出来，猜测也许是为了兼容性（怕某些浏览器未遵循标准采用的别的取值？）或者性能（避免去判断并查找相应的缺省值）吧。

参考学习链接：

(3)

1

<head profile="http://gmpg.org/xfn/11">

这是HTML头部的开始，它指定了一个profile属性，然而，这个属性竟然是HTML5所不支持的，想来应该是为了兼容过去的HTML标准而给出的。打开该取值的URL，原来是一个关于HTML4 Meta的定义：“XFN 1.1 relationships meta data profile”。

参考学习链接：

https://www.w3schools.com/tags/tag_head.asp

(4)

1

<meta charset="utf-8" />

这是指定当前页面采用的字符集。也就是说，在这个标签之前，只允许最基础的ansi字符（这个所有字符集所共同兼容的），而从这个标签起，就可以采用所指定的其他字符集了。这里采用了最广泛使用的utf-8。

关于这个标签，HTML4和HTML5是有写法差异的：

HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5: <meta charset="UTF-8">

这里采用的是HTML5的写法，似乎并没有考虑兼容HTML5以前的情况。而标签末尾采用了“… />”的写法，应该是为了让其更符合XML规范。HTML能够容忍一些标签只写起始标签（<名称>）而不写结束标签（</名称>），大概是为了减轻文本内容的负担（比如常见的<br>和<img>，要每次都写结束标签，真的非常繁琐，增加了非必需的字符）。从这个角度而言，HTML又并不完全符合XML规范。

参考学习链接：

https://www.w3schools.com/tags/tag_meta.asp

(5)

1
2
3
4
5


<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P24PF4B');</script>

接下来的这几行javascript代码，我就暂时不了解其作用了。不过看其结构，(function(w,d,s,l,i){...})(window,document,...)，是定义一个函数的同时，给它套了一层括号，直接对它进行调用。效果与直接执行函数体的代码是一样的，所不同的是，简化了传入参数的写法（比如原来要写window的地方，经过传参的方式，只需要写成w即可）。从这里倒是可以看出javascript世界里“锱铢必较”的一面。

(6)

1
2
3


<!--
<meta property="fb:page_id" content="6427302910" />
-->

这一行是被注释掉了的标签，和后面的一堆<meta property="og:...，看起来都是为了Facebook的某些功能接口（Open Graph）服务的。

参考学习链接：

(7)

1
2
3
4


<link rel="dns-prefetch" href="//s.w.org" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//fonts.gstatic.com" />
<link rel="dns-prefetch" href="//www.googletagmanager.com" />

这几个行告诉浏览器，对这几个网址提前做DNS的预取，这样，浏览器再往下渲染页面时，需要从这些网址（一般都是跨域名的）获取资源时，就不用再等待DNS解析了。

参考学习链接：

(8)

1

<meta name="google-site-verification" content="7VWES_-rcHBcmaQis9mSYamPfNwE03f4vyTj4pfuAw0" />

这个是向google认证网站归属的。以便进行google搜索引擎更好地识别当前网站，并提供相应的搜索结果信息给到所属者。

参考学习链接：

(9)

1

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

这一行几乎是现代响应式网页的必备，用来让网页在不同的移动设备上，根据可视区域的大小自动调节，能有比较好的浏览体验。具体原理，已经有很多文章专门介绍和讨论了，可点击下面的链接进行更详细的学习。

参考学习链接：

(10)

1

<title>Blog Tool, Publishing Platform, and CMS &mdash; WordPress.org</title>

这一行是整个网页的标题，展示在浏览器窗口的顶部，无需多言。通常是先写名称，再写描述，最后是站点名。

(11)

1

<meta name="referrer" content="always">

这一行是告诉浏览器，在点击链接时，把请求页面一并发送给服务器。这种做法，有助于页面之间的引用关系的建立，除非涉及隐私保护，否则打开会更好。

参考学习链接：

(12)

1
2
3


<link href="//s.w.org/wp-includes/css/dashicons.min.css?20181204" rel="stylesheet" type="text/css" />
<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//s.w.org/style/wp4.css?82" />

这三行，分别载入了相应站点的css。

(13)

1

<link rel="shortcut icon" href="//s.w.org/favicon.ico?2" type="image/x-icon" />

这一行指定网站图标，将显示在浏览器标签页上，帮助读者从视觉上识别一个网页。

(14)

1

<meta name="apple-itunes-app" content="app-id=335703880" />

将当前页面关联到一个Apple iTunes的APP上。这是一种引流方法，可以把用户导向一个移动端的应用程序上，从而实现一些网页上可能支持不足的功能。

参考学习链接：

(15)

1

<link rel="alternate" type="application/rss+xml" title="WordPress Blog RSS" href="http://wordpress.org/news/feed/" />

这是提供RSS订阅的相应链接地址。

(16)

1

<style type="text/css"> ... </style>

指定网页自己的css样式表

(17)

1
2
3
4
5
6
7
8
9


<link rel="alternate" href="https://af.wordpress.org/" hreflang="af" />
<link rel="alternate" href="https://ak.wordpress.org/" hreflang="ak" />
...
<link rel="alternate" href="https://wordpress.org/" hreflang="en" />
<link rel="alternate" href="https://en-au.wordpress.org/" hreflang="en-au" />
...
<link rel="alternate" href="https://cn.wordpress.org/" hreflang="zh-cn" />
<link rel="alternate" href="https://zh-hk.wordpress.org/" hreflang="zh-hk" />
<link rel="alternate" href="https://tw.wordpress.org/" hreflang="zh-tw" />

这是帮助搜索引擎识别相应的地区和语言，从而定位到不同的网址。

参考学习链接：

(18)

1

<link rel="canonical" href="https://wordpress.org/" />

这是帮助搜索引擎识别出哪些页面是重复的，将其导向到一个最终的统一链接上。

参考学习链接：

(19)

1
2
3


<meta property="og:type" content="website" />
<meta property="og:title" content="Blog Tool, Publishing Platform, and CMS - WordPress" />
<meta property="og:description" content="Open source software which you can use to easily create a beautiful website, blog, or app." />

如前所述，这几行用于Open Graph的信息声明。

(20)

1

<meta name="description" content="Open source software which you can use to easily create a beautiful website, blog, or app." />

对网站内容进行描述。

(21)

1
2
3


<meta property="og:url" content="https://wordpress.org/" />
<meta property="og:site_name" content="WordPress" />
<meta property="og:image" content="https://s.w.org/images/home/screen-themes.png?3" />

依然是面向Open Graph的信息声明。

(22)

1
2


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@WordPress" />

这两行用于声明twitter的信息。

(23)

1
2
3


<script type="application/ld+json"> ... </script>
<script type="text/javascript" src="//s.w.org/wp-includes/js/jquery/jquery.js?v=1.11.1"></script>
<script>document.cookie='devicePixelRatio='+((window.devicePixelRatio === undefined) ? 1 : window.devicePixelRatio)+'; path=/';</script>

载入并运行其他脚本，此处忽略，不做深入学习。

(24)

1

</head>

页面头部结束。

小结

WordPress作为一个被广泛使用的开源博客平台，拥有广大的客户基础。其客户的博客，不管写作目的是什么，最终形式上都是各种内容的输出。这些内容需要被传播、被聚合、被索引，相应的搜索引擎优化（SEO，Search Engine Optimization）技术，也就提供了诸多用武之地。而且随着各类社交平台和APP的兴起，相应的HTML5技术的发展，WordPress自然也会在其头部定义上，对应地下足功夫。

虽然上面这套代码，未必是优化得最好的，我的解读也未必都正确（只是自己作为初学者的一点点理解），但不失为一个学习的起点。

颜林林的个人网站

学习WordPress页面头部的Meta信息

引言

概览

学习笔记

(1)

(2)

(3)

(4)

(5)

(6)

(7)

(8)

(9)

(10)

(11)

(12)

(13)

(14)

(15)

(16)

(17)

(18)

(19)

(20)

(21)

(22)

(23)

(24)

小结

相关文章