본문으로 바로가기

티스토리 스킨 제작중에 메타 태그에 대한 의문점이 남아 이에 대한 조사를 해보았습니다. 스킨 제작에 관심있는 분들에게 참고가 되었으면 합니다.

meta http-equiv="x-ua-compatible"

IE 브라우저 사용자들을 위해 최신의 문서모드로 렌더링 되도록 아래와 같은 코드 사용을 하곤 한다.

<meta http-equiv="x-ua-compatible" content="ie=edge">

이는 X-UA-Compatible, IE=edge, 호환성 보기에서 설명했듯이 웹서버에 지정해 두면 메타 태그에서 따로 언급하지 않아도 이를 최신 문서로 강제한다.

아래는 x-ua-compatible 메타 태그를 삽입하지 않은 상태로 블로그의 header 를 요청한 결과이다.

즉, 티스토리 서버에는 관련사항이 지정되어 있어 이 메타 태그를 삽입하지 않아도 된다.
필자는 과거에 Validate HTML 에서 해당 메타 태그가 오류로 나타나기에 의아하게 생각해서 티스토리의 header를 요청해서 살펴보고 관련 사항을 발견했었다. 현재의 Validate HTML은 최신 버전으로 교체되면서 관련 오류 메세지도 사라졌다.

meta name="description"

스킨 제작시에 문서의 설명을 담당하는 메타 태그에 아래와 같이 티스토리에서 제공하는 블로그 설명을 표기하는 치환자를 작성하는 경우가 있다.

<meta name="description" content="[ ##_desc_##]">

이와 같은 경우, 똑같은 설명글이 블로그의 모든 글에 노출되게 된다. 이는 description 메타 태그에 대한 그릇된 이해로, 해당 문서가 포함하고 있는 내용에 대한 요약 및 해당 글에 대한 정보를 나열하는 본래의 목적과는 다르다.

구글은 실제로 좋은 메타 설명 만들기 가이드 라인을 제시하고 있으며, 위와 같은 작성에 대한 문제점을 언급하고 있다.

페이지별로 설명을 다르게 작성합니다. 사이트의 모든 페이지에 대해 동일하거나 유사한 설명을 작성하면, 각 페이지가 웹 검색결과에 게재될 때 좋지 않습니다. 설명이 유사하거나 동일한 경우 Google이 해당 문구를 표시할 가능성이 줄어듭니다. 가능하면 특정 페이지를 정확하게 나타내는 설명을 작성하시기 바랍니다. 기본 홈페이지 또는 기타 종합 페이지에서는 사이트 수준 설명을 사용하고 그 외 모든 곳에서는 페이지 수준 설명을 사용합니다. 모든 페이지에 일일이 설명을 작성할 시간이 없는 경우 콘텐츠의 우선 순위를 정하시기 바랍니다. 최소한 홈페이지 및 인기 페이지와 같이 중요한 URL의 설명은 반드시 작성해야 합니다.

사실, 이를 정확히 파악하려면 구글에서 메타 설명을 활용하는 로직을 이해해야 한다. 관련해서 접근 가능한 정보가 없다는 것이 우리의 문제다. 과거에는 해당 메타 태그를 이용해 검색시 문서의 제목 링크 아래에 메타 설명을 노출시키곤 했지만 이를 공들여 작성하는 사람이 많지 않다는 것과 문서의 본문 내용과 다른 정보가 나열되는 경우가 많다는 것을 인지하였는지 현재의 구글 로직은 변경되었다. 대부분 문서에 포함된 내용을 요약해서 노출해주고 있으며, 어떤 근거에서 그렇게 해주고 있는지는 오리무중이다.

티스토리 대안책

티스토리측에서 글쓰기시에 설명 메타에 들어갈 내용을 작성할 수 있는 요약란을 만들어 주던가, 이미 자체적으로 지원하고 있는 Open Graph protocol 에 의해 요약된 내용이라도 넣어줄 수 있게 치환자를 제공하는 것이 바람직하리라 본다.

대표이미지 추출이 가능한 치환자 하나도 제공하지 않고 있는 티스토리라서 희망이 없어 보이긴 하지만 말이다.

동적으로 메타 데이터를 추가

스킨 제작자 입장에서 생각해 볼 수 있는 대안책으로는 설명 메타 부분에 동적으로 해당 문서의 요약내용을 삽입하는 것이다. 티스토리 특성상 자바스크립트 이외엔 사용할 수 없는데 그것이 가능할지라도 검색엔진이 그렇게 변경된 내용을 수집할 것이라고 생각할 수 없었다. 이미 서버측에서 HTML이나 xml로 파싱된 결과만을 크롤러들이 수집해 간다는 것이 알려진 바이다. 결국엔 서버측 스크립트에서만 이를 해결할 수 있다고 생각했다.

하지만!! 검색으로 Dynamically Added Meta Data Indexed By Google Crawlers 이라는 글에 접근하게 되었고 관련된 정보를 얻을 수 있었다. 놀랍게도! 구글은 자바스크립트에 의해 실행된 페이지를 이해하도록 결정했고 이를 2014년 부터 실행에 옮기고 있다는 것이다. 위의 링크는 그것을 근거로 설명 메타를 동적으로 추가하는 것에 대한 실험 내용이다.

아직은 100% 확실한 방법은 아니라는 실험내용의 결과이지만 앞으로 가능한 방법임에는 틀림없을 것이다. 궁금하면 위의 링크에 접근해 보도록 하자.


신고

댓글을 달아 주세요

  1. BlogIcon wallel 2015.09.24 12:32 신고

    오, http-equiv="x-ua-compatible" 이 메타태그는 따로 입력하지 않아도 되는군요!

    또 하나 배워갑니다~

    • BlogIcon 흉내쟁이 2015.09.24 14:56 신고

      티스토리처럼 서비스를 강제할 수 있는 경우에는 그렇지만, 일반 웹 호스팅 서버들은 아마도 강제하지 않을겁니다. 구형 브라우저 대상으로 서비스 가입자가 사이트를 만들수도 있으니...

    • BlogIcon wallel 2015.09.24 18:15 신고

      티스토리가 아닌 다른데서 만들땐 추가해야겠네요. :)

      티스토리 자체에서 저걸 지원한다니 엄청난 의외입니다 ㅋ

  2. BlogIcon @nana 2016.07.31 19:06 신고

    고작 디스크립션 메타 태그 하나땜에 영어 블로그를 하려면 티스토리보다는 워드프레스가 유리하겠군요;;

티스토리 툴바