구글 블로그 테마 만들기 과정을 위한 JSON-LD 구조화 데이터 주입 방법

우리가 오랜 시간 공들여 빌드해 온 구글 블로그(Blogger) 테마 만들기 시리즈가 드디어 대망의 5편, 화룡점정의 단계에 도달했습니다. 1편부터 4편까지의 긴 여정을 거치며 우리는 웹사이트의 외형적인 뼈대를 세우고, 조건문 분기를 통해 불필요한 페이지를 수집 대상에서 제외하며 로봇을 제어하는 핵심적인 메타 태그 최적화 기법까지 모두 학습했습니다. 하지만 검색 엔진 최적화(SEO)의 세계에서 눈에 보이는 메타 태그만큼이나 중요한 요소가 있습니다. 바로 검색 로봇에게 우리 사이트의 콘텐츠가 어떤 의미를 지니고 있고, 어떤 계층 구조를 가졌는지 컴퓨터가 이해할 수 있는 언어로 직접 속삭여 주는 구조화 데이터 작업입니다. 이번 5편에서는 내 글을 구글 검색 창에서 더욱 돋보이게 만들어 줄 구조화 데이터 기술의 정수, 제이슨 엘디를 테마 파일에 완벽하게 심는 실전 방법을 다루어 보겠습니다.

구글 검색 창의 치트키가 되는 사이트 전반의 웹사이트 스키마 분석

블로그를 운영할 때 반드시 탑재해야 하는 구조화 데이터는 크게 두 가지 영역으로 나뉩니다. 첫 번째는 내 블로그라는 웹사이트 자체의 고유 명칭과 대표 주소, 그리고 사이트 내부 검색창 기능을 구글에게 명확하게 선언해 주는 사이트 전반의 구조화 데이터입니다. 이 코드는 블로그의 대문 역할을 하는 메인 화면을 포함하여 모든 페이지에 기본적으로 투영되어야 하므로, 테마 파일의 가장 상위 개념인 헤드 태그 내부에 배치해야 합니다.

구글 검색 로봇은 사람이 아니기 때문에 메인 화면에 크게 적힌 글씨만 보고는 이것이 블로그의 타이틀인지, 아니면 단순한 로고 문구인지 헷갈려할 때가 있습니다. 이때 표준화된 규격의 스크립트를 헤드 구역에 미리 주입해 두면, 구글은 페이지를 긁어가는 즉시 이 사이트의 이름이 무엇이고 어떤 대표 도메인을 가졌는지 오차 없이 인지하게 됩니다. 그렇다면 이 강력한 첫 번째 마법의 코드는 어떻게 생겼을까요?

<script type='application/ld+json'>
  {
    "@context" : "https://schema.org",
    "@type" : "WebSite",
    "name" : "<data:blog.title/>",
    "url" : "<data:blog.homepageUrl.canonical/>",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "<data:blog.homepageUrl.canonical/>search?q={search_term_string}",
      "query-input": "required name=search_term_string"
    }
  }
</script>

이 스크립트 내부에서 사용된 핵심 변수들의 작동 원리를 파악해 보면 구글 블로그의 고유 템플릿 문법이 얼마나 정교한지 알 수 있습니다. 먼저 데이터 블로그 타이틀 문법은 구글 블로그 설정 창에서 입력한 블로그의 메인 제목을 실시간으로 가져와 텍스트로 변환해 줍니다. 데이터 블로그 홈페이쥐유알엘 캐노니컬 문법은 블로그의 고유 메인 도메인 주소를 정확하게 추출하여 매핑해 주죠. 마지막으로 포텐셜액션 항목 아래에 정의된 타깃 변수는 구글 검색창에서 유저가 특정 키워드를 검색했을 때 우리 블로그 내의 검색 결과 경로로 사용자를 다이렉트로 넘겨주도록 검색 매개변수를 규정하는 아주 세련된 고급 기능입니다.

개별 본문 글의 가치를 높여주는 블로그포스팅 스키마와 배치 포인트

두 번째로 구현해야 할 요소는 개별 포스팅 문서에 들어갈 데이터 스키마입니다. 앞서 처리한 코드가 사이트 전체의 정체성을 보여준다면, 이번 코드는 독자가 읽고 있는 하나의 개별 글이 언제 작성되었고, 누가 썼으며, 어떤 대표 이미지를 담고 있는지 타임라인과 출처를 엄격하게 증명해 주는 신분증과 같습니다. 이 정보가 구글에 정확히 등록되어야 구글의 뉴스 탭이나 디스커버리 피드, 그리고 일반 검색 결과 창에 글이 매력적인 카드 형태로 배치될 수 있습니다.

