티스토리 정보 저장소

시니어도 쉽게 쓰는 고급형 SEO 포스팅 방법 서론 – “검색 상위와 승인, 두 마리 토끼 잡기”복잡한 도구를 몰라도 됩니다. 키워드 → 제목/소제목 → 본문 배치 → ALT/링크 → 체크리스트만 지키면 검색 노출과 애드센스 정책 모두 안전하게 가져갈 수 있습니다.📑 목차키워드 조사 기본기 (무료·유료 툴 비교)제목·소제목에 키워드 넣는 법본문 내 자연스러운 키워드 배치이미지 ALT 태그 활용법내부링크·외부링크 최적화마무리 – 1시간 완성 SEO 체크리스트1) 키워드 조사 기본기 (무료·유료 툴 비교)무료: 자동완성/연관 검색어로 의도 파악(정보형·비교형·구매형).유료: 난이도(KD), 클릭 잠재력, 시즌성 확인—중간 난이도 + 명확한 의도를 우선.선정 룰: 한 글에 주제 키워드 1개 + 변형 2~3개..

시리즈 페이지 꾸리기｜연재 묶음과 회독 동선 설계티스토리에서 연재 글을 여러 편 발행하다 보면, 독자가 어디서부터 읽어야 할지 헤매는 경우가 많습니다. 이를 해결해 주는 것이 바로 시리즈 페이지, 즉 연재용 모음 페이지입니다. 이 글에서는 시리즈 페이지가 왜 필요한지부터, 글을 묶는 기준, 그리고 처음 방문한 사람이 자연스럽게 회독할 수 있는 동선 설계 방법까지 단계별로 정리합니다. 끝까지 읽으시면 지금 운영 중인 연재 글을 깔끔하게 재정리할 수 있는 구조 설계 초안을 가져가실 수 있습니다.📑 목차시리즈 페이지가 필요한 이유와 기본 구조연재 묶음 설계: 제목 규칙·메타 정보 정리회독 동선 설계: 처음·다음·전체 보기 안내복붙용 시리즈 페이지 템플릿실천 요약시리즈 페이지가 필요한 이유와 기본 구조시리즈 ..

이미지 ALT·파일명·크기 최적화｜코어 웹 바이탈 안정화 실전핵심: 이미지는 검색·접근성·속도를 동시에 좌우합니다. ALT 한 문장 규칙, 파일명 표준, 픽셀/용량 최적화, 그리고 width/height·srcset·loading 같은 속성 세트만 지켜도 LCP·CLS·INP가 안정화됩니다. 아래 체크리스트와 예시를 그대로 적용해 보세요.📑 목차왜 중요한가ALT 작성 규칙: 정보성 한 문장파일명 규칙: kebab-case·버전·출처크기·용량·포맷(WebP/AVIF)HTML 속성 세트(width/height·srcset·lazy)실전 점검표FAQ실행 요약1) 왜 중요한가ALT는 스크린 리더 사용자에게 내용을 전달하고, 검색 크롤러에 이미지-문맥 연결 신호를 제공합니다. 파일명은 식별성과 관리 편의성을 높..

모바일 우선 티스토리 점검표｜폰트·여백·이미지 비율·탭 네비게이션핵심: 방문자의 70% 이상이 모바일입니다. 글은 작은 화면 기준으로 설계해야 하며, 폰트·여백·이미지·탭 네비게이션이 체류 시간과 가독성을 좌우합니다.📑 목차폰트·줄간격·문단 폭여백·행간·리스트 가독성이미지 비율/용량/표기 규칙탭 네비게이션·고정 바모바일 우선 점검표(표)오늘부터 실행 요약1. 폰트·줄간격·문단 폭본문 폰트 크기: 16–18px(선호 17px), 제목은 단계별 1.25–1.35배 비율.줄간격(line-height): 1.7–1.85(가독–스크롤 균형값).문단 폭: 모바일 기준 18–22자/줄(영문 45–75cpl) 유지.문단 간격: 본문–본문 12–16px, 본문–소제목 18–24px.리스트: 항목 길이는 1–2문장, 아..

