URL에서 메타데이터 정보 추출 | 자바스크립트

원본 기사는 여기 내 블로그Extract metadata information from URL using TypeScript/JavaScript에 게시되어 있습니다.

웹 사이트의 메타데이터에는 title , description , site-name , site-color 및 기타 많은 개방형 그래프 속성과 같은 검색 엔진 관련 속성에 대한 정보가 있습니다. SEO 서비스 관련 애플리케이션을 구축하는 경우 웹사이트의 메타데이터 속성을 읽는 것이 필요할 수 있습니다. 이 문서는 URL에서 메타데이터 정보를 추출하기 위해 TypeScript/JavaScript 프로젝트에서 사용할 수 있는 매우 사용하기 쉬운 패키지를 제공합니다.

URL에서 메타데이터 정보 추출

모든 http/https URL에서 메타데이터 정보를 추출합니다.

link-meta-extractor 패키지 설치

명령을 실행하여 기존 TypeScript/JavaScript 애플리케이션에 패키지를 설치합니다. 전체 패키지here를 찾을 수 있습니다. 패키지의 전체 소스 코드를 확인하십시오here.

npm install link-meta-extractor

TypeScript 사용법

비동기/대기로 작업

async/await를 사용하여 웹사이트에서 메타데이터 정보를 추출하려면 다음 코드를 사용하십시오.

import { extractMetadata } from 'link-meta-extractor';

async function extractMeta() {
  const url = 'https://stackblogger.com';
  const metaInformation = await extractMetadata(url);

  console.log(metaInformation);
}

extractMeta();

/*
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1'
    }
*/

약속/콜백 작업

콜백 메소드를 사용하여 웹사이트에서 메타데이터 정보를 추출한 후 다음 코드로 이동합니다.

import { extractMetadata } from 'link-meta-extractor';

function extractMeta() {
  const url = 'https://stackblogger.com';
  extractMetadata(url).then((metaInformation) => {
    console.log(metaInformation);
  });
}

extractMeta();

/*
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1'
    }
*/

자바스크립트 사용법

다음 코드를 사용하여 JavaScript 코드의 URL에서 메타데이터 정보를 추출합니다.

비동기/대기로 작업

async/await를 사용하여 웹사이트에서 메타데이터 정보를 추출한 후 다음 코드로 이동합니다.

const metaExtractor = require('link-meta-extractor');

async function extractMeta() {
  const url = 'https://stackblogger.com';
  const metaInformation = await metaExtractor.extractMetadata(url);
  console.log(metaInformation);
}

extractMeta();

/*
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1'
    }
*/

약속/콜백 작업

콜백 메소드를 사용하여 웹사이트에서 메타데이터 정보를 추출한 후 다음 코드로 이동합니다.

const metaExtractor = require('link-meta-extractor');

function extractMeta() {
  const url = 'https://stackblogger.com';
  metaExtractor.extractMetadata(url).then((metaInformation) => {
    console.log(metaInformation);
  });
}

extractMeta();

/*
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1'
    }
*/

추가 메타데이터 필드 추출

플러그인은 웹 사이트에서 추출하는 데 사용할 수 있는 선택적 인수로 추가 필드를 허용합니다.

문자열 형식의 메타 필드 키를 함수의 나머지 매개변수로 전달합니다. 여기에서 코드를 참조하십시오…

import { extractMetadata } from 'link-meta-extractor';

async function extractMeta() {
  const url = 'https://stackblogger.com';
  const metaInformation = await extractMetadata(
    url,
    'og:site_name', // additional field
    'og:image', // additional field
    'robots' // additional field
  );

  console.log(metaInformation);
}

extractMeta();

/* 
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1',
        additional: {
            siteName: 'StackBlogger',
            image: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
            robots: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1'
        }
    }
*/

마지막 말

간단한 플러그인으로 단 한 줄의 코드로 메타데이터 정보 추출
내 다른 흥미로운 JavaScript 관련 기사here를 확인하십시오.