The rel attribute of the HTML link tag

The <link> tag defines the relationship between the current document and other documents in the Web collection. The link element is an empty element that contains only attributes. This element can only appear in the head section, but it can appear any number of times. In HTML, the <link> tag has no closing tag. In XHTML, the <link> tag must be properly closed.

In addition to the standard common attributes of HTML, the link element includes many optional attributes: charset, href, hreflang, media, rel, rev, target, title, and type . Among these attributes, target is only allowed to be used in Transitional and Frameset DTDs, while the others can be used in Strict, Transitional, and Frameset DTDs.

Among these attributes, the rel attribute is the core. In this article, 123WORDPRESS.COM will introduce some rel attributes that we know, as well as the processing of some link elements in WordPress, which is suitable for novice friends to learn.

1. Calling an external style sheet

(1). Display style sheet

The link tag is most commonly used to call external style sheets, such as the following:

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

Where href is the URL of the target document, type specifies the MIME type of the target URL, and media specifies on what device the document will be displayed.

(2). Printing device style sheet

The following webdesignerwall stylesheet call specifies the CSS styles for the document when it is displayed on a print device:

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

(3). Replaceable style sheets

You may also see stylesheet calls like the following on some web pages:

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

This code defines an alternative style sheet that is used in conjunction with the first link element. The first defines the preferred style sheet, while this one allows the user to select an alternative style sheet. However, this replacement operation requires browser support, but many browsers such as IE do not support it.

Therefore, web pages that use replacement styles generally use some JS for style sheet switching, allowing users to freely switch interface styles. Everyone should have seen this. Some websites define multiple color schemes for web pages. If WordPress users are interested, they can download Small Potato 's WPDesigner 7 WordPress theme for a trial (or check out the DEMO ). It uses a simple JS and multiple replaceable styles to allow users to change the color of the web page. For more advanced ones, you can also use JS to make the style change with time, such as displaying light colors during the day and dark colors at night.

Note : Specifying media="all" for the preferred stylesheet and adding a print stylesheet will be more in line with web standards (although for normal websites, few people will want to print your pages). Palan Image does not define a print style, I will find time to do it later

Note : Whether or not to use alternative styles is a matter of discretion. If only the color scheme is changed and the overall tone remains unchanged, then it is acceptable. But some friends, such as WordPress users, will enable multiple themes with completely different styles, and then use plug-ins to allow users to change freely. This may seem cool, but my advice is don't do it. Regardless of whether it affects SEO, it will make people lack a fixed image of your website.

2. Define the website favorites icon

For a detailed introduction to favicon/bookmarks icon , please refer to Baidu Encyclopedia ( 1 , 2 ). You can call it using the following code.

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

I am still a little confused about this call, and the results of my experiment are:

• IE only supports favicons in ico format;
• The rel attribute must contain shortcut to be displayed in IE;
• I always encounter problems when making transparent ico. There is always a black background. Even if I make it non-black background in IE, it will become black again in Chrome.
• So, make a transparent ico and a transparent png, the first part is for IE browser to call, the second part is for other browsers to call;

Note : You can also not use this link element, but directly create a favicon.ico file and put it in the root directory of the website.

Shun Ding Share: Add Apple Touch Icon to Your Website

iPhone or iPod Touch devices allow users to add a link to your website to the home screen. Use the following code to assign an Apple Touch icon to your website:

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

The icon's size is 57*57 in PNG format. If not, it will be automatically scaled. And if I'm not mistaken, it doesn't have to have the beautiful rounded corners of the iPhone style. The iPhone will automatically make the icon with rounded corners gradient according to its style, such as the apple touch icon of last.fm.

For domestic users, not many people use iPhone. Even if there are many, will they put your website on the home screen? I'm afraid that's not something that our small websites can do. But just for fun, I made one for my website and added the link element.

3. The link element in WordPress

(1). RSS address and Pingback address

Below is the definition of RSS2 address, Atom address and Pingback address in the default WordPress theme. I think the specific principles are very profound and complicated, so I won’t study them. Anyway, your blog needs it, so it seems Atom can do without it?

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

(2) Link element for remote publishing

If your theme has the <?php wp_head(); ?> function, the following two link elements will appear:

 < 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" / >

These two elements are mainly used for remote publishing, for example, you use a desktop blog editor such as Windows Live Write to publish articles. If you don’t need this feature, you can delete these two elements. To delete them, open your WordPress theme’s functions.php and insert the following code at the bottom before the <?php } ?> or ?> tag:

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

Note : You may be thinking that since it is the <?php wp_head(); ?> function that generates these two things, why not just delete it? Yes, if you don't foresee any other plugins of yours needing this function, just delete it.

4. Canonical attributes to prevent duplicate content

Google, Yahoo and Live Search announced around February this year that they would support a new Link attribute called Canonical , which is mainly used to specify authoritative chains for web pages to solve the problem of duplicate content .

For a detailed introduction to this attribute, see Specifying Your URL Format in Google Chinese Webmaster.

Here are two plugins recommended for WordPress users to add this attribute to your head section: SEO No Duplicate or Canonical URL’s . Use whichever you like.

Although I said it was a complete analysis, I actually only talked about some commonly used ones, which is enough for most people. If you know other important and commonly used rel attributes, you are welcome to share them.