Post

URL에서 메타 태그의 값 가져오기 - 자바스크립트

Posted Updated
Preview Image
By Jinwoo 10 min read

오늘은 자바스크립트를 이용해서 메서드 값을 가져오는 작업을 해볼까 합니다.

URL에서 메타 태그의 값 가져오기: 자바스크립트로의 접근

일반적인 방법

웹 페이지의 URL에서 메타 태그의 값을 가져오는 일은 종종 필요한 작업 중 하나입니다. 이를 수행하기 위해서는 먼저 JavaScript를 사용하여 현재 페이지의 URL을 가져와야 합니다. 그런 다음 URL에서 원하는 값을 추출해야 합니다.

1. 현재 페이지의 URL 가져오기

JavaScript에서 현재 페이지의 URL을 가져오는 방법은 다음과 같습니다.

1

var currentUrl = window.location.href;

이 코드는 현재 페이지의 전체 URL을 문자열로 반환합니다.

2. URL에서 메타 태그의 값 추출하기

이제 URL에서 메타 태그의 값을 추출해야 합니다. 메타 태그의 값은 일반적으로 페이지의 <head> 섹션에 정의됩니다.

예를 들어, 아래와 같은 형식의 메타 태그가 있다고 가정해보겠습니다.

1

<meta name="description" content="웹 페이지에 대한 간단한 설명">

이 경우, 메타 태그의 값을 추출하기 위해 다음과 같이 JavaScript를 사용할 수 있습니다.

1

var metaDescription = document.querySelector('meta[name="description"]').getAttribute('content');

위 코드에서 document.querySelector() 함수를 사용하여 원하는 메타 태그를 선택하고, getAttribute('content') 메소드를 사용하여 해당 메타 태그의 content 속성 값을 가져옵니다.

3. 적용 예시

위의 코드를 조합하여 실제로 메타 태그의 값을 가져오는 함수를 작성할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11

function getMetaContent(metaName) {
    var metaContent = document.querySelector('meta[name="' + metaName + '"]');
    if (metaContent) {
        return metaContent.getAttribute('content');
    } else {
        return null;
    }
}

var description = getMetaContent('description');
console.log(description); // 가져온 메타 태그의 값 출력

이제 이 함수를 호출하면 현재 페이지의 메타 태그에서 원하는 값을 가져올 수 있습니다. 하지만 여기서 중대한 문제가 하나 있을 수 있습니다.

CORS(Cross-Origin Resource Sharing) 오류로 인한 접근이 막힐때

요즘은 웬만한 사이트가 CORS 정책으로 접근을 막습니다.

이 문제에 대해 해결할 수 있는 방법은 3가지 정도 있습니다.

CORS 오류를 해결하는 방법 3가지

  1. 서버 측 CORS 설정 변경:
    • CORS 오류를 해결하는 가장 좋은 방법은 서버 측에서 CORS 정책을 수정하는 것입니다. 서버에서 다른 출처에서의 요청을 허용하는 CORS 헤더를 제공하도록 설정하면 클라이언트에서 추가적인 조치를 취할 필요가 없습니다.
  2. 프록시 서버 사용:
    • 클라이언트 측에서는 CORS 정책을 우회하기 위해 프록시 서버를 사용할 수 있습니다. 클라이언트가 요청하는 URL을 프록시 서버로 보내고, 프록시 서버가 해당 URL에 대한 요청을 실행하여 응답을 클라이언트로 전달합니다. 이를 통해 CORS 정책을 우회할 수 있습니다.
  3. 서비스 이용:
    • CORS 문제를 우회하는 데 특화된 서비스들을 이용할 수도 있습니다. 예를 들어, “AllOrigins” 서비스는 CORS 정책을 우회하여 다른 출처의 리소스를 가져올 수 있도록 도와줍니다. 위에서 언급한대로 https://allorigins.win/를 사용하여 CORS 정책을 우회할 수 있습니다.

이중 저희는 3번째 방법을 사용할 겁니다.

3번째에서 사용하는 방법은 API를 이용한 겁니다.

API 서비스를 이용한 우회

우선 제가 작성한 코드를 하나씩 분석하며 설명해보겠습니다.

  1. URL 변수 설정:
    1

    var url = 'https://codepen.io/thecubiq/pen/vYwOBaa'; // 가져올 페이지의 URL
    • url 변수에는 가져올 웹 페이지의 URL이 할당됩니다.

