He usado la biblioteca Jsoup para obtener los metadatos de la URL.
Document doc = Jsoup.connect("http://www.google.com").get(); String keywords = doc.select("meta[name=keywords]").first().attr("content"); System.out.println("Meta keyword : " + keywords); String description = doc.select("meta[name=description]").get(0).attr("content"); Elements images = doc.select("img[src~=(?i)\\.(png|jpe?g|gif)]"); String src = images.get(0).attr("src"); System.out.println("Meta description : " + description); System.out.println("Meta image URl : " + src);Pero quiero hacerlo en el lado del cliente usando javascript
No puede hacerlo cliente solo debido al problema cross-origin . Necesita un script del lado del servidor para obtener el contenido de la página.
O puede usar https://policies.yahoo.com/us/en/yahoo/terms/product-atos/yql/index.htmYQL . De esta forma, el YQL se usará como proxy.
O puede usar https://cors-anywhere.herokuapp.com . De esta forma, cors-anywhere se utilizará como proxy:
Por ejemplo:
$('button').click(function() { $.ajax({ url: 'https://cors-anywhere.herokuapp.com/' + $('input').val() }).then(function(data) { var html = $(data); $('#kw').html(getMetaContent(html, 'description') || 'no keywords found'); $('#des').html(getMetaContent(html, 'keywords') || 'no description found'); $('#img').html(html.find('img').attr('src') || 'no image found'); }); }); function getMetaContent(html, name) { return html.filter( (index, tag) => tag && tag.name && tag.name == name).attr('content'); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" placeholder="Type URL here" value="http://www.html5rocks.com/en/tutorials/cors/" /> <button>Get Meta Data</button> <pre> <div>Meta Keyword: <div id="kw"></div></div> <div>Description: <div id="des"></div></div> <div>image: <div id="img"></div></div> </pre>Desde el backend de node.js (Next.js) lo uso:
export const fetchMetadata = async (url) => { const html = await (await fetch(url, { timeout: 5000, headers: { 'User-Agent': 'request' } })).text() var metadata = {}; html.replace(/<meta.+(property|name)="(.*?)".+content="(.*?)".*\/>/igm, (m,p0, p1, p2)=>{ metadata[p1] = decode(p2) } ); return metadata } export const decode = (str) => str.replace(/&#(\d+);/g, function(match, dec) { return String.fromCharCode(dec); })Puede usarlo en el cliente con https://cors-anywhere.herokuapp.com/corsdemo