Javascript: サイト内にURLを貼ったときに埋め込み表示できるようにしたい。

Question

#実現したいこと

上記のようにURLを入力するとサイトのmeta情報が表示されるようにしたい。

<a href="https://www.google.com/" target="_blank">google</a>　

自社のサイトに載せたいサイトのURLはa hrefを使用すれば使えることは知っているのですが、はてなブログのようなサイトのメタ情報を表示させることが出来なくて困っています。
おそらくjavascriptでやっていることは見当がつくのですが、どのようにして実現しているのかをアドバイスを頂けたら幸いです。

Comments

[FiroProchainezo]

やりたいことがよくわからないのですが、画像のサイトはどこかにあるのですか？

Answer 1

非同期でPHPなどを実行し、URLからHTMLを取得し、適宜meta情報を取得しているのではないでしょうか。
（JavaScriptだけではそこまで取れなかったと思う）

Comments

[rails_ruby]

なるほど。
サーバーサイド側でスクレイピングをし、取得したデータを反映させればいいんですね。
ご教示いただきありがとうございました。

[m.ts10806]

ただ、スクレイピングは是非の検討が求められる技術です（私はどちらかというと非の方です）。
個人で勝手に情報を引っ張ってくるのが良いかというのは十二分に検討の余地があります。

[rails_ruby]

スクレイピングを使用しない方法はあるのでしょうか？

[m.ts10806]

descriptionから引っ張ってきていると思われるので、指定URLのHTML解析は必須でしょうね。

Answer 2

この前同じようなものを作ったので、 ご参考になればと思います。

JavaScriptはCORSの制限があるため、 フロント側からajaxなどで他サイトの情報を通常取得することはできません。

m.ts10806さんの仰るようにPHPなどのサーバーサイドで取得する必要があります。
賛否が分かれるのはやはりスクレイピングによる負荷と画像その他の著作権になると思いますが、 通常のtitleやdescriptionといったタグは検索エンジンに表示される都合上公開している情報であるものの、 ogpタグに関してはSNS等の拡散/紹介を期待して公開しているものです。

このogpタグを利用することに関して、 著作権の侵害になるかどうかというのは、 弁護士ドットコムなどでは侵害にはなりにくいという回答を見られますが、 具体的な判例も少ないですし、 SNSの拡散は許諾していてもブログ等に許諾しているつもりはなかった、 なんていうこともありそうですから、 ogpタグの利用にしても一応事前に許諾を取ったほうが無難だと思います(リンクの数が多いというときは弁護士と相談してからogpを利用する必要がありそうです)。

手順としては、
許諾を取る ⇢ PHPなどでHTMLを取得 ⇢ ogpの情報を利用してブログカードを作る
ということになりますね。

PHPでogpタグを取得するのは phpQuery が簡単でした。
毎度スクレイピングする負荷を考慮するなら、 適当なファイルにogpの情報を保存したりなど工夫は色々できると思いますが、 こういったことも許諾を取ってからが無難ですね。
画像のリンクなどはロケットニュースとニコニコ動画などの例も参考になると思います。

法律周りの問題をクリアできれば、 ブログカードを作る事自体は難しくないです。
ベストアンサーはもうついているようですが、 たまたま見かけたので回答しました(^^)