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