구글 웹마스터도구 구조화된 데이터 마크업 도우미 사용하는 방법

오랜만에 구글 계정에 로그인을 해보니 새로운 것이 생겼습니다. 언제 생겼는지는 몰라도 웹마스터 도구에 기타 리소스에 구조화된 데이터 마크업 도우미라는 것이 있습니다.

대략 알아본결과 검색엔진에 더 잘 검색이 되도록 html를 구조화 시키고, schema 나 마이크로데이터 및 json-ld 로 마크업을 하는것을 말합니다.

아래의 블로그 글은 html에 대한 지식이 없는 분들을 위해 사용하는 방법에 대한 글을 적은것입니다.

이것이 필요한것인지 아닌지는 구글 도움말을 참고하세요.

구글의 웹마스터 도구에 로그인을 해보세요. -> https://www.google.com/webmasters/

구조화된 데이터 마크업 도우미 구글 도움말 -> https://support.google.com/webmasters/topic/3068649?hl=ko&ref_topic=4600447

웹마스터 도구에서 로그인을 했다면 아래의 경로처럼 웹마스터 도구에 기타 리소스 , 구조화된 데이터 마크업 도우미를 클릭합니다.

여기서 저는 블로그를 할것이기 때문에 글을 선택했습니다.

그리고 아래처럼 제 블로그 주소를 적어준다음 태그 시작하기 버튼을 클릭합니다.

아래 이미지를 참고하세요.

미리보기 화면이 나옵니다.

먼제 우측 화면을 보시면 이름, 저자, 게시일....등등 항목이 있습니다.

이 항목을 채우면 됩니다.

채우는 방법은 먼저 이름을 지정한다고 가정합니다.

블로그 상에서 저는 이름이 demun 이기 때문에 블로그 제목에 demun 이라는 곳에 마우스를 클릭했습니다. 

그럼 새로운 팝업창이 바로 옆에 뜹니다. 

거기서 이름을 선택하면 됩니다.

이런식으로 저자, 게시일, 글 색션, 글 본문 등을 지정합니다.

왼쪽에 지정한곳은 빨강색으로 제가 표시를 해두었구요. 원래는 자세히 보시면 노랑색으로 표시가 된것을 알 수 있습니다.

모두 지정한 다음 우측 상단에 html 만들기를 클릭합니다.

그럼 아래처럼 못보던 것이 삽입이 된것이 보일겁니다.

아직까지는 미리보기 화면입니다. 블로그에 적용이 된것이 아닙니다.

우측에 스크롤 막대를 보시면 노랑색 표시가 되있고 그 부분에 새로운 태그가 삽입이 되어 있다는 겁니다.

우측 상단에 다운로드를 클릭하면 새로운 태그가 삽입된 html 을 볼 수 있습니다.

자~~~~~~~~~~~~

여기까지는 일반적인 경우입니다.

티스토리는 티스토리만의 치환자를 사용합니다.

그래서 적재적소에 태그를 잘 삽입해줘야 합니다.

새로운 태그들은 화면에 보일수도 있고, 보이지 않을수도 있습니다.

만약 하나만 표시되어야 하는데 두개가 표시된다면 안되겠죠? 뭔 수를 써야죠....

저만 일단 따라오시면 다 됩니다.

다운로드 받은 파일을 에디터로 열어주세요.

맨먼저 이름이라고 지정해둔곳을 예제로 보겠습니다.

맨처음에는 이런식으로 되어 있었습니다.

<h1>
    <a href="https://demun.tistory.com/">demun(대문블로그)</a>
</h1>

코드를 보시면 h1 태그안에 blog_link 라고 나온곳은 블로그의 주소입니다. 또 title 이라고 나온곳은 블로그 제목을 말합니다. 

이것이 아래처럼 수정이 되었습니다.

<h1>
    <a href="https://demun.tistory.com/">
        <span itemprop="name" class="visuallyhidden">demun</span>
        <span itemprop="author" itemscope itemtype="http://schema.org/Person">demun(대문블로그)</span>
    </a>
</h1>

대략 설명을 하자면 이렇습니다.

먼저 화면에 표시할것인지 아닌지를 알아야 합니다.

itemprop="name" 는 이름을 말합니다. 저는 demun 으로 표시되기를 원해서 위처럼 지정했습니다.

근데 class="visuallyhidden" 라는 것이 보이죠. 

이것은 스크린리더에는 읽고 화면에는 안보이는 CSS 설정이 들어간 클래스 입니다.

이 클래스에 대한 설명은 Boilerplate 에서 사용하는 main.css 에 있는 설정이고 설명은 여기에 있습니다.

그냥 스크린리더에서는 읽고 화면에는 안보인다는것만 알아두시면 됩니다.

물론 저 클래스를 사용하려면 CSS 편집창에 아래와 같은 설정을 추가해두어야 합니다. 주석까지 달아두면 나중을 위해서라도 좋겠죠.

/* 스크린리더에는 읽고 화면에는 안보이게하기 ||| h5bp.com/v ||| h5bp.com/p */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

다시 설명으로 가서.... <span itemprop="name" class="visuallyhidden">demun</span> 는 화면에 안보이게 처리하고 demun 이라는 이름을 사용하기 위함이라고 했습니다.

그 아래줄은 title 이라는 치환자를 포함하고 있습니다. 

태그가 치환자를 포함함으로 표시가 되어도 되겠죠. 그래서 저런식으로 표기한겁니다.

다른곳을 하나더 예를들어 볼까요.

아래 이미지에서 빨강색 테두리가 잇는 곳이 새로 추가된 곳입니다.

화면에 안보이게 하기 위해서 클래스를 사용한것이 보이시죠.

이런식으로 추가적으로 수정해줘야 화면에서도 무리없이 보여집니다.

위에서 말했듯 왜 이걸 하는지는 구글 도움말을 참고하시고 하는 방법에 대한 글을 적은것입니다.

구조화된 데이터 마크업 도우미 구글 도움말 -> https://support.google.com/webmasters/topic/3068649?hl=ko&ref_topic=4600447