open-graph tag scraping

scraping vs crawling

크롤링

• URL을 반복적으로 탐색해 반복적으로 링크를 찾고 가져오는 과정
  
• 웹 크롤러는 URL을 수집하고 웹페이지를 복사하여 , 수집한 웹페이지에 색인(index)를 부여 ➡️ 분류가 잘 되어있으면 검색 속도가 올라가 더 신속한 정보 제공 가능

스크래핑

• 정해진 특정 웹페이지에서 데이터를 추출하는 것
• 원하는 특정 웹사이트에서 우리가 필요한 정보만 가져온다 ➡️ 웹 데이터 추출 , 웹 하베스팅이라고도 부른다.

차이점

• 크롤링과 스크래핑 모두 정보를 추출해온다는 점에서 공통점을 가진다.
  하지만 크롤링은 특정 웹페이지를 목표로 하지 않기 때문에 일단 탐색하고 정보를 가져오는 선탐색 후추출 방식으로 동작한다. 반면 스크래핑은 목표로 하는 웹페이지가 있기 때문에 선결정 후추출 방식으로 동작한다.
• 크롤링은 웹사이트에 대한 정보를 색인화하고 저장하는데 사용되고 스크래핑은 분석 및 기타 기타 목적에 따라 웹사이트에서 데이터를 추출할 때 사용 된다. 크롤링에서는 중복 제거가 필수적인데 중복되거나 불필요한 정보를 가져와서 색인화를 어렵게 하지 않기 위해서이다.

스크래핑과 브라우저 주소창의 원리

➡️ 브라우저가 프론트엔드에서 받아온 html 코드를 실행시킨다. (curl 명령어나 포스트맨 axios등은 html 코드를 실행시킬 수 없다.)

Open Graph Protocol

Open Graph Protocol
페이스북에서 시작해서 유명해진 것으로 아래의 것들을 html 안에 meta 태그로 넣어준다.

• og:title - The title of your object as it should appear within the graph, e.g., "The Rock"
• og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required
• og:image - An image URL which should represent your object within the graph.
• og:url  - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/".\

먼저 axios와 cheerio를 yarn으로 설치 하고 import 해서 사용

import axios from 'axios'
import cheerio from 'cheerio'

const createMessage = async () => {
    // 입력된 메시지 ex): "https://www.naver.com 에 방문해 주세요!"

    // 1. 입력된 메시지에서 http로 시작하는 문장이 있는지 먼저 찾기!(.find() 등의 알고리즘 사용하기)
    const url = "https://www.naver.com"

    // 2. axios.get으로 요청해서 html코드 받아오기 => 스크래핑
    const result = await axios.get(url)
    console.log(result.data)

    // 3. 스크래핑 결과(result)에서 OG(오픈그래프) 코드 골라내서 변수에 저장하기
    const $ = cheerio.load(result.data)
    $("meta").each((index, el) => {
        if($(el).attr("property") && $(el).attr("property").includes("og:")){
            const key = $(el).attr("property") // og:title, og:description, ...
            const value = $(el).attr("content") // 네이버, 네이버 메인에서 ~~~
            console.log(key, value)
        }
    })

}

createMessage()

➡️ 결과