안녕하세요 렛플운영자입니다.

이번에는 SEO의 기본보다는 구조화 데이터(스니펫)에 대한 이야기를 해보고 싶은데요

SEO와 관련한 내용은 찾아보면 블로그나, 여러가지 서적 등에서 많이 찾아볼 수 있고,

많은 분들이 기본적인 SEO도 하셨을 것이라고 생각합니다. 이부분은 나중에 시간이 되면 저희쪽에 적용되어있는 것들도 적어보려고 합니다.

그러나 구조화된 데이터는 좀 겁이 나기도 하고, 어떻게 적용해야할지 가이드 문서를 봐도 어려워서, 쉽게 정리해보려고 합니다.

1. 구조화된 데이터

구조화란 데이터란 무엇이냐라고 질문한다면, 제가 이해한 바로는 태그와 같다. 라고 답변할 수 있을 것 같습니다.

웹페이지를 하나의 매거진이라고 본다면, 매거진에는 상당히 많은 내용이 있죠.

이렇게 많은 섹션에 다양한 내용이 담겨져 있고, 이 매거진을 요약을 해줘야 하는데,

h1이나 h2 , li 태그만으로는 크롤링 봇이 이해하기에는 조금 어렵습니다.

크롤링 봇이 이해하기 좋은 방향으로 쉽게 구조화해서 정리해줘야 하는 작업이 "구조화데이터"라고 볼 수 있습니다.

물론 , 일반적인 내용은 h1/h2 태그로도 잘 퍼갈 수 있습니다만,

평가/리뷰 그리고 검색 혹은 내가 이런 기능이 있어라고 정의해줘야 퍼간다고 볼 수 있습니다.

2. 구조화 데이터 쓰긴 하는거냐?!

일전에 대표 IT기업의 자회사의 대표님을 뵌적이 있습니다.

해외 시장을 진출하고 계셨는데, 현재 서비스의 유입이 전체적으로 구글 검색을 통해 많이 상승하였다라고 하셨는데요

주요한 유입의 채널은 , "평가"였습니다. 메뉴 단위별로, 데이터와 평가가 가능한 시스템을 가지고 계시고,

그렇지 못한 다른 업체 대비 , 후발주자이지만 검색량이 상당히 늘어난다라고 말씀하셨습니다.

또한 한국내에 양대 검색엔진이라고 볼 수 있는 네이버와 구글 모두 구조화된 데이터를 활용하여 크롤링 하고 있다고 적혀있습니다.

그리고 여러 사이트를 들어가보면 모두 구조화된 데이터들이 정의되어 있습니다.

상세 내용은 아래에 참고할 수 있습니다.

https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ko

https://searchadvisor.naver.com/guide/structured-data-intro

3. 구조화 예제는?!

많이 활용되는 구조화 데이터 등을 한번 알아보도록 하겠습니다.

우리는 그래도 적용되어있는 케이스를 베끼는것이 가장 좋은 것 같습니다.

연관채널

연관채널은 다음과 같이 네이버에 등록하면, 하단에 자동으로 뜨는것을 의미합니다.

이것을 설명하고 있는 네이버 서치어드바이저가 웹사이트에 적용하는 것을 베껴봅시다.

저는 그대로 베껴서 쓰는것이 저는 가장 좋다고 생각합니다.

type, name, url, sameAS 이렇게 분리되어있는데요. 여기의 sameAs쪽에 연관된 채널을 등록하면 되겠습니다.

그러면 sameAs의 html meta를 가지고 와서 저렇게 보여주는 것 같습니다.

<script type="application/ld+json">
{"@context":"http://schema.org",
"@type":"Person",
"name":"Naver Search Advisor",
"url":"https://searchadvisor.naver.com",
"sameAs":
["https://blog.naver.com/naver_webmaster","https://tv.naver.com/webmasters"]}
</script>

그리고 네이버의 양심과 시스템이 온전하기를 바라며, 아래와 같이 뜨길 기도해봅시다.

하나은행은 위와 달리 , 아래 형식으로 적용했습니다. 혹시 두개를 같이 넣어도 넣어도 됩니다.

