Maison >
Article > interface Web > Création d'une API de grattage de balises méta sous les lignes de code
Création d'une API de grattage de balises méta sous les lignes de code
DDDoriginal
2024-10-21 16:33:02411parcourir
Vous êtes-vous déjà demandé comment les applications de messagerie comme Whatsapp ou Telegram vous permettent de voir un aperçu d'un lien que vous envoyez ?
Aperçus des URL WhatsApp et Telegram
Dans cet article, nous allons créer une API de scraping avec Deno qui accepte une URL et récupère les balises méta correspondantes, afin que nous puissions obtenir des champs tels que le titre, la description, l'image et plus encore à partir de presque n'importe quel site Web.
{
"last-updated": "2024-10-15 15:10:02 UTC",
"user-signed-in": "false",
"head-cached-at": "1719685934",
"environment": "production",
"description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
"keywords": "software development, engineering, rails, javascript, ruby",
"og:type": "website",
"og:url": "https://dev.to/",
"og:title": "DEV Community",
"og:image": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
"og:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
"og:site_name": "DEV Community",
"twitter:site": "@thepracticaldev",
"twitter:title": "DEV Community",
"twitter:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
"twitter:image:src": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
"twitter:card": "summary_large_image",
"viewport": "width=device-width, initial-scale=1.0, viewport-fit=cover",
"apple-mobile-web-app-title": "dev.to",
"application-name": "dev.to",
"theme-color": "#000000",
"forem:name": "DEV Community",
"forem:logo": "https://media.dev.to/cdn-cgi/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png",
"forem:domain": "dev.to",
"title": "DEV Community"
}
plutôt cool, n'est-ce pas ?
Balises méta et pourquoi en avons-nous besoin
Les balises méta sont des éléments HTML utilisés pour fournir des informations supplémentaires sur une page aux moteurs de recherche et à d'autres clients.
Ces balises incluent généralement un attribut de nom ou de propriété qui définit le type d'informations et un attribut de contenu qui contient la valeur de ces informations. Voici un exemple de deux balises méta :
<meta name="description" content="The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.">
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png">
La première balise fournit une description de la page, tandis que la seconde est une balise Open Graph qui définit une image à afficher lorsque la page est partagée sur les réseaux sociaux.
Une application pratique des balises méta consiste à créer un gestionnaire de favoris. Au lieu d'ajouter manuellement le titre, la description et l'image de chaque signet, vous pouvez automatiquement extraire ces informations de l'URL du signet à l'aide de balises méta.
Ouvrir le graphique
Open Graph est un protocole Internet créé à l'origine par Facebook pour standardiser l'utilisation de métadonnées dans une page Web pour représenter le contenu d'une page. Il aide les réseaux sociaux à générer des aperçus de liens riches.
En savoir plus ici.
Pourquoi Déno ?
Deno a des paramètres par défaut sécurisés, ce qui signifie qu'il nécessite une autorisation explicite pour accéder aux fichiers, au réseau et à l'environnement, réduisant ainsi le risque de failles de sécurité.
Deno est construit sur les standards du Web, utilise des modules ES et vise à utiliser les API de la plate-forme Web (comme fetch) par rapport aux API propriétaires, ce qui rend le code Deno très similaire au code que vous écrirez dans le navigateur - mais a encore quelques spécifications écart par rapport au navigateur.
Deno intègre la prise en charge de TypeScript, vous permettant d'écrire du code TypeScript sans étape de construction.
Deno est livré avec une bibliothèque standard qui comprend des modules pour les tâches courantes telles que les serveurs HTTP, les opérations du système de fichiers, etc.
Deno fournit un exécuteur Linter, Formatter et Test, vous permettant d'utiliser la plate-forme au lieu de compter sur des packages ou des outils tiers, ce qui en fait un outil tout-en-un pour le développement Javascript.
Deno fournit Deno Deploy, une plate-forme évolutive pour les applications JavaScript/Typescript sans serveur distribuées à l'échelle mondiale, garantissant une latence minimale et une disponibilité maximale.
L'API que nous construisons comprendra deux parties, une fonction de récupération et d'analyse des balises méta, et un serveur API qui répondra aux requêtes HTTP.
Obtenir les balises méta
Commençons par accéder à Deno Deploy et nous connecter.
Après vous être connecté, cliquez sur "Nouveau terrain de jeu"
Cela nous donnera un point de départ pour bonjour le monde.
Nous allons maintenant ajouter une fonction appelée getMetaTags qui accepte une URL et utilise l'API Fetch pour obtenir le code HTML de l'URL demandée et le transmet à un package pour l'analyse HTML (deno-dom).
Pour ajouter deno-dom à notre projet, nous pouvons utiliser le gestionnaire de packages jsr :
Nous allons maintenant utiliser l'API Fetch pour obtenir le code HTML sous forme de texte :
{
"last-updated": "2024-10-15 15:10:02 UTC",
"user-signed-in": "false",
"head-cached-at": "1719685934",
"environment": "production",
"description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
"keywords": "software development, engineering, rails, javascript, ruby",
"og:type": "website",
"og:url": "https://dev.to/",
"og:title": "DEV Community",
"og:image": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
"og:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
"og:site_name": "DEV Community",
"twitter:site": "@thepracticaldev",
"twitter:title": "DEV Community",
"twitter:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
"twitter:image:src": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
"twitter:card": "summary_large_image",
"viewport": "width=device-width, initial-scale=1.0, viewport-fit=cover",
"apple-mobile-web-app-title": "dev.to",
"application-name": "dev.to",
"theme-color": "#000000",
"forem:name": "DEV Community",
"forem:logo": "https://media.dev.to/cdn-cgi/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png",
"forem:domain": "dev.to",
"title": "DEV Community"
}
Après avoir obtenu le code HTML, nous pouvons utiliser deno-dom pour l'analyser, puis utiliser les fonctions DOM standard comme querySelectorAll pour obtenir tous les éléments méta HTML, les parcourir et utiliser getAttribute pour obtenir le nom, la propriété et le contenu de chacun. de ces balises :
<meta name="description" content="The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.">
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png">
Enfin, nous interrogerons également le
élément de la page pour l'ajouter comme champ dans notre API :<br>
</p>
<pre class="brush:php;toolbar:false">import { DOMParser, Element } from "jsr:@b-fuze/deno-dom";
</pre>
<p>Ce n'est pas exactement une balise méta, mais je pense que c'est un champ utile, donc il fera de toute façon partie de notre API. :)</p>
<p>Notre fonction finale getMetaTags devrait ressembler à ceci :<br>
</p>
<pre class="brush:php;toolbar:false"> const headers = new Headers();
headers.set("accept", "text/html,application/xhtml+xml,application/xml");
const res = await fetch(url, { headers });
const html = await res.text();
</pre>
<h2>
Le serveur
</h2>
<p>Pour plus de simplicité, j'ai décidé d'utiliser le serveur http intégré de Deno qui n'est qu'un simple appel Deno.serve().<br>
Grâce au fait que deno est construit sur les standards du Web, nous pouvons utiliser l'objet Response intégré dans l'API Fetch pour répondre aux requêtes.<br>
</p>
<pre class="brush:php;toolbar:false">curl https://metatags.deno.dev/api/meta?url=https://dev.to
</pre>
<p>Notre serveur analyse l'URL de la requête, vérifie si nous avons reçu une requête GET sur le chemin /api/meta et appelle la fonction getMetaTags que nous avons créée, puis renvoie les balises méta comme corps de réponse.</p>
<p>Nous ajoutons également deux en-têtes, le premier est Content-Type qui est nécessaire pour que le client connaisse le type de données qu'il obtient dans la réponse, qui dans notre cas est une réponse JSON.</p>
<p>Le deuxième en-tête est Access-Control-Allow-Origin qui permet à notre API d'accepter les requêtes provenant d'origines spécifiques. Dans notre cas, j'ai choisi "*" pour accepter n'importe quelle origine, mais vous souhaiterez peut-être le modifier pour n'accepter que les requêtes de l'origine de votre frontend.<br>
Notez que les en-têtes CORS n'affecteront que les requêtes effectuées par le navigateur, ce qui signifie que le navigateur bloquera la requête en fonction de l'origine spécifiée dans l'en-tête, mais qu'il sera toujours possible d'appeler directement l'API depuis un serveur. En savoir plus sur CORS ici.</p>
<p>Vous pouvez maintenant cliquer sur "Enregistrer et déployer"<br>
<img src="https://img.php.cn/upload/article/000/000/000/172949959089268.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br>
Attendez ensuite que deno déployer déploie votre code sur le terrain de jeu :<br>
<img src="https://img.php.cn/upload/article/000/000/000/172949959198494.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br>
L'URL en haut à droite est l'URL de votre terrain de jeu, copiez-la et ajoutez /api/meta?url=https://dev.to pour la voir en action, l'URL devrait ressembler à https://metatags.deno.dev /api/meta?url=https://dev.to<br>
Vous devriez maintenant voir l'API répondre avec les balises méta de dev.to !<br>
<img src="https://img.php.cn/upload/article/000/000/000/172949959294656.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"></p>
<h2>
Déploiement
</h2>
<p>L'utilisation du terrain de jeu de Deno déployer signifie que votre code est techniquement déjà déployé, qu'il est public et accessible à tous.<br>
Pour une API simple comme celle que nous construisons, un seul fichier de jeu peut suffire, mais dans de nombreux cas, nous aimerions étendre davantage notre projet, pour cela, vous pouvez utiliser l'exportation Github de Deno déployer pour créer un référentiel de code approprié pour votre API, avec prise en charge de la construction automatique sur de nouveaux push de code :<br>
<img src="https://img.php.cn/upload/article/000/000/000/172949959428755.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br>
ou depuis les paramètres de l'aire de jeux :<br>
<img src="https://img.php.cn/upload/article/000/000/000/172949959544011.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"></p>
<h2>
Mises en garde
</h2>
<p>La méthode de scraping présentée dans cet article ne fonctionne que sur les sites Web qui ont des balises méta dans le fichier HTML renvoyé par le serveur, ce qui signifie que les sites rendus par le serveur ou pré-rendus sont plus susceptibles de renvoyer des résultats corrects, les applications d'une seule page peuvent également fonctionner aussi longtemps car les balises méta sont définies au moment de la construction et non au moment de l'exécution.</p>
<h2>
Conclusion
</h2>
<p>Nous avons démontré à quel point il est simple et rapide de créer et de déployer une API avec Deno, nous avons passé en revue les balises Meta et comment nous pouvons utiliser l'API Fetch, un analyseur DOM et le serveur intégré de Deno pour créer un Les balises méta récupèrent l'API en moins de 40 lignes de code.</p>
<p>Pour voir le projet construit dans cet article, vous pouvez consulter le terrain de jeu de déploiement Deno (vous devrez ajouter /api/meta?url=https://dev.to à la barre d'URL à droite pour voir un exemple de réponse) ou ce dépôt github.</p>
<hr>
<h2>
Qu’allez-vous construire ensuite ?
</h2>
<p>J'espère que cet article vous a inspiré à explorer la puissance des balises méta et de Deno ! Essayez de créer votre propre version de l'API ou intégrez-la dans un projet comme un gestionnaire de favoris. </p>
<p>Vous êtes bloqué, vous avez des questions ou vous souhaitez montrer ce que vous avez construit ? Déposez un commentaire ci-dessous ou connectez-vous avec moi sur Twitter/X – j'aimerais avoir de vos nouvelles ! </p>
<p>Consultez mon article précédent sur la création d'une bibliothèque de gestion d'état de réaction en moins de 40 lignes de code ici.</p>
<p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">typescript</a> <a href="javascript:void(0);">json</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Object</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">while</a> <a href="javascript:void(0);">include</a> <a href="javascript:void(0);">try</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">public</a> <a href="javascript:void(0);">finally</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">copy</a> <a href="javascript:void(0);">function</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">github</a> <a href="javascript:void(0);">serverless</a> <a href="javascript:void(0);">kind</a> <a href="javascript:void(0);">http</a> <a href="javascript:void(0);">https</a> <a href="javascript:void(0);">Access</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Comment convertir des millisecondes en une date lisible dans jQuery/JavaScript ?" href="http://m.php.cn/fr/faq/1796638584.html">Comment convertir des millisecondes en une date lisible dans jQuery/JavaScript ?</a></span><span>Article suivant：<a class="dBlack" title="Comment convertir des millisecondes en une date lisible dans jQuery/JavaScript ?" href="http://m.php.cn/fr/faq/1796638593.html">Comment convertir des millisecondes en une date lisible dans jQuery/JavaScript ?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/1609.html" title="Une analyse approfondie du composant de groupe de liste Bootstrap" class="aBlack">Une analyse approfondie du composant de groupe de liste Bootstrap</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1640.html" title="Explication détaillée du currying de la fonction JavaScript" class="aBlack">Explication détaillée du currying de la fonction JavaScript</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1949.html" title="Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)" class="aBlack">Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/2248.html" title="Angularjs intègre l'interface utilisateur WeChat (weui)" class="aBlack">Angularjs intègre l'interface utilisateur WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/2351.html" title="Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript" class="aBlack">Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
