블로그 목차, 이제 PHP DOM으로 뚝딱! 시간 절약 & 구글 랭킹 UP

PHP DOM 목차 생성 함수 분석

<?php
public function getH2Content(string $html) {
    // 1. DOMDocument 객체 생성: HTML 문서를 로드하고 파싱하는 데 사용됩니다.
    $dom = new DOMDocument();
    
    // 2. HTML 로드: 제공된 HTML 문자열을 DOMDocument에 로드합니다.
    // "<meta http-equiv="Content-Type" content="text/html; charset=utf-8">"를 추가하여 인코딩 문제를 방지하고,
    // @를 사용하여 HTML 파싱 중 발생할 수 있는 경고를 억제합니다.
    @$dom->loadHTML("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">" . $html); 

    // 3. DOMXPath 객체 생성: DOM 문서 내에서 XPath 쿼리를 실행하여 특정 요소를 찾기 위해 사용됩니다.
    $xpath = new DOMXPath($dom);
    
    // 4. 모든 <h2> 태그 선택: XPath 쿼리 '//h2'를 사용하여 문서 내의 모든 <h2> 요소를 선택합니다.
    $h2Nodes = $xpath->query('//h2');
    
    $h2Contents = [];
    // 5. <h2> 태그의 텍스트 콘텐츠 추출: 선택된 각 <h2> 노드를 반복하면서 그 안의 텍스트 내용을 가져옵니다.
    // trim() 함수로 앞뒤 공백을 제거하여 깔끔한 목차 항목을 만듭니다.
    foreach ($h2Nodes as $h2) {
        $h2Contents[] = trim($h2->textContent);
    }
    
    // 6. 추출된 <h2> 내용 반환: 모든 <h2> 제목이 포함된 배열을 반환합니다.
    return $h2Contents;
}
?>

블로그 글에 목차 삽입 시나리오

만약 블로그 포스트의 HTML 내용이 다음과 같다고 가정해봅시다.

<div class="blog-post-content">
    <h2><strong>블로그 목차의 중요성</strong></h2>
    <p>목차는 독자와 검색 엔진 모두에게 중요합니다.</p>
    <h2><strong>PHP DOM으로 목차 자동화</strong></h2>
    <p>코드를 통해 목차를 효율적으로 만들 수 있습니다.</p>
    <h3>DOMDocument 사용법</h3>
    <h2><strong>SEO 효과 극대화</strong></h2>
    <p>구글 랭킹에 긍정적 영향을 줍니다.</p>
</div>

여러분의 getH2Content() 함수를 이 HTML에 적용하면 다음과 같은 결과가 반환됩니다.

<?php
$blogContentHtml = '<div class="blog-post-content">...</div>'; // 위 HTML 내용
$h2Titles = getH2Content($blogContentHtml);
print_r($h2Titles);
/* 결과:
Array
(
    [0] => 블로그 목차의 중요성
    [1] => PHP DOM으로 목차 자동화
    [2] => SEO 효과 극대화
)
*/
?>

이제 이 배열을 사용하여 블로그 글 상단에 동적으로 목차를 생성할 수 있습니다. 각 제목을 클릭하면 해당 <h2> 태그로 스크롤 되는 기능을 추가하면 완벽한 목차가 완성됩니다.