검색엔진 최적화중 너무 길거나 짧은 Meta Description의 문제점

Description의 문제

검색엔진 크롤러가 페이지를 크롤링 후 description을 표시할 때, 내용이 너무 길면 잘리고 너무 짧으면 불필요한 텍스트가 추가되어 검색 최적화에 좋지 않습니다. 티스토리에서 이를 해결하기 위해 160자 이내로 description을 제한하는 스크립트를 사용하지만, 이는 서버에 저장된 내용을 변경하지는 않습니다. 참고만 하세요

description

검색엔진 크롤러가 검색 페이지를 크롤러 후 검색 페이지에 표시하게 될 경우 description의 내용을 화면에 출력하게 됩니다. description 내용이 너무 길게 작성되면 일부분이 잘려서 출력이 되며 너무 적은 경우는 불필요한 텍스트가 추가되어 글의 주제와 연관이 없는 검색 노출이 발생해서 검색 최적화에 좋지 않은 영향을 미칩니다. 보통 검색엔진은 description의 정보를 25자에서 160자 정도까지 표시해줍니다. 그래서 160자 이내로 description을 제한할 필요성은 있습니다.

검색엔진 최적화 중에서 Bing에서 발생하는 너무 길거나 짧은 Meta Description의 문제는 일반적인 사이트나 description 코드를 수정할 수 있는 경우는 쉽게 해결할 수 있는 문제입니다. 그러나 티스토리에서는 약간의 문제가 있습니다. 아래는 근본적인 해결 방법은 아니지만 페이지가 로딩 후 렌더링 시 기존의 description을 삭제 후 새로운 description으로 수정하고 글자 수를 150자 이내로 제한하게 해주는 간단한 스크립트 코드입니다.

너무 길거나 짧은 Meta Description

티스토리에서 이 방법을 사용하게 되면 서버에 저장된 내용이 변경되는 방법이 아니기 때문에 효과는 없다고 보시면 됩니다. 그러나 차후 필요할 일이 생길 것 같아 자료 보관 차원에서 코드를 공유합니다. 좀 더 근본적인 해결 방법이 있다면 그 방법을 사용하시면 되는데 아직까지 근본적인 수정 방법은 없는 것 같습니다.

그러나 이러한 방법으로 최종 결과물은 수정이 가능하다는 정도로 정리를 해봅니다. 왜 티스토리는 description을 길게 작성해서 배포하는지 이유를 알 수는 없지만 우리가 모르는 다른 이유가 있을 거라 생각하며 아래 코드는 description을 JSON까지 수정해서 새롭게 형성해주는 코드며 필요하신 분들은 사용해보세요.

수정된 Meta Description

<script async>
document.addEventListener('DOMContentLoaded', function() {
  var metaDescription = document.querySelector('meta[name="description"]');
  var ogDescription = document.querySelector('meta[property="og:description"]');
  var twitterDescription = document.querySelector('meta[name="twitter:description"]');
  var jsonLdScript = document.querySelector('script[type="application/ld+json"]');

  // Initialize meta description with a limit of 150 characters
  var initialContent = metaDescription ? metaDescription.getAttribute('content') : '';
  var limitedContent = initialContent.substring(0, 150);

  // Set the limited content to the meta tags
  if (metaDescription) {
    metaDescription.setAttribute('content', limitedContent);
  }
  if (ogDescription) {
    ogDescription.setAttribute('content', limitedContent);
  }
  if (twitterDescription) {
    twitterDescription.setAttribute('content', limitedContent);
  }

  // Get the content from <p class="summary">
  var summaryParagraph = document.querySelector('p.summary');
  var content = summaryParagraph ? summaryParagraph.textContent.trim() : '';

  // Update meta descriptions if summary content exists
  if (content) {
    var updatedContent = content.substring(0, 150);
    if (metaDescription) {
      metaDescription.setAttribute('content', updatedContent);
    }
    if (ogDescription) {
      ogDescription.setAttribute('content', updatedContent);
    }
    if (twitterDescription) {
      twitterDescription.setAttribute('content', updatedContent);
    }
    if (jsonLdScript) {
      try {
        var jsonLdData = JSON.parse(jsonLdScript.textContent);
        jsonLdData.description = updatedContent;
        jsonLdScript.textContent = JSON.stringify(jsonLdData, null, 2);
      } catch (e) {
        console.error('Error parsing JSON-LD:', e);
      }
    }
  }
});
</script>

description의 문제