이 스타일은 그냥 복붙해도 , 안보이게 처리되더라구요.그냥 복붙 하시면 되겠습니다.

여기도 url과 sameAs가 있는데, sameAs쪽에 인스타그램이나, 블로그 등을 같이 넣어주시면 되겠습니다.

<span itemscope="" itemtype="http://schema.org/Organization">
<link itemprop="url" href="http://www.mysite.com">
<a itemprop="sameAs" href="https://www.facebook.com/myfacebook"></a>
<a itemprop="sameAs" href="http://blog.naver.com/myblog"></a>
<a itemprop="sameAs" href="http://smartstore.naver.com/mystore"></a>
</span>

사이트 이동경로(BreadcrumbList)

사이트 이동경로는, 사이트맵이랑 비슷한 개념인데, 사이트맵이랑은 다릅니다.

sitemap.xml은 URL을 그냥 쭉 나열하는 개념이라고 하면, 사이트 이동경로는 "이 URL"간의 관계를 맺어줍니다.

패밀리처럼 묶어주는 역할을 합니다.

아래보시면, 렛플의 프로젝트 상세페이지(https://letspl.me/project/0)가 프로젝트 페이지 하단(https://letspl.me/project)과 연계되어있다는 것을 보여주고 있습니다.

가장 쉬우면서 중요하다고 볼 수 있습니다.

이것도 베끼는게 가장 빠르겠죠. 렛플을 베껴보겠습니다.

position 1(상위)/2(하위)를 통해서 상위 url을 지정하고, 현재 페이지가 그 하위임을 표시하면 됩니다.

<script type="application/ld+json">
{"@context":"https://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[{"@type":"ListItem","position":1,"name":"Project(프로젝트)","item":"https://letspl.me/project"},
{"@type":"ListItem","position":2,"name":"직장인 운동 커뮤니티 『작심삼칩』"}]}
</script>

상품의 정보 및 구매 평점(Product)

특히 이커머스에서 자주 사용하는 방법입니다.

이커머스에서 중요한 가격 정보, 카테고리, 그리고 지금 구매가 가능한지를 적어두고 있습니다.

평점을 만들면 이렇게 하단에 평점과 , 참여한 사람 수가 표시되며, 풍부하게 내용을 표시할 수 있습니다.

이것도 네이버쇼핑을 베껴보도록 하겠습니다.

<script type="application/ld+json">
{"name":"[N도착보장]  포멀 아우터의 정석, 고퀄리티 코트 모음",
"@context":"https://schema.org",
"@type":"Product",
"image":"https://shop-phinf.pstatic.net/20221020_148/1666243881831Q8X9x_JPEG/67379780353413550_744472770.jpg",
"description":"지오지아 공식 스토어",
"sku":100029208,
"mpn":"7382294443",
"productID":"7382294443",
"category":"패션의류>남성의류>코트",
"offers":
{"@type":"Offer","price":109000,"priceCurrency":"KRW","availability":"http://schema.org/InStock","url":"https://smartstore.naver.com/main/products/7382294443"},
"brand":{"@type":"Brand","slogan":"차별화된 Fit과 Quality로 트렌드와 실용성을 모두 아우르는 브랜드"},
"aggregateRating":{"@type":"AggregateRating","bestRating":5,"worstRating":1,"ratingValue":4.78,"reviewCount":865,"ratingCount":865}}
</script>

뉴스(NewsArticle)

뉴스아티클이나 블로그 포스팅의 경우, 블로그나 뉴스로 묶어주거나, 구글의 디스커버리 채널에 노출될 수 있는 기능이라고 보시면 됩니다.

이번엔 medium을 베껴봅시다. 미디엄은 모든 글이 newsArticle로 정의되어있습니다. 아래와 같은 내용을 모두 넣어주시면 되겠습니다.

중요한건 이름과 , 상세설명 등을 같이 넣어주는 것이라고 보면 될것 같고, 수정날짜도 최신 데이터인지 판단하는 중요한 내용이라고 보입니다.

