path
Jin's Lab
코드로 실험하고 기록하는 개발 일지 · J.Lab

Jin's Lab

코드로 실험하고 기록하는 개발 일지. 커리어와 삶의 방향을 탐색하며 기록하는 공간입니다

blog-migration

Blogger SEO 라벨로 티스토리처럼 태그 숨겨 쓰는 방법

J.Lab ·
목차

    요즘 티스토리에서 구글 블로거(Blogger)로 마이그레이션을 진행하면서 가장 골치 아팠던 부분이 있습니다. 바로 카테고리와 태그의 부재였습니다. 티스토리는 카테고리와 태그가 명확히 분리되어 있어 글 관리가 편한데, 블로거는 오직 '라벨(Label)' 하나로 모든 것을 해결해야 하더군요.

    라벨을 마구잡이로 달다 보니 블로그 UI가 지저분해지고 가독성이 뚝 떨어졌습니다. 그렇다고 SEO 키워드를 포기할 수는 없었기에 깊은 고민에 빠졌습니다. 깔끔한 디자인을 유지하면서 구글 검색 노출도 챙길 수 있는 묘수가 필요했습니다.

    Blogger 라벨의 한계 극복을 위한 새로운 설계

    치열한 고민 끝에 하나의 규칙을 세우기로 했습니다. 블로그 글의 첫 번째 라벨은 메인 카테고리로 삼고, 나머지 추가하는 라벨들은 전부 SEO 키워드 라벨로 활용하는 방식이었습니다. 이렇게 하면 하나의 라벨 시스템 안에서도 논리적인 구분이 가능해집니다.

    하지만 여전히 해결해야 할 숙제가 있었습니다. 본문 하단이나 사이드바에 수십 개의 영어 태그가 그대로 노출되는 것은 미관상 보기 좋지 않았습니다. 방문자에게는 깔끔하게 정리된 카테고리 하나만 보여주고 싶었습니다.

    첫 번째 카테고리 라벨과 여러 개의 서브 라벨이 체계적으로 분류되어 있는 입체적인 폴더 디자인 일러스트

    display:none으로 숨겨도 살아나는 라벨 아카이브

    이 문제를 해결하기 위해 CSS의 display:none 속성을 활용하기로 했습니다. 첫 번째 카테고리 라벨만 화면에 남겨두고, 나머지 검색용 라벨들은 스타일시트를 통해 시각적으로 숨겨버리는 꼼수였습니다. 과연 이렇게 숨기면 구글이 인식을 못 할까 걱정이 앞섰습니다.

    하지만 놀라운 사실을 발견했습니다. 화면에서 display:none 처리를 하더라도, 블로거가 자동으로 생성해 주는 해당 키워드의 아카이브 페이지는 그대로 활성화되어 있었습니다. 즉, 사용자 눈에는 보이지 않지만 구글 검색 로봇은 아카이브 경로를 타고 들어와 글을 정상적으로 크롤링한다는 뜻입니다.

    결과적으로 사용자는 깔끔하게 정돈된 페이지만 보게 되고, 검색 엔진은 숨겨진 키워드 아카이브 페이지를 통해 구글 SEO 점수를 그대로 챙겨갈 수 있었습니다. 우려했던 패널티 없이 깔끔함과 노출 두 마리 토끼를 잡은 셈입니다.

    웹페이지의 숨겨진 소스코드와 라벨 주소를 구글 검색 로봇이 인덱싱하는 모습을 형상화한 일러스트

    Gemini와 구글 시트로 구축한 자동화 파이프라인

    방향성이 정해졌으니 마이그레이션 작업의 속도를 높여야 했습니다. 기존의 방대한 IT Story 데이터를 수동으로 다 옮기기엔 무리가 있었습니다. 그래서 이번 마이그레이션 과정에서는 인공지능과 자동화 도구를 적극적으로 활용했습니다.

    구글 시트(Sheets)에 원본 데이터를 정리하고, Gemini API를 연결하여 글 분석을 맡겼습니다. Gemini에게 각 글의 본문을 분석해 가장 적절한 영문 seoLabels를 8개에서 15개 사이로 생성하도록 프롬프트를 짰습니다. 영어 키워드가 글로벌 노출과 검색에 더 유리하기 때문입니다.

    이렇게 추출된 대량의 영문 seoLabels를 구글 시트 안에서 첫 번째 카테고리 라벨과 매끄럽게 병합했습니다. 최종 병합된 라벨 데이터를 API를 통해 블로거에 발행하는 완벽한 자동화 프로세스를 완성했습니다.

    구글 시트에서 인공지능을 통해 영문 키워드를 자동 추출하여 서버로 전송하는 자동화 파이프라인 일러스트

    글을 마치며: 숨김의 미학이 가져다준 검색 최적화

    이번 삽질을 통해 구글 블로거에서도 충분히 티스토리 못지않은 세련된 카테고리 및 태그 시스템을 구축할 수 있다는 확신을 얻었습니다. 화면에는 보이지 않지만 구글 봇에게는 확실하게 길을 열어주는 이 방식은 매우 효과적이었습니다.

    처음에는 블로거의 빈약한 기본 기능 때문에 답답함이 컸지만, 약간의 발상 전환과 CSS 활용, 그리고 AI 자동화가 결합하니 기대 이상의 결과물이 나왔습니다. 지저분한 태그 더미 때문에 고민이었다면 오늘 소개한 이 방법을 꼭 적용해 보시기 바랍니다.

    blog-migration blogger-labels blogger-seo display-none-seo seo-optimization
    ← 이전 글
    최근 게시물
    다음 글 →
    이전 게시물
    ≡ 글 목록으로
    소개
    path
    J.Lab

    커리어와 삶의 방향을 탐색하며
    기록하는 공간입니다

    카테고리
    403 Forbidden Error 1 AdSense 1 AdSense Bot Detection 1 AI Automation 1 AI Image Generation 1 ai-automation 2 AI-Prompting 1 AIBlogAutomation 1 AICodeLog 1 AIContentGeneration 1 AIImageGeneration 1 AIWritingErrors 1 API Automation 2 API Retry Design 1 api-automation 1 API-Deprecation 1 api-error 1 api-fallback 1 api-retry-strategy 1 api-troubleshooting 1 APIDebugging 1 APIError 1 APIErrorHandling 1 APIIntegration 1 APITokenRenewal 1 AppsScript 1 appsScriptAutomation 1 AutomatedBlogging 1 automation 1 Automation 2 AutomationTroubleshooting 1 Backoff Algorithm 1 Base64Encoding 1 BatchProcessing 1 blog-automation 1 blog-customization 1 blog-migration 3 Blog-Sorting 1 blog-strategy 1 blog-theme-customization 1 blog-workflow 1 blogautomation 1 BlogAutomation 2 Blogger 4 Blogger API 2 Blogger Automation 1 Blogger SEO 1 blogger-api 3 blogger-automation 1 blogger-error-400 1 blogger-labels 1 blogger-seo 1 blogger-tips 1 Blogger-Tips 1 BloggerAPI 3 BloggerBypath 1 BloggerCustomization 2 BloggerFavicon 1 BloggerTemplate 1 BloggerTemplateEditing 1 BloggerTheme 1 BloggerThemeCustomization 1 BloggerXMLStructure 1 Blogging-Automation 1 BloggingTools 1 BlogQuality 1 BlogSpot 1 BWidgetBIncludable 1 CardClickHandler 1 CDATA 1 clamping-text 1 Code Integration 1 codelog 1 CodeLog 1 codeRefactoring 1 contentsequencing 1 cost-reduction 1 CSSOverlay 1 data-parsing 1 DatabaseDesign 1 DataRecovery 1 DateInjection 1 Debugging 2 dev-journey 1 DeveloperJourney 2 DevJourney 1 display-none-seo 1 dom-manipulation 1 dynamic-menu 1 Error-Handling 1 ErrorHandling 1 Execution Timeout 1 ExecutionLimit 1 exponential-backoff 1 FactChecking 1 FaviconEmbedding 1 Feed-API 1 filesystem 1 Flat Illustration 1 FluxModel 1 FreeAIImage 1 FrontEndDev 1 FrontendTips 1 GAS Blogger API 1 gas-automation 1 gas-optimization 1 gas-trigger 1 GASTimeout 1 gasTriggerManagement 1 GCP Project Linkage 1 Gemini 1 Gemini API 1 gemini-api 1 GeminiAPI 1 GeminiPrompt 1 GeminiPromptEngineering 1 GmailRestrictions 1 Google Apps Script 7 Google Discover 1 google-apps-script 3 Google-Apps-Script 1 google-blogger 1 googleAppsScript 1 GoogleAppsScript 6 googlesapps-script 1 hero-image 1 HTMLWidgetBlogger 1 http-429 1 HuggingFace 1 HuggingFaceAPI 1 ico-generator 1 Image Optimization 1 image-automation 1 image-optimization 1 In-App Browser 1 invalid-argument 1 javascript 3 JavaScript 2 javascript-automation 1 javascript-toc 1 jlab-codelog 1 JLabDevLog 1 json-schema 1 label-length-limit 1 linux 1 meta-description 1 Negative Prompt 1 notion-api 1 notion-database 1 notion-gas-integration 1 NotionAPI 1 NotionAutomation 1 notionintegration 1 NotionIntegration 1 OAuth Scope 1 pagination 1 payload-validation 1 permalink-management 1 PersonaDesign 1 pil-image-processing 1 Pinterest 1 Pollinations 1 Pollinations Flux 1 pollinations-api 1 PollinationsAI 1 PositionAbsolute 1 Prompt Design 1 Prompt Engineering 1 prompt-engineering 1 Prompt-Engineering 1 PromptEngineering 1 publishorder 1 python-favicon 1 queue-stuck 1 RandomDelay 1 rate-limiting 1 Refactoring 1 rfc3339 2 Robots Meta Tag 1 RSS Feed 1 scriptNotFound 1 Search Engine Optimization 2 Search-Engine-Optimization 1 SEO Tips 1 seo-optimization 4 SEO-Optimization 1 seriesmanagement 1 SidebarLinks 1 SNSMarketing 1 SVGIcon 1 table-of-contents 1 TechJournal 1 Template 1 ThreadsAPI 1 tistory-migration 1 transparent-favicon 1 triggerCleanup 1 Troubleshooting 1 unzip 1 URL Slug 1 vanilla-js 1 Web Development 1 Web Publishing 2 Web Security 1 web-development 1 Web-Development 1 web-development-tips 1 web-performance 1 web-scraping 1 WebAccessibility 1 WebDevelopment 3 WebDevelopmentTips 1 WebDevJourney 1 windows 1 WorkflowAutomation 1 XMLParser 1 XMLSpecialCharacters 1 XMLTheme 1 zip 1
    인기 글
    GAS에서 Blogger API 403 오류 완전 정복 — appsscript.json 스코프와 GCP 프로젝트 연결
    GAS에서 Blogger API 403 오류 완전 정복 — appsscript.json 스코프와 GCP 프로젝트 연결
    Google Apps Script 실행 시간 6분 제한 — Gmail 계정 함정과 랜덤 딜레이 설계
    Google Apps Script 실행 시간 6분 제한 — Gmail 계정 함정과 랜덤 딜레이 설계
    Blogger 테마 XML 직접 뜯어봤더니 알게 된 것들
    Blogger 테마 XML 직접 뜯어봤더니 알게 된 것들
    다른 블로그
    IssueLog
    IssueLog
    issuelog.jinbytes.com
    KidStory
    KidStory
    kidstory.jinbytes.com
    IT Story
    IT Story
    jinbytes.com
    © Jin's Lab · J.Lab · All Rights Reserved
    jinbytes.com · Powered by Blogger