Getting information from an external url’s meta tags

Asked

Viewed 190 times

1

I need to mainly get the content of this tag:

<meta property="og:image" content="www.meusite.com.br/imagem.jpg">

and put on my website as facebook does in this image:

inserir a descrição da imagem aqui

javascript html
  • 1

    You should do this via server side, with javascript will probably be barred by making requests in different domain (CORS). Via php or qq other language, you will need to use DOM functions.

  • @Carloszillner E on the use of https://crossorigin.me/?

  • cool, did not know.... but I would not make a site based on that. Look what it warns: I cannot guarantee the stability of the service, and you will probably experience service interruptions.. I’m more like doing something that depends 100% on my own application. In this case it would be making a server side script that makes a Curl access to url and using DOM functions to pick up. If you prefer to use this method you have placed, and you have jQuery in your project, I suggest you use parseHTML https://api.jquery.com/jquery.parsehtml/

1 answer

0

Try this code.(Note: Click the buttonObeter Meta Data button and wait a little). This code and only one example will be needed.

$('button').click(function(){
  var query = 'select * from html where url="' + $('input').val() + '" and xpath="*"';
  var url = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query);

  $.get(url, function(data) {
    var html = $(data).find('html');
    $('#kw').html(html.find('meta[name=keywords]').attr('content') || 'no keywords found');
    $('#des').html(html.find('meta[name=description]').attr('content') || 'no description found');
    $('#img').html(html.find('img').attr('src') || 'no image found');
  });
});
<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://stackoverflow.com/" />
<button>Obeter 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>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.