Membina API Penggores Teg Meta di Bawah Garis Kod

Pernahkah anda terfikir bagaimana apl pemesejan seperti Whatsapp atau Telegram membolehkan anda melihat pratonton pautan yang anda hantar?

Pratonton url Whatsapp dan Telegram

Dalam siaran ini, kami akan membina API mengikis dengan Deno yang menerima URL dan mendapatkan semula teg meta untuknya, supaya kami boleh mendapatkan medan seperti tajuk, penerangan, imej dan banyak lagi daripada hampir mana-mana tapak web.

Contohnya:

curl https://metatags.deno.dev/api/meta?url=https://dev.to

akan memberikan hasil ini

{
  "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"
}

agak hebat, bukan?

Tag meta dan mengapa kita memerlukannya

Teg meta ialah elemen HTML yang digunakan untuk memberikan maklumat tambahan tentang halaman kepada enjin carian dan pelanggan lain.
Teg ini biasanya termasuk nama atau atribut sifat yang mentakrifkan jenis maklumat dan atribut kandungan yang mengandungi nilai maklumat tersebut. Berikut ialah contoh dua teg meta:

<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">

Teg pertama menyediakan penerangan halaman, manakala teg kedua ialah teg Graf Terbuka yang mentakrifkan imej untuk dipaparkan apabila halaman dikongsi di media sosial.

Satu aplikasi praktikal tag meta ialah membina pengurus penanda halaman. Daripada menambah tajuk, penerangan dan imej secara manual untuk setiap penanda halaman, anda boleh mengikis maklumat ini secara automatik daripada URL yang ditanda halaman menggunakan tag meta.

Buka Graf

Graf Terbuka ialah protokol internet yang pada asalnya dicipta oleh Facebook untuk menyeragamkan penggunaan metadata dalam halaman web untuk mewakili kandungan halaman, ia membantu rangkaian sosial menjana pratonton pautan yang kaya.
Baca lebih lanjut mengenainya di sini.

Kenapa Deno?

1. Deno mempunyai lalai selamat, bermakna ia memerlukan kebenaran eksplisit untuk fail, rangkaian dan akses persekitaran, mengurangkan risiko kelemahan keselamatan.
2. Deno dibina pada piawaian web, menggunakan Modul ES dan bertujuan untuk menggunakan API Platform Web (seperti pengambilan) melalui API proprietari, menjadikan kod Deno hampir sama dengan kod yang akan anda tulis dalam penyemak imbas - tetapi masih mempunyai beberapa spesifikasi sisihan daripada penyemak imbas.
3. Deno mempunyai sokongan TypeScript terbina dalam, membolehkan anda menulis kod TypeScript tanpa langkah binaan.
4. Deno dilengkapi dengan perpustakaan standard yang termasuk modul untuk tugas biasa seperti pelayan HTTP, operasi sistem fail dan banyak lagi.
5. Deno menyediakan pelari Linter, Pemformat dan Ujian, membolehkan anda menggunakan platform dan bukannya bergantung pada pakej atau alatan pihak ketiga, menjadikannya alat semua-dalam-satu untuk pembangunan Javascript.
6. Deno menyediakan Deno Deploy yang merupakan platform berskala untuk aplikasi JavaScript/Typescript tanpa pelayan yang diedarkan secara global, memastikan kependaman minimum dan masa aktif maksimum.

API yang kami bina akan terdiri daripada dua bahagian, fungsi untuk mengambil dan menghuraikan teg meta dan pelayan API yang akan bertindak balas kepada permintaan HTTP.

Mendapatkan tag meta

Mari kita mulakan dengan pergi ke Deno Deploy dan log masuk.
Selepas log masuk, klik pada "Taman Permainan Baharu"

Ini kita akan memberi kita titik permulaan hello world.
Sekarang kami akan menambah fungsi yang dipanggil getMetaTags yang menerima url dan menggunakan API Ambil untuk mendapatkan HTML URL yang diminta dan menyerahkannya kepada pakej untuk penghuraian HTML (deno-dom).
Untuk menambah deno-dom pada projek kami, kami boleh menggunakan pengurus pakej jsr:

curl https://metatags.deno.dev/api/meta?url=https://dev.to

Kini kami akan menggunakan API Ambil untuk mendapatkan HTML sebagai teks:

{
  "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"
}

Selepas mendapat HTML, kita boleh menggunakan deno-dom untuk menghuraikannya dan kemudian menggunakan fungsi DOM standard seperti querySelectorAll untuk mendapatkan semua elemen HTML meta, lelaran padanya dan gunakan getAttribute untuk mendapatkan nama, sifat dan kandungan setiap satu daripada tag tersebut:

<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">

Akhir sekali, kami juga akan menanyakan elemen halaman untuk menambahkannya sebagai medan dalam API kami:

