JS动态设置META标签

771 阅读1分钟
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:site" content="@xx"/>
  <meta name="twitter:creator" content="@xx"/>
  <meta name="twitter:title" content="xxtitle"/>
  <meta name="twitter:description" content="xxdescription"/>

  <title>Document</title>
</head>

<body>

</body>

</html>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    function addMeta(name, content) {
      let meta = document.createElement('meta');
      meta.content = getQueryVariable('img');
      meta.name = 'twitter:image';
      document.getElementsByTagName('head')[0].appendChild(meta);
    }
    addMeta()

    function getQueryVariable(variable) {
      var query = window.location.search.substring(1)
      var vars = query.split('&')
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=')
        if (pair[0] == variable) {
          return pair[1]
        }
      }
      return false
    }
  })
</script>