외부 참고글의 URL 의 OG 태그 정보로 반응형 미리보기를 생성하는 PHP 코드

 

 

네이버 블로그나 티스토리 블로그 등에  글을 작성하다 보면, 외부 참고글의 URL 을 입력할 경우가 있다.
이럴 경우 네이버 블로그, 티스토리 블로그 에디터가 자동으로 해당 URL 페이지의 메타 태그를 불러와 작성중인 글에 미리보기 박스를 자동으로 삽입해 준다.

제 경우는, PHP 로 웹사이트 + 블로그 시스템을 구축/운영중이라 제가 만든 웹 에디터에서는 이 기능이 구현이 안되고 있었는데, 구글링을 통해 구현 방법을 찾아 소개해 드립니다. 

네이버나 티스토리 같이 URL 을 입력하면, 간단하게 해당 페이지의 페이지 제목, 이미지, 페이지 요약 등을 간단하게 보여주는 서비스를 OG(Open Graph) 태그 또는 URL 미리보기 서비스라고 부른다.

이런 기능은 외부 웹페이지에 포함되어 있는 OG(Open Graph) 태그 (또는 메타 태그) 정보를 가져와서 반응형으로 미리보기를 생성해 주는 것인데, PHP로 구현하려면 아래와 같은 몇 가지 과정이 필요합니다:

• file_get_contents(URL) 함수로 원하는 페이지의 HTML 코드를 가져옵니다.
• 가져온 HTML 코드에서 OG 태그 정보를 추출합니다. 아래 PHP 코드의 // OG 태그 추출 부분을 참고해 보세요.
• 추출한 정보를 바탕으로 반응형 미리보기를 HTML 코드로 생성합니다.

<?php

function getMetaData($url) {
    $content = file_get_contents($url);
    $doc = new DOMDocument();
    @$doc->loadHTML($content);
    
    $xpath = new DOMXPath($doc);
    
    // OG 태그 추출
    $query = '//meta[starts-with(@property, "og:")]';
    $metaOg = $xpath->query($query);
    
    $tags = [];
    foreach ($metaOg as $tag) {
        $tags[str_replace('og:', '', $tag->getAttribute('property'))] = $tag->getAttribute('content');
    }
    
    // Keywords 추출
    $keywords = $xpath->query('//meta[@name="keywords"]/@content')->item(0);
    if ($keywords) {
        $tags['keywords'] = $keywords->value;
    }
    
    return $tags;
}

$url = "https://example.com"; // 외부 URL
$tags = getMetaData($url);

?>

<!-- 반응형 미리보기 생성 -->
<div style="border: 1px solid #ccc; padding: 10px; width: 300px; max-width: 100%;">
    <?php if (isset($tags['image'])): ?>
        <img src="<?php echo $tags['image']; ?>" alt="Preview Image" style="width: 100%;">
    <?php endif; ?>
    <h3><?php echo $tags['title']; ?></h3>
    <p><?php echo $tags['description']; ?></p>
    <p>Keywords: <?php echo $tags['keywords']; ?></p>
</div>

 

위 PHP 코드는 간단하게 OG 태그 정보를 가져와서 미리보기를 생성하는 예제입니다.