In addition to the standard common attributes of HTML, the link element also includes many optional attributes: charset, href, hreflang, media, rel, rev, target, title and type . Among these properties, target is only allowed to be used in two DTDs: Transitional and Frameset, and the others can be used in three DTDs: Strict, Transitional and Frameset.
Among these properties, the rel property is the core. In this article, Wulin.com introduces some rel attributes that you know and the processing of some link elements in WordPress, which is suitable for beginners to learn.
The most common use of link tags is to call external style sheets, for example:
<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 what device the document will be displayed on.
The following webdesignerwall style sheet call 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 />You may also see stylesheet calling codes on some web pages such as the following:
<link rel=alertnate stylesheet href=http://paranimage.com/wp-content/themes/v5/red.css type=text/css media=screen />This code defines a replaceable style sheet that is used simultaneously with the first link element, the first defines the preferred style, and this allows the user to choose the replaced style. However, this replacement operation requires the browser to support it, but many browsers such as IE do not support it.
Therefore, when using web pages that replace styles, they generally use some style sheets to switch JS, allowing users to freely switch interface styles. Everyone should have seen this, and some websites will define multiple colors for web pages. If WordPress users are interested, you can download Small Potato 's WPDesigner7 WordPress theme trial study (or check DEMO), which uses a simple JS and multiple replaceable styles to allow users to change the color scheme of the web page. For slightly higher-level ones, you can also use JS to change styles over time, such as bright colors during the day and dark colors at night.
Note : Specifying media=all for the preferred style and adding a print style will be more in line with the web standards (although for ordinary websites, there will not be many people who want to print your page). The Palan image has no printing style defined, so I will take time to do it later Note : Whether to use alternative styles is a question worth considering. If you only change the color scheme and the overall main tone remains unchanged, 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 seems pretty cool, but my advice is never to do that. Not to mention whether it affects SEO, it will make people lack a fixed image perception of your website.For a detailed introduction to the favicon/favorite icon, you can check Baidu Encyclopedia (1, 2), and use the following code to call it.
<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. The result of my experiment is:
iPhone or iPod Touch devices allow users to add links 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 57*57 PNG format. If not, it will automatically scale. If I am not mistaken, it does not have to be made into a beautiful rounded corner like the iPhone style. The iPhone will automatically turn the icon into a rounded corner gradient according to its style, such as the apple touch icon of last.fm.
For domestic users, there are not many people using iPhones. Even if there are many, will your website be placed on the home screen? That's probably not something that ordinary small websites like us can do. But it's fun, I made one for my website and added this link element.
Below is the definition of the default theme of WordPress for RSS2 address, Atom address and Pingback address. I think the specific principles are profound and complex, so I won’t study them. Anyway, your blog needs it, so it seems that Atom doesn't work?
<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'); ?> />If you have the function <?php wp_head(); ?> in your topic, 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 for remote publishing, such as using desktop blog editors such as Windows Live Write to publish articles. If you don't need this function, you can completely delete these two elements. The way to delete it is to open the functions.php of your WordPress theme, and insert the following code before the <?php } ?> or ?> tag at the bottom:
remove_action('wp_head', 'rsd_link');remove_action('wp_head', 'wlwmanifest_link'); Note : You may be thinking that since the <?php wp_head(); ?> function generates these two things, just delete them. Yes, if you expect any other plugin you will not need to get this function, then delete it.Google, Yahoo and live search announced support for a new property called Canonical , Link, around February this year, with the main function of specifying authoritative links for web pages to solve the problem of duplicate content.
For a detailed introduction to this attribute, please see the Specify Your URL Paradigm in Google Chinese Webmaster.
Here are two plugins that are recommended for WordPress users to add this property to your head section: SEO No Duplicate or Canonical URL's. It's easy to use.
It is said to be a full analysis, but in fact, it is just a few commonly used ones, which is enough for most people. If you also know other important and commonly used rel attributes, you are welcome to share them.