hyozin.com

티스토리 블로그 검색엔진 최적화 메타태그 적용 안내 본문

모바일 IT

티스토리 블로그 검색엔진 최적화 메타태그 적용 안내

효진님 2016.02.23 14:30

오늘 티스토리 공지사항으로 검색 및 소셜 서비스를 위한 메타태그 적용 안내 관련 글을 볼 수 있었습니다.


우연의 일치라고 할까 지난 주에 이미 구글 웹마스터 도구를 활용한 구글 검색 인지도 개선 안내 메일을 받았고 어제는 검색엔진 최적화 HTML 마크업 가이드를 읽은 상태라서 티스토리의 관련 공지사항이 매우 신기하게 느껴졌습니다 ^^


검색엔진 최적화를 위한 메타태그 적용과 HTML 마크업과 관련 제가 이해하고 있고 제 블로그에 적용한 것들을 관련 지식이 없는 분들에게 조금이나마 도움이 되기를 바라며 간략하게 글을 정리해서 올려 봅니다.




선호 URL 지정하기.


제 블로그 도메인 주소는 hyozin.com 입니다만 크롬 브라우저 주소창에 www.hyozin.com 이라고 입력해도 동일한 블로그 콘텐츠를 볼 수 있습니다. 이렇게 동일 콘텐츠에 대해 여러 개의 접근 주소가 있다면 검색엔진은 둘 중의 하나를 임의로 선택할 수 밖에 없습니다.


제가 선호하는 블로그 주소는 간략한 형태인 hyozin.com인데 검색엔진이 www.hyozin.com으로만  글을 가져가서 검색 결과에 그렇게 표시된다면 상당히 불편한 기분이 들 겁니다.


이런 경우 구글과 네이버는 웹마스터도구를 통해 선호 URL을 사용자가 지정할 수 있는 옵션을 제공 합니다. 이러한 웹마스터 도구를 이용하지 않는 분들은 메타태그를 이용하여 선호 URL 지정을 할 수 있습니다.


티스토리 관리자 메뉴에서 html / css 편집 모드로 들어 갑니다. html 에디터를 통해 <head> 아래에 다음과 같이 선호 URL을 지정 합니다.



<head>

<link rel="canonical" href="http://hyozin.com" >


이 방법은 rel="canonical" 링크 요소를 사용하여 선호 URL을 지정하는 것 입니다.


어렵지 않죠? ^^


에디터 상에 추가 후 저장 하기 꼭 눌러주는 것 잊지 마세요



블로그 이름과 블로그 글 제목 표시 부분 개선.


티스토리 스킨에 사용되는 치환자 중 페이지 제목을 표시해주는 치환자는 아래와 같은 형식 입니다.



