📖 개념 정의 및 실무 적용

실무에서 커뮤니티, 블로그 댓글, Q&A 게시판 등을 운영할 때 악의적인 사용자가 SEO 백링크 작업을 위해 스팸 링크를 대량으로 유입시키는 경우가 빈번합니다. 검색엔진이 이러한 링크를 사이트 운영자가 직접 보증하는 링크로 오인할 경우, 사이트 전체의 검색 순위가 하락하거나 수동 조치(페널티)를 받을 수 있는 심각한 비효율이 발생합니다.

rel=”ugc” 속성은 사용자 생성 콘텐츠(User Generated Content)에서 비롯된 링크임을 검색엔진 크롤러에 정확히 알려줌으로써 링크 권한 전달을 차단하고 사이트의 무결성을 유지합니다. 수동으로 일일이 검수하는 리소스를 줄이고, 대규모 UGC 플랫폼에서 필수적으로 갖추어야 할 핵심 테크니컬 SEO 방어선 역할을 합니다.

💻 실무 활용 코드 스니펫 (JAVASCRIPT)

function sanitizeAndAddUgcToLinks(htmlContent) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlContent, 'text/html');
  const links = doc.querySelectorAll('a');
  
  links.forEach(link => {
    const href = link.getAttribute('href');
    if (href && !href.startsWith('#')) {
      const existingRel = link.getAttribute('rel') || '';
      const relValues = new Set(existingRel.split('\s+').filter(Boolean));
      
      relValues.add('ugc');
      relValues.add('nofollow');
      
      link.setAttribute('rel', Array.from(relValues).join(' '));
      link.setAttribute('target', '_blank');
      link.setAttribute('noopener', 'noreferrer');
    }
  });
  
  return doc.body.innerHTML;
}

⚡ 5분 만에 적용하는 실행 스텝

1. 사용자 입력 검토: 댓글, 게시판 에디터 등 사용자가 HTML 또는 마크다운으로 링크를 생성할 수 있는 모든 입력 포인트를 파악합니다.
2. 렌더링 로직 수정: 프론트엔드 렌더링 시점 또는 백엔드 파싱 단계에서 사용자가 삽입한 모든 태그를 탐색하는 로직을 구현합니다.
3. 속성 강제 주입: 탐색된 링크에 rel=”ugc nofollow” 속성과 보안을 위한 target=”_blank” rel=”noopener” 속성을 동적으로 추가합니다.
4. 검증 및 모니터링: 실제 운영 환경의 게시글을 등록하고 개발자 도구를 통해 rel 속성이 정확히 반영되었는지 최종 크롤링 테스트를 수행합니다.