meta理解及使用
本文已参与「新人创作礼」活动，一起开启掘金创作之路
meta
meta 元素往往不会引起用户的注意，但是meta对整个网页有影响，
会对网页能否被搜索引擎检索，和在搜索中的排名起着关键性的作用。
meta有个必须的属性content用于表示需要设置的项的值。
meta存在两个非必须的属性http-equiv和name, 用于表示要设置的项。
比如
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
设置的项是Content-Security-Policy设置的值是upgrade-insecure-requests。
理解
name属性主要用于描述网页，
与对应的content中的内容主要是便于搜索引擎查找信息和分类信息用的,
用法与http-equiv相同，name设置属性名，content设置属性值。
- author
author用来标注网页的作者
<meta name="author" content="aaa@mail.abc.com">
- description
description用来告诉搜素引擎当前网页的主要内容，
是关于网站的一段描述信息。
<meta name="description" content="这是我的HTML">
- keywords
keywords设置网页的关键字，来告诉浏览器关键字是什么。
是一个经常被用到的名称。它为文档定义了一组关键字。
某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
<meta name="keywords" content="Hello world">
使用案例
利于搜索引擎的搜索SEO
和网站分享的内容设置
const TKD = (props) => {
const {
title = "",
keywords = "",
description = "",
share = {},
} = props;
const {
img: shareImg = "",
title: shareTitle = "",
content: shareContent = "",
callBack: shareCallBack = "",
} = share;
return (
<Helmet>
{title && <title>{title}</title>}
{keywords && (
<meta
name="keywords"
content={keywords.replace(/[，、]/g, ",")}
/>
)}
{description && <meta name="description"
content={description} />}
<meta
name="sharecontent"
data-msg-img={shareImg}
data-msg-title={shareTitle}
data-msg-content={shareContent}
data-msg-callback={shareCallBack}
data-line-img={shareImg}
data-line-title={shareTitle}
data-line-callback={shareCallBack}
/>
</Helmet>
);
};