import { DOMParser, Element } from "jsr:@b-fuze/deno-dom";

Ia bukan teg meta, tetapi saya fikir ia adalah medan yang berguna, jadi ia tetap akan menjadi sebahagian daripada API kami. :)

Fungsi getMetaTags terakhir kami sepatutnya kelihatan seperti ini:

  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();

Pelayan

Untuk memudahkan, saya telah memutuskan untuk menggunakan pelayan http terbina dalam Deno yang merupakan panggilan Deno.serve() yang ringkas.
Terima kasih kepada fakta bahawa deno dibina pada standard web, kami boleh menggunakan objek Respons terbina dalam dalam API Ambil untuk membalas permintaan.

curl https://metatags.deno.dev/api/meta?url=https://dev.to

Pelayan kami menghuraikan url permintaan, menyemak sama ada kami menerima permintaan GET ke laluan /api/meta dan memanggil fungsi getMetaTags yang kami buat dan kemudian mengembalikan tag meta sebagai badan tindak balas.

Kami juga menambah dua pengepala, yang pertama ialah Jenis Kandungan yang diperlukan untuk pelanggan mengetahui jenis data yang mereka peroleh dalam respons, yang dalam kes kami ialah respons JSON.

Tajuk kedua ialah Access-Control-Allow-Origin yang membenarkan API kami menerima permintaan daripada asal-usul tertentu, dalam kes kami, saya memilih "*" untuk menerima mana-mana asal, tetapi anda mungkin mahu menukarnya untuk menerima permintaan daripada asal bahagian hadapan anda.
Ambil perhatian bahawa pengepala CORS hanya akan menjejaskan permintaan yang dibuat oleh penyemak imbas, bermakna penyemak imbas akan menyekat permintaan mengikut asal yang dinyatakan dalam pengepala, tetapi panggilan terus API daripada pelayan masih boleh dilakukan. Baca lebih lanjut tentang CORS di sini.

Kini anda boleh klik pada "Simpan & Pasang"

Kemudian tunggu deno deploy untuk menggunakan kod anda ke taman permainan:

Url di bahagian atas sebelah kanan ialah url taman permainan anda, salin dan tambah /api/meta?url=https://dev.to untuk melihatnya dalam tindakan, url itu sepatutnya kelihatan seperti https://metatags.deno.dev /api/meta?url=https://dev.to
Anda kini seharusnya melihat API bertindak balas dengan teg meta dev.to!

Kerahan

Menggunakan taman permainan Deno deploy bermakna kod anda secara teknikal telah digunakan, ia adalah awam dan boleh diakses oleh sesiapa sahaja.
Untuk API mudah seperti yang kami sedang bina, satu taman permainan fail boleh mencukupi, tetapi dalam banyak kes kami ingin meningkatkan lagi projek kami, untuk itu anda boleh menggunakan eksport Github deploy Deno untuk membuat repositori kod yang betul untuk API anda, dengan sokongan untuk membina automatik pada dorongan kod baharu:

atau daripada tetapan taman permainan:

Kaveat

Kaedah mengikis yang dibentangkan dalam siaran ini hanya berfungsi pada tapak web yang mempunyai teg meta dalam fail html yang dikembalikan daripada pelayan, bermakna tapak yang dipaparkan atau diprapaparkan pelayan lebih cenderung untuk mengembalikan hasil yang betul, apl halaman tunggal juga boleh berfungsi selagi kerana teg meta ditetapkan dalam masa binaan dan bukan dalam masa jalan.

Kesimpulan

Kami telah menunjukkan betapa cepat dan mudahnya untuk membina dan menggunakan API dengan Deno, kami telah membincangkan teg Meta dan cara kami boleh menggunakan API Ambil, penghurai DOM dan pelayan terbina dalam Deno untuk membina Teg meta mengikis API di bawah 40 baris kod.

Untuk melihat projek yang dibina dalam siaran ini, anda boleh melihat taman permainan penggunaan Deno (Anda perlu menambah /api/meta?url=https://dev.to ke bar url di sebelah kanan untuk melihat contoh respons) atau repositori github ini.

---

Apa yang Akan Anda Bina Seterusnya?

Saya harap siaran ini telah memberi inspirasi kepada anda untuk meneroka kuasa tag meta dan Deno! Cuba bina versi API anda sendiri atau sepadukannya ke dalam projek seperti pengurus penanda halaman.

Terperangkap, mempunyai soalan, atau ingin mempamerkan apa yang anda bina? Letakkan ulasan di bawah atau berhubung dengan saya di Twitter/X - Saya ingin mendengar daripada anda!

Lihat siaran saya sebelum ini tentang membina pustaka pengurusan negeri bertindak balas dalam bawah 40 baris kod di sini.

Atas ialah kandungan terperinci Membina API Penggores Teg Meta di Bawah Garis Kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!