同じサイト内で、別のページの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>