头部标签元素和搜索引擎优化SEO

in WP优化 , have 5 Comments , 440Views

在一个网页中，头部元素<head></head>包含了一个网站的基本信息概要，这些文档的基本概要信息，也称之为元数据meta. 在<head>元素中通常包含<title>, <base>, <link>, <style>, <meta>, <script>, <noscript>。

通常元数据是关于你发送给搜索引擎的网页的所有信息，对你的访问者是不可见的。还有包括另外的社交关系图标元数据Open Graph tags通常也是搜索引擎SEO优化的一个方面。

下述内容将结合wordpress的wp-head()函数进行讲解。

<title> 元素

定义文档的标题：显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

内容分类：元数据内容。
允许内容：非空字符或特殊字符（whitespace）的文本
标签遗漏：同时需要开标签和闭标签。注意：遗漏 </title> 标签会导致浏览器忽略掉页面的剩余部分。
允许的父标签一个 <head> 元素只能包含一个 <title> 元素
允许的无障碍角色：无
DOM 接口：HTMLTitleElement

搜索引擎优化SEO：页面标题通常是搜索引擎算法用来确定在搜索结果中列出页面顺序的组件之一。

好标题的一些准则和技巧：

标题长度建议在20到60字符之间，转为汉字通常在10个汉字到30个汉字；
不要用关键词堆砌成无意义的句子；
标题内容要表达成你可以为受众提供什么样的价值信息；
确保你的标题是唯一性

<base> 元素

指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素

内容类别:元数据内容。
合法的内容:无，它是一个empty element
标签省略:该标签不能有结束标签。
合法的父级:任何不带有任何其他 <base> 元素的<head> 元素
合法的 ARIA 角色:无
DOM 接口:HTMLBaseElement

此元素对SEO影响不大，但使用带来便捷性，使用注意如下：

必须在其他任何属性是URL的元素之前。例如：<link> 的 href 属性。
如果指定了多个 <base> 元素，只会使用第一个 href 和 target 值, 其余都会被忽略。
页内锚：指向文档中某个片段的链接
例如：给定 <base href="https://colinqi.com/goto/aHR0cHM6Ly9leGFtcGxlLmNvbQ==" rel="nofollow" target="_blank">
以及此链接 <a href="#anchor">Anker</a>
链接指向 https://example.com/#anchor
Open Graph 标签不接受 <base>

HTML外部资源链接元素 (<link>)

规定了当前文档与外部资源的关系, 最常用于链接样式表. 主要功能如下：

引入一个css文件

<link href="https://colinqi.com/goto/ZGVmYXVsdC5jc3M=" rel="nofollow" target="_blank" rel="stylesheet" title="Default Style">
<link href="https://colinqi.com/goto/ZmFuY3kuY3Nz" rel="nofollow" target="_blank" rel="alternate stylesheet" title="Fancy">
<link href="https://colinqi.com/goto/YmFzaWMuY3Nz" rel="nofollow" target="_blank" rel="alternate stylesheet" title="Basic">

提供用于不同用法上下文的图标

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://colinqi.com/goto/ZmF2aWNvbjE0NC5wbmc=" rel="nofollow" target="_blank"> <!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://colinqi.com/goto/ZmF2aWNvbjExNC5wbmc=" rel="nofollow" target="_blank"> <!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://colinqi.com/goto/ZmF2aWNvbjcyLnBuZw==" rel="nofollow" target="_blank"> <!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://colinqi.com/goto/ZmF2aWNvbjU3LnBuZw==" rel="nofollow" target="_blank"> <!-- basic favicon -->
<link rel="icon" href="https://colinqi.com/goto/ZmF2aWNvbjMyLnBuZw==" rel="nofollow" target="_blank">

通过媒体查询有条件地加载资源：可以在media属性中提供媒体类型或查询; 然后，只有在媒体条件为true时，才会加载此资源。