<script type="application/ld+json">
{"@context":"http:\u002F\u002Fschema.org",
"@type":"NewsArticle",
"image":["https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*VNp3-3zu4DTwtBoWhzmacw.png"],
"url":"https:\u002F\u002Fthebolditalic.com\u002Fwhy-im-breaking-up-with-burning-man-efe43bb5c9c5",
"dateCreated":"2023-08-23T17:36:32.866Z",
"datePublished":"2023-08-23T17:36:32.866Z",
"dateModified":"2023-09-04T06:05:11.741Z",
"headline":"Why I’m breaking up with Burning Man - The Bold Italic",
"name":"Why I’m breaking up with Burning Man - The Bold Italic",
"description":"People know me at Burning Man. For 27 years, I’ve been the editor and publisher of Black Rock City’s most popular newspaper, first known as Piss Clear (named after the Black Rock Desert’s #1 survival…",
"identifier":"efe43bb5c9c5",
"author":{"@type":"Person","name":"The Bold Italic","url":"https:\u002F\u002Fthebolditalic.medium.com"},"
creator":["The Bold Italic"],"
publisher":{"@type":"Organization","name":"The Bold Italic","url":"thebolditalic.com","logo":{"@type":"ImageObject","width":177,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:177\u002F1*7n8CgoDdQ8eRTL2KAivCNQ.png"}},
"mainEntityOfPage":"https:\u002F\u002Fthebolditalic.com\u002Fwhy-im-breaking-up-with-burning-man-efe43bb5c9c5"}</script>

블로그(BlogPosting)

뉴스아티클이나 블로그 포스팅의 경우, 블로그나 뉴스로 묶어주거나, 디스커버리 채널에 노출될 수 있는 기능이라고 보시면 됩니다.

이번엔 티스토리를을 베껴봅시다. 티스토리는 모든 글이 blogPosting로 정의되어있습니다. 아래와 같은 내용을 모두 넣어주시면 되겠습니다.

이것도 동일하게 헤드라인, 본문 , 수정날짜 등을 같이 기재하고 있는것이 보이실 겁니다.

