用途
新着
履歴
分類

JavaScript 別ページのOG情報を取得

JavaScript 別ページのOG情報を取得
JavaScript 別ページのOG情報を取得
JSでHTMLページのOG情報を取得して、ページ内に表示するサンプルです。通信するページへはアクセス許可があるページに限ります。

同じサイト内で、別のページのOG情報を取得する時のサンプルです。

OG情報とはページをSNSでシェアするときなどに読み込まれるページの概要をまとめた情報です。

同じドメイン内や許可のあるサイトの場合、JSでその情報を解析して、抽出することができます。

このサイトの別のページから読み込むサンプルを作ったので、その実行結果は以下になります。

読み込んだURL

読み込んだページタイトル

読み込んだページ画像

JSは以下になります。


document.addEventListener("DOMContentLoaded", function(){
  //同じドメイン上のアクセスできるページURL
  const url = "https://www.kipure.com/article/337/";

  //fetchAPIを使ってHTMLの内容を取得 XMLHttpRequestの後継
  fetch(url).then(res => res.text()).then(text => {
      //DOMParserを使って簡単パース
      const el = new DOMParser().parseFromString(text, "text/html")

      //headの子要素を取得
      const headEls = (el.head.children)

      Array.from(headEls).map(val => {
          //property名を取得
          const pro = val.getAttribute('property')
          //property名がなければ離脱
          if (!pro) return;
          //contentの値を取得してコンソールに出力
          console.log(pro, val.getAttribute("content"))

          if(pro === 'og:url'){
            demoUrl.innerHTML = val.getAttribute("content");
          }

          if(pro === 'og:title'){
            demoTitle.innerHTML = val.getAttribute("content");
          }

          if(pro === 'og:image'){
            var d = document.getElementById("demoImage");
            d.setAttribute("src", val.getAttribute("content"));
          }
      })

    })
});

出力するHTMLはこちら

<p class=down >読み込んだURL</p>
<div id="demoUrl"></div>

<p class=down >読み込んだページタイトル</p>
<div id="demoTitle"></div>

<p class=down >読み込んだページ画像</p>
<div class="demo_space">
    <img id="demoImage">
</div>

公開 2021-05-05 18:45:28
更新 2021-05-05 21:41:30
このページの二次元コード

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2021 kipure
Top