<link href="https://colinqi.com/goto/cHJpbnQuY3Nz" rel="nofollow" target="_blank" rel="stylesheet" media="print">
<link href="https://colinqi.com/goto/bW9iaWxlLmNzcw==" rel="nofollow" target="_blank" rel="stylesheet" media="all">
<link href="https://colinqi.com/goto/ZGVza3RvcC5jc3M=" rel="nofollow" target="_blank" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="https://colinqi.com/goto/aGlnaHJlcy5jc3M=" rel="nofollow" target="_blank" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

样式表加载事件：当样式表以及它引用的部分全部加载完毕，load事件就会在样式表应用到内容之前立即触发。

<script>
function sheetLoaded() {
// Do something interesting; the sheet has been loaded
}

function sheetError() {
alert("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="https://colinqi.com/goto/bXlzdHlsZXNoZWV0LmNzcw==" rel="nofollow" target="_blank" onload="sheetLoaded()" onerror="sheetError()">

预加载例子

<link rel="preload" href="https://colinqi.com/goto/Zm9udHMvemFudHJva2Utd2ViZm9udC53b2ZmMg==" rel="nofollow" target="_blank" as="font" type="font/woff2" crossorigin>

<style>元素

包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。

<meta> 元素

表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息。

Meta description 描述标签

建议字符长度在120到156个字符长度，也就是汉字在30~60个左右为佳
内容要明确表述能够为读者带来什么样有价值的内容
要带有积极引导的语言call-to-action
要包含你需要的关键词
对于产品，可以直接将重要的产品信息写入到描述标签
确保描述标签与同一文章内容要相关联
确保每一个描述标签都是独一无二，不重复的。

Meta Property=og标签

og是一种新的HTTP头部标记，即Open Graph Protocol：The Open Graph Protocol enables any web page to become a rich object in a social graph.+ n3 }。即这种协议可以让网页成为一个“富媒体对象”。用了Meta Property=og标签，就是你同意了网页内容可以被其他社会化网站引用等，目前这种协议被SNS网站如Fackbook、renren采用。

SNS已经成为网络上的一大热门应用，优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率，2010年F8会议上Facebook公布了一套开放内容协议(Open Graph Protocol)，任何网页只要遵守该协议，SNS就能从页面上提取最有效的信息并呈现给用户。

function get_tag_id() {
$current_tag = single_tag_title('', false);
$tags = get_tags();
foreach($tags as $tag) {
if($tag->name == $current_tag) return $tag->term_id;
}
}
function cq_create_meta_desc() {
global $post;
$desc = cq_get_desc_post();
$blog_desc = get_bloginfo( 'description' );
$blog_name = get_bloginfo('name');
$og_locale = get_bloginfo('language');
$site_url = get_bloginfo('url');
$default_icon = $site_url."/favicon.ico";
$site_icon = esc_url(get_site_icon_url());
$og_image = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID() ), 'full');
$title = get_the_title(); // Get post title.
$link = get_permalink(); // Get post permalink.
//$archive = get_the_archive_title(); // Get archive title.
if (is_page() || is_single() || is_singular()) {
if (!empty( esc_attr($og_image[0]))) {
$og_icon = esc_attr($og_image[0]);
}
elseif (has_site_icon()) {
$og_icon = $site_icon;
}
else {
$og_icon = $default_icon;
}
} else {
if (has_site_icon()) {
$og_icon = $site_icon;
}
else {
$og_icon = $default_icon;
}
}

