Rel attribute of HTML link tag

Time:2021-10-26

< link > labelDefines 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 exist in the head part, but it can appear any number of times. In HTML, the < link > tag has no end tag. In XHTML, < link > tags must be closed correctly.

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 can only be used in transitional and frameset DTDs, and others can be used in strict, transitional and frameset DTDs.

Among these attributes, rel attribute is the core. In this article, developeppaer introduces some rel attributes he knows and the processing of some link elements in WordPress, which is suitable for novice friends to learn.

1. Call external style sheet

(1) . display style sheet

The link tag is mostly 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" />

amonghrefIs the URL of the target document,typeSpecifies the MIME type of the target URL, andmediaSpecifies the device on which the document will be displayed.

(2) . plot device style tables

Here’s thiswebdesignerwallThe style sheet call of specifies the CSS style when the document is displayed on the printing 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 the following stylesheet calling code in 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, which is used together with the first link element. The first defines the preferred style, and this allows the user to select the alternative style. However, this replacement operation requires browser support, but many browsers such as ie do not support it.

Therefore, for web pages with alternative styles, some style sheets are generally used to switch JS, so that users can freely switch interface styles. This should be seen by everyone. Some websites will define a variety of colors for web pages. WordPress users can download if they are interestedSmall PotatoofWPDesigner7 try this WordPress Theme (orView demo), it uses a simple JS and multiple replaceable styles to allow users to change the color of web pages. For higher-level ones, you can also use js to make them change over time. For example, they are displayed in bright color during the day and dark color at night.

notes: specifying media = “all” for the preferred style and adding a print style will be more in line with the web standard (although for ordinary websites, few people want to print your web page). There is no print style defined for the Palan image. I’ll take some time to do it later:)

notes: whether to use replaceable styles is a question worth considering. If you only change the color, the overall tone remains the same, it is acceptable. But some friends, such as WordPress users, will enable multiple themes with completely different styles, and then use plug-ins to let users change freely. It may seem cool, but my advice is never to do so. It doesn’t matter whether it affects SEO, but it will make people lack a fixed image of your website.

2. Define website favorites Icon

aboutFavicon / favorites IconBaidu Encyclopedia can be viewed for details(1, 2), use the following code to call.

<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 also a little confused about this call. The result of my experiment is:

  • Ie only supports favicon in ICO format;
  • Rel attribute must contain shortcut before it can be displayed in IE;
  • I always have problems when making ICO in transparent format. There will always be a black background. Even if I get a non black background under ie, it will become a black background under chrome.
  • Therefore, a transparent ICO and a transparent PNG are made. The first segment is called by IE browser and the second segment is called by other browsers;

notes: you can also create a favicon.ico file without using the link element and put it in the root directory of the website.

Scheduled sharing: add an apple touch icon to your website

IPhone or iPod touch devices allow users to add links to websites to the home screen. Use the following code to specify an apple touch icon for your website:

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

The size of the icon is in PNG format of 57 * 57. If it is not, it will be automatically scaled. If I am not mistaken, it does not have to be made into a beautiful fillet in iPhone style. IPhone will automatically make the icon into a fillet gradient according to its style, such as last.fmapple touch icon

apple touch icon <link>标签的rel属性全解析

For domestic users, there are not many people using iPhone. Even many will put your website on the main screen? I’m afraid that’s not what we ordinary small websites can do. But it’s fun. I made one for my website and added the link element.

3. Link element in WordPress

(1) . RSS address and Pingback address

The following is the definition of RSS2 address, atom address and Pingback address in the default theme of WordPress. I think the specific principle is very profound and complex, so I won’t study it. Anyway, your blog needs it. Atom doesn’t seem to want 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 <? php wp_ head(); ?> This 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 desktop blog editors such as Windows Live write to publish articles. If you don’t need this function, you can delete these two elements. The way to delete them is to open functions.php of your WordPress theme at the bottom of <? php } ?> Or? > Before labeling, insert the following code:

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

notes: you may be thinking, since it’s <? php wp_ head(); ?> Function generates these two things. Just delete them. Yes, if you don’t expect any other plug-ins to need this function, delete it.

4. Canonical attribute to prevent duplicate content

Google, Yahoo and live search announced support for a new attribute of link around February this yearCanonical, the main function is to specify the authority chain for the web page to solve the problemDuplicate contentQuestion.

For a detailed description of this attribute, please see Google Chinese webmasterSpecify your URL format

Here, two plug-ins are recommended for WordPress users to add this attribute to your head:SEO No DuplicateorCanonical URL’s。 Whatever you want.

It’s full parsing. In fact, it’s just some commonly used ones. It’s enough for most people. If you know other important and commonly used rel attributes, you’re welcome to share them.