<title>[##_page_title_##]</title>


이 치환자를 사용하면 블로그 첫 화면에서 블로그 제목이 아닌 페이지 타이틀이 표시가 됩니다.


만약에 첫 화면의 글의 제목이 "아이폰 카메라 16:9 비율로 사진 촬영하기"인데 hyozin.com으로 접속 시 즐겨찾기를 하면 "이효진의 블로그"가 아닌 "아이폰 카메라 16:9 비율로 사진 촬영하기"가 제목으로 저장 됩니다.


이 문제를 해결하려면 치환자를 아래와 같이 고치면 됩니다.



<title>[##_page_title_##] :: [##_title_##]</title>


위와 같이 고치면 "아이폰 카메라 16:9 비율로 사진 촬영하기 :: 이효진의 블로그" 이런 형식으로 바뀌게 됩니다.


이렇게 되면 2가지 문제가 발생하는데 첫째는 여전히 hyozin.com 첫 페이지에서의 제목은 "이효진의 블로그"가 단독으로 표시되지 않는 다는 것과 둘째는 모든 글의 제목 형식이 OOOO :: 이효진의 블로그 이런 형식으로 되어 중복 표시되는 문제가 생긴다는 것 입니다.


이 문제를 해결하기 위해 그 동안 아래와 같은 자바스크립트 코드를 사용했었는데 이제는 [##_page_title_##] 치환자 만으로도 첫 페이지에서는 블로그 제목이 나머지 페이지에서는 글 제목이 표시 된다고 합니다 ^^



<script>

  if ( window.location.pathname == '/' ) {

    document.title = '이효진의 블로그';

  }

</script>


그렇기 때문에 스킨에 위와 같은 코드를 넣은 분들은 이제 해당 코드를 삭제해도 됩니다.



오픈 그래프.


오픈 그래프 개념은 별거 없습니다. 트위터, 카카오톡, 밴드, 카카오스토리, 페이스북 같은 소셜 서비스에서 내 블로그 주소를 링크하여 공유할 때 미리보기 되는 부분을 블로그 운영자가 메타 태그를 활용하여 수정할 수 있습니다.





카카오톡에서 오픈 그래프 메타 태그 수정 전의 미리보기 화면은 위와 같습니다. 메타 태그를 아래와 같이 임의로 수정해봤습니다.



<meta property="og:type" content="website">

<meta property="og:title" content="이효진의 티스토리">

<meta property="og:description" content="흔한 블로그">

<meta property="og:image" content="http://cfs.tistory.com/custom/blog/200/2004075/skin/images/IMG_9333.jpg">


위와 같이 메타 태그를 고친 후 네이버 밴드에서 글쓰기 링크로 붙일 경우 아래 화면 처럼 미리 보기가 바뀌게 됩니다.





오픈 그래프 개념 별거 없죠? ㅎㅎㅎ 자신의 블로그에 적용 해보세요





위와 같이 네이버 웹마스터 도구의 페이지 최적화 검증에서 모바일 사용성 - 반응형 페이지 같은 항목에 녹색 체크가 많을 수록 네이버 검색엔진에 좀 더 정확하게 블로그 글이 반영되지 않을까 싶습니다. 제 블로그는 아직 네이버 검색에 노출되지 않고 있습니다 ^^ 블로그를 만든지 얼마 되지 않았고 글도 많지 않아서 그런 것 같습니다. 아무튼 이번 기회에 자신의 블로그가 검색엔진에 최적화 되도록 점검을 해보시기 바랍니다. -끝-

댓글 7
  • BlogIcon COCO Media 2016.02.24 14:03 신고 오픈그래프 정보를 위와 같이 남기면 안되요~!!
    오픈그래프 모든 정보는 티스토리 내에서 자체적으로 제공하기 때문에 그렇게 적으시면 모든 포스팅이 고정되어버립니다. 당장 삭제하셔야해요
    rel="canonical" 이부분도 그렇게 적으면 모든 포스팅 주소가 고정되기때문에 치환자를 통해서 적어야 되지만 이것도 티스토리 자체에서 제공하기 때문에 적으시면 안됩니다.
    티스토리에 맞는 오픈 그래프에 대해서 정리해두었으니 cocosoft.kr/360 한번 확인해보시구요!!^^ 메타태그는 이제 티스토리에서 자체적으로 모두 제공하기 때문에 사용자들이 적으실 필요가없어요 ㅠ 잘못 작성했다가 모든 글의 정보가 고정되어버려서 검색엔진이 모든글에 대해서 동일한 주소로 수집하게됩니다.
  • BlogIcon 효진님 2016.02.24 14:44 신고 이 글은 메타태그와 오픈그래프가 뭔지 잘 모르는 분들을 위해서 작성한 것이고요 ^^

    오픈그래프 관련 매타태그 테스트 차원에서 직접 수정해본 것 입니다.

    저렇게 메타태그를 넣으면 미리보기가 고정되는 것을 금방 확인할 수 있어요 ^^

    고정 관련 부분은 어떤 충고인지 저도 잘 알고 있습니다.

    다만 블로그를 홍보할 목적이라면 저렇게 대표 이미지와 설명 그리고 URL을 표시하는 것도 나쁘지 않을 겁니다 ^^

    오픈 그래프 메타태그는 소셜서비스와 관련하여 링크시 미리보기 표시에만 한정된 것 아닌가요?

    메타태그를 저렇게 고정 시키면 검색엔진에서 모든 글에 대해서 동일한 주소로 수집한다는 것이 무슨 말인지 좀 더 자세히 알려줄 수는 없나요?
  • BlogIcon COCO Media 2016.02.24 15:03 신고 메타태그와 오픈그래프 대그 잘모르시는 분들을 위해서 작성한 것이라고 하셨는데..
    편집에서 수정하고 저장하는 방법 까지 나와있기 때문에 혹시나 따라하는 분들이 계실까봐 따라하지 말라고 삭제해야한다고 한겁니다!

    그리고 만약 작성을 하더라도 스킨치환자를 통해서 페이지마다 각각의 정보가 제공되게 해야하는법을 알려주셔야됩니다. 그리고 위에
    모든 오픈그래프 메타 정보는 티스토리에서 자체 제공하기 때문에
    남기면안된다는 말을 적어주시면 좋을것같아요!!


    그리고 오픈그래프태그를 해당처럼 고정해서 입력해버리면 소셜서비스 공유시 미리보기 표시에만 한정되는게 아니고 직접 공유를 했을때 주소랑 이미지 설명등이 고정되어버립니다. 일부러 나는 게시글을 공유했을때 단하나의주소로만 연결되게 할게 아니면 굳이 적을 필요가없어서 말씀드려요!

    현재로는 오픈그래프가 네이버나 구글 검색결과에는 영향을 미치지 않는다고 보는데
    검색엔진의 로직에 따라서 메타태그정보를 갖고가는 경우도 있습니다. 네이버의 경우는 현재 로직이 바껴서 RSS 피드 전체를 갖고가기때문에 메타 태그와는 관계가 없구요.
    구글의 경우는 초스피드 검색을 지향하기 때문에 메타태그만 활용해서 검색표현을 나타내게 됩니다. 다른 검색엔진들은 어떤지 잘모르겠구요. 위 두개도 추정하는것이지요. 최대한 검색봇에서 포스팅글의 메타태그의 충돌이 없이 긁어 갈 수 있도록 위해서! 작성을 금한다는 것이에요 ㅎㅎ이미 제공하는것과 다른정보의 op태그를 두번 쏴버리는것은 웹페이지 웹표준에도 맞지않게 되어버려서요
    중복해서 메타 태그를 여러번 넣으면 고의적 스팸성으로 분석할 수있다는 의견도 있습니다. 검색봇만이 알수있겠지만 최대한 친환경적으로 맞춰주는 것이지요.

    요약하자면 현재 구글이나 네이버 검색결과에서 오픈그래프메타는 영향을 안주지만 중복해서 쏴버리기때문에 SEO검색최적화를 위해서 티스토리블로그 개인이 OG정보를 작성하는것은 권장하지 않습니다.
  • BlogIcon COCO Media 2016.02.24 15:10 신고 덧붙히자면 카카오톡이나 밴드는 OG정보를 사용하지않고 자체스크립트로 해당주소를 보내기 때문에 OG정보와는 관련이 없고 네이버블로그, 포스트, 폴라, 페이스북, (트위터는 자체적 트위터카드), 카카오스토리, 구글+ 등등 채널형 서비스에서 주로 사용을 많이 합니다. 그리고 오픈그래프 메타태그의 의미는 http://ogp.me/ 주소에서 알수있습니다.

    블로그 주인님께서 작성하신 의도는 잘알겠지만!! 개념과 수정하는 방법은 잘나와있지만 해당 결과와 그리고 작성하면 안된다는 결론이 더있으면 많은 분들에게 올바른 정보를 전달 할 수 있을 것이라 생각합니다!!
  • BlogIcon 효진님 2016.02.24 15:35 신고 카카오톡이랑 밴드에서 테스트 해봤는데 임의로 수정하여 고정된 메타태그로 미리보기가 표시 되던데요?

    메타태그 두번 쓰면 웹표준 위반에 해당되는 군요 몰랐습니다 ^^

    아무튼 고견 감사하고요 좋은 하루 보내세요~~
  • BlogIcon COCO Media 2016.02.24 15:35 신고 아아 그 일부 스킨을 사용하시는 분들중에 공유 api를 직접사용하시는분들은 공유하기버튼시에는 자체스크립트를 사용한다고 한거에요 ㅎㅎ 공유버튼이 달려있는 ㅎㅎ
    링크주소를 그냥 붙혀넣기하면 og정보로 고정이 될겁니다! 마크쿼리스킨 사용하시고 계셔서 공유버튼 따로 존재하는 줄 알았어요 ㅠ 마크쿼리는 현재 업데이트가 더이상 되지않아 일부기능들이 작동안하는 문제가 있을거에요. 암튼 저도 IT관련해서 많이 관심잇어서 구글링도 많이하고 찾아보면서 하나씩 배우고있네요 앞으로도 좋은 많은 정보 기대하겠습니다!
  • BlogIcon Lady Expat 2016.02.25 10:59 신고 댓글들 보면서 블로깅 초보자인 제가 많이 배우게 되네요. :) 감사합니다. :)
댓글쓰기 폼