使用 Javascript 获取元标题和描述答案

【问题标题】：Get meta title and description with Javascript使用 Javascript 获取元标题和描述
【发布时间】：2021-05-12 01:34:03
【问题描述】：

我正在尝试从我添加到 URL 字段中的任何网站获取元标题和描述。我在这里想念什么？如果我在 URL 字段中输入内容并单击获取，则不会出现任何内容。当我在 JS 函数中为 URL 输入“https://www.espn.com/”时，它会将整个网站拉到预览中。

我错过了什么？

//DISPLAY META
$(document).ready(function() {
 
    $('.seoTitle').on('keyup', function() {
      $('.seoTitleNew').text($(this).val());
    });
  
    $('.seoMeta').on('keyup', function() {
      $('.seoMetaNew').text($(this).val());
    });
  
});
//END DISPLAY META


//GET URL META
function myMetaFunction() {
 var url = document.getElementById("seoUrlFetch").innerHTML;
  //if you try "https://www.espn.com/" below for url it pulls in the whole page
  $.get(url, function(data) {
      $(data).filter('meta[property="og:title"]').attr("content");

      document.getElementById("seoTitleDisplay").innerHTML = data;
  }); 
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <span>URL </span><input type="text" id="seoUrlFetch" class="seoURL" placeholder="Enter single URL or paste multiple URLs to fetch data from..." autocapitalize="none"> <button id="fetchURLButton" onclick="myMetaFunction()">Fetch</button>
  </div>

  <div>
     <span>Title </span><input class="seoTitle" type="text" placeholder="Your title..." autocapitalize="none">
  </div>

  <div>
     <span>Meta </span><textarea class="seoMeta" type="text" placeholder="Your meta description..." autocapitalize="none"></textarea>
  </div>
</div>

<div>
  <div>
    <p id="seoTitleDisplay" class="seoTitleNew"></p>
  </div>
  
  <div>
    <span class="seoMetaNew"></span>
  </div>
</div>

【问题讨论】：

首先，您将遇到 CORS 问题。除此之外，为什么不应该把所有的内容都放在那里呢？ document.getElementById("seoTitleDisplay").innerHTML = data; 表示“将data（整个页面内容响应）放入此元素”。
@Chase 好吧，我想我只是在提取页面的标题，而不是在“数据”中提取整个页面。有没有更好的方法来提取元数据？
您首先需要的是条目的值，而不是innerHTML，所以，var url = document.getElementById("seoUrlFetch").value;。之后我什么都没看。

标签： javascript html seo meta

【解决方案1】：

看起来您正在将 innerHTML 设置为整个返回的文档。

根据 jquery 的文档，过滤器函数不会改变您传递给它的原始参数——它构造一个新的被过滤的 jquery 对象 (https://api.jquery.com/filter/)。

试试下面的

const filteredData = $(data).filter('meta[property="og:title"]').attr("content");

document.getElementById("seoTitleDisplay").innerHTML = filteredData;

【讨论】：

谢谢，但如果我添加该信息，它会返回未定义的函数。