이 개별 포스팅용 스크립트는 아무 데나 막 넣으면 안 되고, 반드시 3편에서 설계했던 테마 소스코드 내의 특정 가상 위치를 찾아서 이식해 주어야 합니다. 바로 메인 인클루더블 태그 내부에 존재하는 비엘스 조건문 직후의 공간입니다. 왜 굳이 이 자리에 넣어야 할까요?

구글 블로그 테마의 내부 로직상 비엘스 구역은 사용자가 메인 화면이나 목록 화면이 아닌, 오직 단독 포스팅 글 본문 페이지에 들어왔을 때만 실행되는 특수 활성화 공간이기 때문입니다. 메인 화면이나 태그 검색 화면에서는 개별 글의 제목이나 작성일 데이터 변수를 호출할 수 없으므로, 만약 이 코드를 전체 구역에 노출하면 심각한 구문 오류가 발생하여 블로그 테마가 깨지게 됩니다. 오직 본문 글이 열리는 독립적인 타이밍에만 이 메타 스크립트가 로드되도록 동선 제어를 해주는 것이 테마 개발의 핵심 아키텍처입니다.

<script type='application/ld+json'>
  {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "<data:post.url.canonical/>"
    },
    "headline": "<data:post.title.jsonEscaped/>",
    "datePublished": "<data:post.date.iso8601.jsonEscaped/>",
    "dateModified": "<data:post.date.iso8601.jsonEscaped/>",
    "author": {
      "@type": "Person",
      "name": "<data:post.author.name.jsonEscaped/>"
    },
    "publisher": {
      "@type": "Organization",
      "name": "<data:blog.title.jsonEscaped/>"
    }<b:if cond='data:post.featuredImage'>,
    "image": [
      "<data:post.featuredImage/>"
    ]</b:if>
  }
</script>

여기서 사용된 변수들을 하나씩 뜯어보면 구글 블로그 엔진이 데이터를 다루는 꼼꼼함을 엿볼 수 있습니다. 제목을 가져오는 템플릿 변수에 제이슨 이스케이프 처리가 붙어 있는 것을 보실 수 있는데, 이는 글 제목에 쌍따옴표나 특수문자가 들어갔을 때 제이슨 문법 구조가 깨지는 현상을 미연에 방지해 주는 아주 고마운 보호 장치입니다. 날짜 역시 표준 국제 시간 규격인 ISO 8601 형태로 변환되어 발행일과 수정일 데이터에 깨끗하게 주입됩니다. 작성자 이름을 추출하는 변수와 발행 기관 역할을 하는 블로그 타이틀 변수도 정교하게 맞물려 돌아갑니다.

특히 코드 마지막 구역에 배치된 비이프 조건문은 이 테마 소스코드의 디테일을 보여주는 백미입니다. 글에 대표 썸네일 이미지가 존재할 때만 제이슨 배열 데이터 내부에 이미지 주소 변수를 콤마와 함께 자연스럽게 추가해 주고, 만약 텍스트로만 구성된 글이라서 이미지가 없다면 구문 에러를 내지 않고 깔끔하게 닫는 괄호로 스크립트를 마감하도록 설계되어 있습니다.

최적화 테마의 실제 작동 사례와 완성된 플랫폼의 가치 확인하기

여기까지 우리 시리즈에서 안내해 드린 메커니즘을 꼼꼼하게 손으로 조립해 오셨다면, 여러분은 기성 유료 테마 부럽지 않은 아주 정밀하고 군더더기 없는 나만의 솔루션을 손에 넣으신 셈입니다. 불필요한 위젯 스크립트나 용량만 차지하는 외부 제이쿼리 라이브러리를 전면 배제했기 때문에, 페이지를 호출하는 즉시 화면이 열리는 세상에서 가장 빠른 구글 블로그 테마가 완성된 것입니다.

이렇게 조립된 소스코드가 실제로 필드에서 얼마나 빠르고 안정적으로 굴러가는지 눈으로 확인해 보고 싶으신 분들이 많을 텐데요. 우리가 1편부터 5편까지 머리를 맞대고 빌드해 온 이 순수 스켈레톤 코드를 베이스로 삼아, 디자인 요소를 얹고 실제로 활발하게 운영되고 있는 표준 뼈대 사이트 사례를 하나 보여드리겠습니다. 아래 경로를 방문하셔서 페이지 소스 보기를 해보시거나 브라우저 로딩 속도를 측정해 보시면 우리가 만든 아키텍처의 강력함을 단번에 체감하실 수 있을 것입니다.

