코드 줄 아래에 메타태그 스크래핑 API 구축

Whatsapp이나 Telegram과 같은 메시지 앱을 통해 내가 보내는 링크의 미리보기를 어떻게 볼 수 있는지 궁금한 적이 있나요?

이 게시물에서는 URL을 받아들이고 이에 대한 메타 태그를 검색하는 스크래핑 API를 Deno로 구축하여 거의 모든 웹사이트에서 제목, 설명, 이미지 등과 같은 필드를 얻을 수 있습니다.

예:

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

이 결과를 제공합니다

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

정말 멋지지 않나요?

메타 태그와 왜 필요한가요?

메타 태그는 검색 엔진과 다른 클라이언트에 페이지에 대한 추가 정보를 제공하는 데 사용되는 HTML 요소입니다.
이러한 태그에는 일반적으로 정보 유형을 정의하는 이름 또는 속성 속성과 해당 정보의 값이 포함된 콘텐츠 속성이 포함됩니다. 다음은 두 개의 메타 태그의 예입니다.

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

첫 번째 태그는 페이지에 대한 설명을 제공하고, 두 번째 태그는 페이지가 소셜 미디어에 공유될 때 표시할 이미지를 정의하는 오픈 그래프 태그입니다.

메타 태그를 실제로 적용하는 방법 중 하나는 북마크 관리자를 구축하는 것입니다. 각 북마크의 제목, 설명, 이미지를 수동으로 추가하는 대신 메타 태그를 사용하여 북마크된 URL에서 이 정보를 자동으로 스크랩할 수 있습니다.

오픈 그래프

오픈 그래프는 원래 웹페이지 내 메타데이터 사용을 표준화하여 페이지 콘텐츠를 표시하기 위해 Facebook에서 만든 인터넷 프로토콜로, 소셜 네트워크에서 풍부한 링크 미리 보기를 생성하는 데 도움이 됩니다.
자세한 내용은 여기를 참조하세요.

왜 데노인가?

1. Deno에는 보안 기본값이 있습니다. 즉, 파일, 네트워크 및 환경 액세스에 대한 명시적인 권한이 필요하므로 보안 취약점의 위험이 줄어듭니다.
2. Deno는 웹 표준을 기반으로 구축되었으며 ES 모듈을 사용하고 독점 API 대신 웹 플랫폼 API(예: 가져오기)를 사용하는 것을 목표로 하여 Deno 코드를 브라우저에서 작성하는 코드와 매우 유사하게 만들지만 여전히 일부 사양이 있습니다. 브라우저와의 편차.
3. Deno에는 TypeScript 지원이 내장되어 있어 빌드 단계 없이 TypeScript 코드를 작성할 수 있습니다.
4. Deno에는 HTTP 서버, 파일 시스템 작업 등과 같은 일반적인 작업을 위한 모듈이 포함된 표준 라이브러리가 함께 제공됩니다.
5. Deno는 Linter, Formatter 및 Test Runner를 제공하므로 타사 패키지나 도구에 의존하지 않고 플랫폼을 사용할 수 있으므로 Javascript 개발을 위한 올인원 도구가 됩니다.
6. Deno는 전 세계적으로 분산된 서버리스 JavaScript/Typescript 애플리케이션을 위한 확장 가능한 플랫폼인 Deno Deploy를 제공하여 대기 시간을 최소화하고 가동 시간을 최대화합니다.

우리가 구축 중인 API는 메타 태그를 가져오고 구문 분석하는 기능과 HTTP 요청에 응답하는 API 서버라는 두 부분으로 구성됩니다.

메타 태그 가져오기

Deno Deploy로 이동하여 로그인하는 것부터 시작하겠습니다.
로그인 후 "새 놀이터"를 클릭하세요

이것이 우리에게 Hello World 시작점을 제공할 것입니다.
이제 URL을 허용하고 Fetch API를 사용하여 요청된 URL의 HTML을 가져온 다음 이를 HTML 구문 분석용 패키지(deno-dom)에 전달하는 getMetaTags라는 함수를 추가하겠습니다.
프로젝트에 deno-dom을 추가하려면 jsr 패키지 관리자를 사용할 수 있습니다:

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

이제 Fetch API를 사용하여 HTML을 텍스트로 가져옵니다.

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

HTML을 가져온 후 deno-dom을 사용하여 구문 분석한 다음 querySelectorAll과 같은 표준 DOM 함수를 사용하여 모든 메타 HTML 요소를 가져오고 이를 반복한 다음 getAttribute를 사용하여 각 항목의 이름, 속성 및 콘텐츠를 가져올 수 있습니다. 해당 태그 중:

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

마지막으로