<script type="application/ld+json">
{"@context":"http://schema.org",
"@type":"BlogPosting",
"mainEntityOfPage":{"@id":"https://letspl.tistory.com/entry/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%8A%A4%ED%84%B0%EB%94%94%EC%9B%90-%EB%AA%A8%EC%9C%BC%EA%B3%A0-%EC%8A%A4%ED%83%80%EB%B2%85%EC%8A%A4-%EC%83%81%ED%92%88%EA%B6%8C-GET","name":null},
"url":"https://letspl.tistory.com/entry/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%8A%A4%ED%84%B0%EB%94%94%EC%9B%90-%EB%AA%A8%EC%9C%BC%EA%B3%A0-%EC%8A%A4%ED%83%80%EB%B2%85%EC%8A%A4-%EC%83%81%ED%92%88%EA%B6%8C-GET",
"headline":"[이벤트] 스터디원 모으고 스타벅스 상품권 GET!",
"description":"안녕하세요. 렛플입니다. 드디어 기다리고 기다리던 렛플에서도 스터디만을 위한 스터디를 위한 모임이 가능해졌습니다. 아직은 사이드프로젝트가 부담스러울때, 주제를 가지고 더 딥~하게 팀원들과 공부하고 싶을때! 그때 바로 렛플에서 스터디원도 모으고 스터디개설도 하고 이게 바로 1석 2조 🙋&zwj;♀️🙌🙋&zwj;♂️ 이제 고민은 그만! 렛플이 든든한 지원군이 되어드리겠습니다. 지금 바로 스터디인증하고 스타벅스 3만원 기프트카드를 받아보세요. 선착순이벤트이니 허리업! 기타 자세한 내용은 상세페이지를 참고 또는 렛플에서 확인가능합니다. 사이드프로젝트, 스터디도 역시 렛플 https://letspl.me/story/120 렛플 │ 스터디원 모으고 스타벅스 상품권 GET! 스토리 읽어보세요 | 사이드프로젝트와 토이프로 👉스터디 ..",
"author":{"@type":"Person","name":"렛플 official","logo":null},
"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbj1bZX%2FbtrymkecfLm%2Fu4Y5EfbL9KH5tiWYU6YzX0%2Fimg.jpg","width":"800px","height":"800px"},
"datePublished":"20220404T10:31:33",
"dateModified":"20220404T10:31:33",
"publisher":{"@type":"Organization","name":"TISTORY",
"logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>

FAQ

FAQ는 말그대로 FAQ를 검색에서 직접 나타나게 하는 구조화방법입니다.

질문과 답변이 짝으로 이루어져 있습니다. 이런것을 여러개 배열내에 등록해주면 됩니다.

렛플을 베껴보도록 하겠습니다.

<script type="application/ld+json" >
{"@context":"https://schema.org","@type":"FAQPage",
"mainEntity":[
{"@type":"Question","name":"탈퇴 신청을 철회하고 싶습니다.","acceptedAnswer":{"@type":"Answer","text":"<p>탈퇴 철회는 탈퇴신청 후 30일이내까지 가능합니다.<br>\n가입시에 기재하신 이메일을 통해 <a href=\"mailto:help@letspl.medp\">help@letspl.me</a>로 탈퇴 철회에 대한 내용을 보내주시면,<br>\n이메일과 맞는 아이디를 확인하여 탈퇴신청을 철회해드리니 이점 참고 부탁 드립니다.</p>\n<p>30일이후로는 개인정보 관련 데이터가 모두 삭제된 상태여서, 계정복원이 불가능합니다.</p>\n"}},
{"@type":"Question","name":"탈퇴 신청을 철회하고 싶습니다.","acceptedAnswer":{"@type":"Answer","text":"<p>탈퇴 철회는 탈퇴신청 후 30일이내까지 가능합니다.<br>\n가입시에 기재하신 이메일을 통해 <a href=\"mailto:help@letspl.medp\">help@letspl.me</a>로 탈퇴 철회에 대한 내용을 보내주시면,<br>\n이메일과 맞는 아이디를 확인하여 탈퇴신청을 철회해드리니 이점 참고 부탁 드립니다.</p>\n<p>30일이후로는 개인정보 관련 데이터가 모두 삭제된 상태여서, 계정복원이 불가능합니다.</p>\n"}}

]}</script>

[검색창]

검색 기능이 있다면 검색된 결과를 유도하게 끔 , 내용을 작성하면 됩니다.

렛플에서는 검색기능을 아래와 같이 구조화 데이터로 바깥으로 빼놓았습니다.

다만 이렇게 작성하고 끝나는 게 아니라, sitemap.xml에도 이런 예시들을 추가하시면 되겠습니다.

https://letspl.me/search?q=자바스크립트

https://letspl.me/search?q=창업

https://letspl.me/search?q=사이드프로젝트

등등...

<script type="application/ld+json" >
{"@context":"https://schema.org",
"@type":"WebSite",
"url":"https://letspl.me/",
"potentialAction":{"@type":"SearchAction",
"target":{"@type":"EntryPoint","urlTemplate":"https://letspl.me/search?q={search_term_string}"},
"query-input":"required name=search_term_string"}}
</script>

4. 마치며,

위의 내용은 공통적인 내용이고, 사실 이것보다 상당히 많습니다.

기업평가를 자주하는 잡플랫닛의 경우, 기업의 평가를 구조화데이터로 넣어놓았습니다.

<script type="application/ld+json">
{
"@context" : "http://schema.org/",
"@type": "EmployerAggregateRating",
"itemReviewed": {
 "@type": "Organization",
 "name": "(주)",
 "sameAs" : "https://www.jobplanet.co.kr/companies/348308/reviews/%EC%97%90%EC%8A%A4%ED%81%90%EC%A0%9C%EC%95%BD"
},
"ratingValue": "5.0",
"ratingCount": "22"          
}
</script>

우리는 트래픽을 많이 받아야 하잖아요. 그러니 남이 잘 하는것들 그대로 가져와서 베껴서 빨리 우리 사이트에 적용하도록 해보시죠

이제 마음의 준비되셨다면, 크게 숨 한번 쉬시고 다시 함 드가자~

https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ko

https://searchadvisor.naver.com/guide/structured-data-intro