노후 준비 A to Z, 실전 최적화 테마 적용형 사이트 구경하기

해당 사이트를 관찰해 보시면 검색 로봇이 접근했을 때 에러를 뿜지 않고 깔끔하게 데이터를 파싱해 가는 레이아웃의 전형을 확인하실 수 있습니다. 이 표준 템플릿 구조 위에 여러분이 원하는 색상 값이나 폰트 스타일, 그리고 상단 헤더 배너의 디자인만 CSS로 조금씩 변경해 가며 커스텀하시면 세상에 단 하나뿐인 나만의 초고속 비즈니스 플랫폼이 완성됩니다.

확장 옵션 기능 개발 예고와 사이드 레이아웃 고도화 로드맵

기본적인 뼈대 구축이 끝났다고 해서 우리의 블로그 튜닝 공부가 완전히 멈추는 것은 아닙니다. 실제 블로그를 본격적으로 운영하다 보면 본문 글이 아래로 길게 내려갔을 때 사용자가 마우스 휠을 한참 올리지 않고도 단 한 번의 클릭으로 맨 위로 부드럽게 튕겨 올라가게 돕는 탑 버튼 기능이 아쉬워지기 마련입니다. 또한 모바일 환경에서 화면을 효율적으로 쓰기 위해 평소에는 숨어 있다가 아이콘을 누르면 스르륵 열리는 스마트 햄버거 버튼이나, 상단 내비게이션 메뉴 바를 고정하는 인터랙티브 디자인 요소들도 눈에 밟히게 되죠.

이러한 사용자 편의성 향상을 위한 스크립트 옵션 기능들은 이번 테마 만들기 기본 뼈대 시리즈의 범위를 넘어, 향후 별도의 특별 부록 시리즈로 독립시켜 직관적이고 쉬운 소스코드와 함께 아주 세부적으로 풀어드릴 예정입니다. 뿐만 아니라 현재의 단일 통 본문 구조에서 탈피하여 우측이나 좌측에 세련된 프로필 상자와 카테고리 목록, 인기 글 위젯을 배치할 수 있는 다단 레이아웃 확장 템플릿 사례도 함께 연동할 수 있도록 가이드를 준비하고 있습니다. 실제로 이러한 탑 버튼과 정교한 사이드 섹션 레이아웃이 조화롭게 배치되어 운영 중인 확장형 포트폴리오 사례는 아래 링크를 통해 미리 경험해 보실 수 있습니다.

잡다한 지식, 다단 레이아웃 및 확장 위젯 적용 사례 확인하기

위의 확장형 사이트처럼 동적인 기능들이 매끄럽게 맞물려 돌아가면서도 가독성을 해치지 않는 테마를 만드는 비결도 차근차근 나누어 드릴 테니 너무 조급해하지 마시고, 우선 현재까지 완성된 완벽한 SEO 뼈대를 내 것으로 만드는 데 집중해 주시기 바랍니다.

지난 1편부터 시작하여 오늘 5편에 이르기까지 구글 블로그 테마 만들기라는 다소 무겁고 긴 여정을 이탈하지 않고 끝까지 완주해 주신 여러분께 진심으로 격려와 감사의 박수를 보냅니다. 기술을 단순히 남이 만들어 준 플러그인에 의존해 소비하는 사람과, 비록 투박하더라도 소스코드 한 줄의 의미를 파악하며 밑바닥부터 내 손으로 테마를 빌드해 본 사람의 미래 자산 가치는 시간이 흐를수록 하늘과 땅 차이로 벌어지게 됩니다. 여러분이 흘린 타이핑의 땀방울은 향후 검색 엔진 알고리즘이 수백 번 변하더라도 무너지지 않는 강력한 기술적 뼈대가 되어 줄 것입니다. 이번 구글 블로그 테마 만들기 정규 시리즈는 여기서 멋지게 막을 내리지만, 앞으로 이어질 다양한 비즈니스 자동화 튜닝 및 UI 확장 팁 부록 편을 통해 더 유익하고 살아있는 지식 공유로 찾아뵐 것을 약속드립니다. 나만의 속도감 있는 디지털 자산을 구축해 내신 여러분의 값진 성공을 언제나 응원합니다.