if (is_category()) {
$og_title = __(strip_tags(single_cat_title('', false)));
$og_url = get_category_link(get_cat_ID($og_title));
echo '<link rel="canonical" href="'.$og_url.'" />'."\n";
echo '<meta name="description" content="'.$desc.'" />'."\n";
echo '<meta property="og:title" content="'.$og_title.'" />'."\n";
echo '<meta property="og:description" content="'.$desc.'" />'."\n";
echo '<meta property="og:url" content="'.$og_url.'" />'."\n";
echo '<meta property="og:image" content="'.$og_icon.'" />'."\n";
echo '<meta property="og:type" content="article" />'."\n";
}
elseif (is_tag()) {
$og_title = __(strip_tags(single_tag_title('', false)));
$og_url = get_tag_link( get_tag_id() );
echo '<link rel="canonical" href="'.$og_url.'" />'."\n";
echo '<meta name="description" content="'.$desc.'" />'."\n";
echo '<meta property="og:title" content="'.$og_title.'" />'."\n";
echo '<meta property="og:description" content="'.$desc.'" />'."\n";
echo '<meta property="og:url" content="'.$og_url.'" />'."\n";
echo '<meta property="og:image" content="'.$og_icon.'" />'."\n";
echo '<meta property="og:type" content="article" />'."\n";

}
elseif (is_single()) {
echo '<meta name="description" content="'.$desc.'" />'."\n";
echo '<meta property="og:title" content="'.$title.'" />'."\n";
echo '<meta property="og:description" content="'.$desc.'" />'."\n";
echo '<meta property="og:url" content="'.$link.'" />'."\n";
echo '<meta property="og:image" content="'.$og_icon.'" />'."\n";
echo '<meta property="og:type" content="article" />'."\n";
}
elseif (is_page( 'archives' )) {
echo '<meta name="description" content="'.$blog_desc.'" />'."\n";
echo '<meta property="og:title" content="'.$blog_name.'" />'."\n";
echo '<meta property="og:description" content="'.$blog_desc.'" />'."\n";
echo '<meta property="og:url" content="'.$site_url.'" />'."\n";
echo '<meta property="og:image" content="'.$og_icon.'" />'."\n";
echo '<meta property="og:type" content="website" />'."\n";
}
elseif (is_page()) {
echo '<meta name="description" content="'.$desc.'" />'."\n";
echo '<meta property="og:title" content="'.$title.'" />'."\n";
echo '<meta property="og:description" content="'.$desc.'" />'."\n";
echo '<meta property="og:url" content="'.$link.'" />'."\n";
echo '<meta property="og:image" content="'.$og_icon.'" />'."\n";
echo '<meta property="og:type" content="article" />'."\n";
}
else {
echo '<link rel="canonical" href="'.$site_url.'" />'."\n";
echo '<meta name="description" content="'.$blog_name.": ".$blog_desc." || ".$desc.'" />'."\n";
echo '<meta property="og:title" content="'.$blog_name.'" />'."\n";
echo '<meta property="og:description" content="'.$blog_desc." || ".$desc.'" />'."\n";
echo '<meta property="og:url" content="'.$site_url.'" />'."\n";
echo '<meta property="og:image" content="'.$og_icon.'" />'."\n";
echo '<meta property="og:type" content="website" />'."\n";
}
echo '<meta property="og:locale" content="'.$og_locale.'" />'."\n";
echo '<meta property="og:site_name" content="'.$blog_name.'" />'."\n";
}
add_action('wp_head', 'cq_create_meta_desc');

meta name="robots" 标签

robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。

<meta name="robots" content="none">

具体参数如下：

信息参数为all：文件将被检索，且页面上的链接可以被查询；
信息参数为none：文件将不被检索，且页面上的链接不可以被查询；
信息参数为index：文件将被检索；
信息参数为follow：页面上的链接可以被查询；
信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；
信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；

5 Replies

Comment List

colinqi says:

08/11/2020 at 10:18

第二个评论，AJAX还不能用！

Log in to Reply
colinqi says:

08/11/2020 at 09:21

测试一下Ajax提交评论

Log in to Reply
- colinqi says:
  
  08/11/2020 at 09:21
  
  @colinqi 好像没效果！
  
  Log in to Reply
  - colinqi says:
    
    08/11/2020 at 09:40
    
    @colinqi 四级回复！
  - colinqi says:
    
    08/11/2020 at 09:39
    
    @colinqi 三级回复！