meta理解及使用

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

meta

meta 元素往往不会引起用户的注意，但是meta对整个网页有影响，
会对网页能否被搜索引擎检索，和在搜索中的排名起着关键性的作用。

  meta有个必须的属性content用于表示需要设置的项的值。

  meta存在两个非必须的属性http-equiv和name, 用于表示要设置的项。

  比如
  
  
  设置的项是Content-Security-Policy设置的值是upgrade-insecure-requests。
1
2
3
4
5
6
7
8
9
10
11

理解

name属性主要用于描述网页，
与对应的content中的内容主要是便于搜索引擎查找信息和分类信息用的,
用法与http-equiv相同，name设置属性名，content设置属性值。

1. author
   author用来标注网页的作者

"author" content="aaa@mail.abc.com">
1

2. description
   description用来告诉搜素引擎当前网页的主要内容，
   是关于网站的一段描述信息。

	"description" content="这是我的HTML">
1

4. keywords
   keywords设置网页的关键字，来告诉浏览器关键字是什么。
   是一个经常被用到的名称。它为文档定义了一组关键字。
   某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

"keywords" content="Hello world">
1

使用案例

利于搜索引擎的搜索SEO
和网站分享的内容设置

       
   const TKD = (props) => {
     const {
       title = "",
       keywords = "",
       description = "",
       share = {},
     } = props;

     const {
       img: shareImg = "",
       title: shareTitle = "",
       content: shareContent = "",
       callBack: shareCallBack = "",
     } = share;

     return (
       
         {title &&