臧富祥 ^回到顶部

您的当前位置:首页 > seo资讯 > SEO基础 > SEO常用meta标签

SEO常用meta标签

所属分类: SEO基础   2018-12-14 16:47:58  编辑:admin  浏览次数 113 次

meta标签的组成
meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

    name属性主要用于描述网页,与之对应的属性值为contentcontent中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 

    meat标签的name属性语法格式是:<meta name="参数" content="具体的参数值"  

    其中name属性主要有以下几种参数: 

    AKeywords(关键字

    说明:keywords用来告诉搜索引擎你网页的关键字是什么。 

    举例:<meta name ="keywords" content="science, education,culture,politics,ecnomicsrelationships, entertaiment, human" 

    Bdescription(网站内容描述

   说明:description用来告诉搜索引擎你的网站主要内容。 

   举例:<meta name="description" content="This page is about the meaning of science, education,culture." 

    Crobots(机器人向导

    说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。 

    content的参数有all,none,index,noindex,follow,nofollow。默认是all 

   举例:<meta name="robots" content="none" 

    Dauthor(作者

    说明:标注网页的作者 

举例:<meta name="author" content="zangfuxiang@171780793.com"

 F、规范链接标签

<link rel="canonical" href="https://www.zangfuxiang.com/" />

 G、预加载标签

 H、<link rel="dns-prefetch" href="//www.rndsystems.com" />

 I、<link href="https://www.rndsystems.com/" rel="alternate" hreflang="x-default" />

 J、<link href="https://www.rndsystems.com/cn" rel="alternate" hreflang="zh-hans" />

在看Wordpress主题源码的时候,发现这样一行代码:

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="http://xzl52199.blog.163.com/blog/<?php bloginfo('rss2_url'); ?>" />

原来rel只是<link>标签的一个属性,定义了当前文档与 Web 集合中其他文档的关系。link 元素是一个空元素,它仅包含属性。且只能存在于 head 部分,不过它可出现任何次数。在 html 中,<link> 标签没有结束标签。在 XHTML 中,<link> 标签必须被正确的关闭。

除了HTML的标准通用属性之外,link元素还包括很多可选属性,如: charset, href, hreflang, media, rel, rev, target, titletype。这些属性中,target只允许在 TransitionalFrameset两种DTD中使用,其它都可在Strict, TransitionalFrameset三种DTD中使用。

这些属性中,rel属性是核心。还是来看看我搜集到的rel属性和在wordpress内对link元标签的处理:

 

外部样式表的调用属性

1) 显示器样式表

link标签最多的使用就是用来调用外部样式表,例如下面这样:

<link rel="stylesheet" href="http://www.zijin5.com/wp-content/ themes/style.CSS" type="text/css" media="screen" />

其中href是目标文档的URL type则规定了目标URLMIME 类型,而media规定了文档将显示在什么设备上。

2)打印设备样式表

下面这个webdesignerwall 样式表调用就规定了文档显示在打印设备上时的CSS样式 :

<link rel="stylesheet" href="http://www.webdesignerwall.com/ wp-content/themes/wdw/print.css" type="text/css" media="print" /> 

3)可替换样式表

你可能还会在一些网页中看到诸如下面的样式表调用代码:

<link rel="alertnate stylesheet" href="http://www.zijin5.com /wp-content/themes/red.css" type="text/css" media="screen" />

这段代码定义了一个可替换的样式表,它和第一个link元素同时使用,第一个定义了首选样式,而这个则让用户可选择替换的样式。但这个替换操作需要 浏览器支持,但很多浏览器比如IE都是不支持的。

所以使用到替换样式的网页,一般都用一些样式表切换的JS,让用户可以自由切换界面样式。这个应该大家都见过,一些网站会给网页定义多种配色。 稍高阶的一些,还可以利用 JS弄成随时间变化样式的,比如白天的时候显示成明色,晚上的时候显示成暗色。

 

定义网站收藏夹图标

<link rel="shortcut icon" href="http://www.zijin5.com/ wp-content/themes/images/favicon.ico" type="images/x-icon"/>  <link rel="icon" href="http://www.zijin5.com/ wp-content/themes/images/favicon.png" type="images/png"/> 

关于这个调用我自己也还有些迷糊,我实验的结果是:

 

IE只支持ico格式的favicon;

rel属性必须包含shortcut, 才会在IE下显示;

我在制作透明格式的ico时总出问题,总会出现黑底,就算弄了IE下非黑底了,在Chrome下又变成黑底。

于是,制作一个透明的ico和一个透明的png, 第一段供IE浏览器调用,第二段供其它浏览器调用;

注释你也可以不使用这个link元素,而直接制作一个favicon.ico文件,并放到网站根目录。

 

顺定分享为你的网站添加Apple Touch图标

iphoneiPod Touch设备允许用户添加网站的链接到主屏上,使用下面的代码可以为你的网站指定一个Apple Touch图标:

<link rel="apple-touch-icon" href="http://www.zijin5.com/ wp-content/themes/images/apple-touch-icon.png" />

对于国内的用户来说,使用iPhone的人还不多,即使很多,会把你网站放到主屏?那恐怕不是我们这些一般的小网站能够做到的。

 

WordPress中的link元素

1) RSS地址和Pingback地址

下面是WordPress默认主题对RSS2地址,Atom地址和Pingback地址的定义。具体原理俺觉得很深奥很复杂,就不研究了。反正你的 博客需要它,Atom好像不要也可以?

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="http://xzl52199.blog.163.com/blog/<?php bloginfo('rss2_url'); ?>" />  <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="http://xzl52199.blog.163.com/blog/<?php bloginfo('atom_url'); ?>" />  <link rel="pingback" href="http://xzl52199.blog.163.com/blog/<?php bloginfo('pingback_url'); ?>" />

2) 用于远程发布的link元素

如果你的主题中有<?php wp_head(); ?>这个函数,下面这两个link元素就会出现:

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />  <link rel="wlwmanifest" type="application/wlwmanifest+xml"  href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" />

这两个元素主要供远程发布使用,比如你使用Windows Live Write等桌面博客编辑器来发布文章。如果你并不需要这个功能,那完全可以把这两个元素删除,删除的方法是,打开你WordPress主题的 functions.php, 在最底部的<?php } ?> 或者 ?> 标签之前,插入下面的代码:

remove_action('wp_head', 'rsd_link'); remove_action('wp_head', 'wlwmanifest_link');

注释你可能在想,既然是<?php wp_head(); ?>函数生成了这两个东西,把它删除不就可以了。是的,如果你预计你其它任何插件都不会需要到这个函数,那就删吧。

 

防止内容重复的canonical属性

谷歌、雅虎和live search宣布支持Link的一个新属性Canonical,主要作用 是为网页指定权威链,以解决重复内容问题。