语义化与头标签

返回目录

语义化标签

头标签

元标签

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="expires" content="Thu, 9 Sep 2015 12:45:43 GMT" />
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url" />
<meta http-equiv="content-encoding" content="gzip" />
<meta http-equiv="allow" content="methods" />
<meta http-equiv="date" content="Thu, 9 Sep 2015 12:45:43 GMT" />
<meta http-equiv="last-modified" content="Thu, 9 Sep 2015 12:45:43 GMT" />
<meta http-equiv="location" content="5;http://www.frontendevelopers.com/" />
<meta http-equiv="refresh" content="5 url="http://www.frontendevelopers.com/" />
<meta http-equiv="window-target" content="_top" />
<meta http-equiv="www-authenticate" content="" />
<meta http-equiv="pics-label" content="labellist" />
<meta http-equiv="pragma" content="option" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="content-language" content="en-US,de" />
<meta http-equiv="content-script-type" content="text/VBscript" />
<meta
http-equiv="page-enter"
content="revealtrans(duration=seconds,transition=num)"
/>
<meta
http-equiv="page-exit"
content="revealtrans(duration=seconds,transition=num)"
/>
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/android-icon-192x192.png"
/>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />

可以使用 Favico.js 来实现动态的 Favico。

react-document-meta 或者 react-helmet

import React from 'react';
import DocumentMeta from 'react-document-meta';
class Example extends React.Component {
render() {
const meta = {
title: 'Some Meta Title',
description: 'I am a description, and I can create multiple tags',
canonical: 'http://example.com/path/to/page',
meta: {
charset: 'utf-8',
name: {
keywords: 'react,meta,document,html,tags'
}
}
};
return (
<div>
<DocumentMeta {...meta} />
<h1>Hello World!</h1>
</div>
);
}
}
React.render(<Example />, document.getElementById('root'));