本文已参与「新人创作礼」活动，一起开启掘金创作之路

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>
     );
   };

meta标签理解及使用

meta

理解

使用案例