본문 구조 템플릿 배포｜서론→문제→해결→체크리스트→실천 요약요약: 독자는 “내 문제를 해결하는 경로”가 보일 때 끝까지 읽습니다. 이 글은 서론→문제→해결→체크리스트→실천 요약 5단 흐름을 템플릿으로 배포하고, 단계별 문장 패턴·예시·점검표·앵커/접근성 스니펫을 제공합니다. 📑 목차왜 5단 구조인가5단 템플릿 문장 패턴과 예시체크리스트·앵커·접근성 스니펫복붙용 코드·템플릿점검표｜합격 기준과 흔한 실수실천 요약왜 5단 구조인가: 인지 부담·의도 일치·완독률모바일 환경에서 글은 빠르게 스캔됩니다. 5단 구조는 독자가 “지금 어디이며, 다음에 무엇을 얻게 되는가”를 예측하게 해 인지 부담을 줄이고, 검색 의도와 글의 약속(서론/문제)을 일치시켜 이탈을 낮춥니다.서론: 대상·범위·결과 3~4문장으로 약속(얻는..

에 alt를 아래 문장으로 추가하세요. ALT: 검색 친화 제목·요약문 작성법 — 의도 기반 구조 다이어그램 -->본문 바로가기검색 친화 제목·요약문 작성법｜중복 없이 의도만 드러내는 구조요약: 제목과 요약문은 단순한 문장이 아니라 검색 의도(Intent)를 해석해 독자에게 “이 글이 내 문제를 해결한다”는 확신을 주는 설계 요소입니다. 이 글은 의도 매핑·중복 키워드 방지·리드/메타 설명 템플릿을 제공하여, 발행 직전 5분 점검만으로도 품질을 일정 수준 이상으로 고정하도록 돕습니다.📑 목차본문1｜검색 의도 매핑과 제목 구조본문2｜요약문(리드/메타 설명) 템플릿본문3｜중복 키워드 방지와 주제 클러스터코드 스니펫(복붙용)점검표｜합격 기준과 흔한 실수실천 요약본문1｜검색 의도 매핑과 제목 구조..

본문 바로가기카테고리 랜딩(허브) 페이지 만드는 법｜요약·바로가기·시리즈 연결요약: 허브 페이지는 “카테고리의 목차이자 길잡이”입니다. 요약 인트로로 범위를 규정하고, 바로가기 카드로 핵심 경로를 제시하며, 시리즈 연결로 회독 동선을 만듭니다. 이 글은 카드형 레이아웃, 대표 글 선정 규칙, 내부 링크 구조를 실무 기준으로 정리했습니다.📑 목차본문1｜허브의 목표와 구성: 요약·바로가기·시리즈본문2｜카드형 레이아웃: 썸네일·제목·보조 정보 규칙본문3｜대표 글 선정·내부 링크 구조(허브→글/시리즈)코드 스니펫(복붙용)점검표｜합격 기준과 흔한 실수실천 요약허브의 목표와 구성: 요약·바로가기·시리즈허브의 1차 목표는 “독자가 이 카테고리에서 얻을 수 있는 결과”를 한 문단으로 설명하고, 2차 목표는 “다음 행..

404·리디렉션 안내 페이지 만들기｜이탈을 줄이는 복구 동선요약: 404와 리디렉션은 ‘에러 처리’가 아니라 복구 경험입니다. 404 안내 모듈로 상황을 명확히 설명하고, 301/302 기준으로 검색 신호를 안정화하며, 링크 허브로 바로 갈 목적지를 제시하면 이탈률과 불만을 동시에 낮출 수 있습니다. 📑 목차404 안내 모듈: 메시지·검색·빠른 이동301/302/410 기준: 언제 어떤 응답을 쓸까링크 허브 설계: 이탈을 줄이는 복구 동선코드 스니펫(복붙용)점검표｜합격 기준과 흔한 실수실천 요약404 안내 모듈: 메시지·검색·빠른 이동404 페이지는 단순한 “페이지가 없습니다”가 아니라, 왜와 어떻게 복구할 지를 즉시 알려주는 안내 화면이어야 합니다. 핵심은 3가지입니다. (1) 명확한 메시지, (2)..

본문 바로가기접근성 기본 세팅 스타터팩｜대체텍스트·키보드 포커스·ARIA 힌트 요약: 접근성은 선택이 아니라 기본 세팅입니다. 본문 이미지는 ALT 템플릿으로, 링크·폼·토글 등 상호작용 요소는 키보드 포커스 스타일로, 보조 안내는 ARIA-label 패턴으로 표준화합니다. 이 글은 즉시 복붙 가능한 코드와 점검표를 함께 제공합니다.📑 목차본문1｜ALT(대체텍스트) 템플릿본문2｜키보드 포커스 스타일본문3｜ARIA-label/role 힌트 패턴실무 스니펫 모음(복붙용)점검표｜합격 기준과 흔한 실수실천 요약ALT(대체텍스트) 템플릿ALT는 이미지가 전달하는 의미를 텍스트로 요약해 화면낭독기 사용자에게 정보를 제공합니다. 또한 이미지 검색·콘텐츠 이해의 단서로 활용됩니다. 핵심은 “무엇 + 맥락 + 핵심 수..

본문 바로가기링크 스타일 표준화｜색 대비· 밑줄· 호버 인터랙션 실전요약: 링크는 블로그 탐색의 최소 단위입니다. 색 대비, 밑줄, 호버/포커스, 방문 상태, 외부 링크 구분까지 표준화하면 독자는 길을 잃지 않고, 검색·접근성 신호가 함께 좋아집니다. 이 글은 실무 규칙과 코드, 점검표까지 포함해 즉시 적용 가능한 형태로 구성했습니다.📑 목차본문1｜색 대비 수치와 기준본문2｜밑줄·호버·포커스 규칙본문3｜방문 링크 차별화 & 외부 링크 아이콘실무 패턴 세트(복붙용)점검표｜합격 기준과 흔한 실수실천 요약색 대비 수치와 기준링크는 문장 속에서 본문 텍스트와 공존합니다. 따라서 링크 색은 배경과의 대비뿐 아니라 주변 텍스트와의 구분까지 고려해야 합니다. 가장 안전한 기준은 WCAG AA입니다. 일반 텍스트 크..