우선 저희가 가져올 사이트의 주소를 url 변수에 넣었습니다.

  1. CORS 우회 URL 생성:
    1

    var allOriginsUrl = 'https://api.allorigins.win/get?url=' + encodeURIComponent(url);
    • allOriginsUrl 변수에는 CORS(Cross-Origin Resource Sharing)를 우회하여 페이지의 내용을 가져올 수 있는 URL이 할당됩니다.
    • encodeURIComponent() 함수를 사용하여 URL을 인코딩합니다.

이후 url변수와 api 주소를 합쳐줍니다. 여기서 중요한게 api주소가 처음이어야 합니다.

  1. Ajax 요청:
    1
2
3
4
5
6
7
8
9

    $.ajax({
 url: allOriginsUrl,
 success: function (response) {
     // 성공적으로 요청이 완료된 경우 실행될 코드
 },
 error: function () {
     // 요청이 실패한 경우 실행될 코드
 }
});
    • $.ajax() 함수를 사용하여 AJAX 요청을 보냅니다.
    • url에는 우리가 CORS를 우회한 URL이 할당됩니다.
    • 요청이 성공하면 success 콜백 함수가 호출됩니다. 요청이 실패하면 error 콜백 함수가 호출됩니다.

Ajax를 이용해서 api 주소와 가져올 사이트 주소를 합친 변수를 통해 사이트에 데이터를 요청합니다.

  1. 요청 성공 시 실행될 코드:
    1
2
3
4
5
6
7
8
9
10
11
12
13

    success: function (response) {
 var html = response.contents;
 var parser = new DOMParser();
 var doc = parser.parseFromString(html, 'text/html');

 var ogTitle = doc.querySelector('meta[property="og:title"]').getAttribute('content');
 var ogImage = doc.querySelector('meta[property="og:image"]').getAttribute('content');
 var ogDescription = doc.querySelector('meta[property="og:description"]').getAttribute('content');

 console.log('og:title:', ogTitle);
 console.log('og:image:', ogImage);
 console.log('og:description:', ogDescription);
}

    1
2
3
4
5

       - 요청이 성공하면 실행되는 함수입니다.
   - `response.contents`에는 요청한 페이지의 HTML 내용이 담겨 있습니다.
   - `DOMParser()` 객체를 사용하여 HTML 문자열을 파싱합니다.
   - 파싱된 HTML 문서 객체에서 Open Graph 태그 중 `og:title`, `og:image`, `og:description`의 값을 가져옵니다.
   - 가져온 값들은 콘솔에 출력됩니다.

이후 성공적으로 데이터를 받아오면 변수에 데이터를 저장하고 출력합니다.

  1. 요청 실패 시 실행될 코드:
    1
2
3

    error: function () {
 console.log('요청 실패');
}
    • 요청이 실패한 경우 실행되는 함수입니다.
    • 간단한 실패 메시지를 콘솔에 출력합니다.

이건 간단한 요청 실패 출력문입니다.

이렇게 간단하게 사이트에서 메타 태그의 값을 가져 올 수 있었습니다.

아래는 제가 작성한 javascript 전체 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

var url = 'https://codepen.io/thecubiq/pen/vYwOBaa';
var allOriginsUrl = 'https://api.allorigins.win/get?url=' + encodeURIComponent(url);

$.ajax({
    url: allOriginsUrl,
    success: function (response) {
        var html = response.contents;
        var parser = new DOMParser();
        var doc = parser.parseFromString(html, 'text/html');

        var ogTitle = doc.querySelector('meta[property="og:title"]').getAttribute('content');
        var ogImage = doc.querySelector('meta[property="og:image"]').getAttribute('content');
        var ogDescription = doc.querySelector('meta[property="og:description"]').getAttribute('content');

        console.log('og:title:', ogTitle);
        console.log('og:image:', ogImage);
        console.log('og:description:', ogDescription);
    },
    error: function () {
        console.log('요청 실패');
    }
});

이렇게 오늘 글을 마무리 하겠습니다.

오늘도 필자의 글을 읽어주셔서 감사합니다.

coding
자바스크립트 메타 태그 값 추출 javascript get
This post is licensed under CC BY 4.0 by the author.