워드프레스 기본 테마 최적화, 이것만 수정해도 SEO 점수가 올라가요

워드프레스 블로그를 만들 때 기본 테마를 그대로 써도 큰 문제는 없어요. 하지만 기왕이면 검색엔진이 더 좋아하는 사이트로 만들면 좋잖아요? 아주 조금만 신경 써서 검색엔진 최적화(SEO)를 해두면 사용자 경험도 좋아지고 블로그 지수에도 도움이 돼요. 오늘은 어렵지 않게 글 페이지의 터치 영역을 개선하고, 메인 페이지의 링크 문구를 수정하는 방법을 같이 알아볼게요.

워드프레스 블로그, 기본기 다지기

지난번에 테마를 고르고 폰트 크기를 조절하는 기본적인 설정을 했었는데요. 이번에는 폰트만 수정한 상태에서 글을 쓰고 검색 최적화 테스트를 한번 해봤어요. 주로 메인 페이지, 글 페이지, 카테고리 페이지 이렇게 세 군데를 점검하면 되는데, 아직 카테고리 메뉴 설정 전이라 메인과 글 페이지만 먼저 살펴볼게요.

기본 글 페이지 확인하기

워드프레스가 기본적으로 보여주는 글 페이지 모습이에요. 사이드바와 본문, 그리고 위아래 영역이 깔끔하게 나뉘어 있어서 사실 이대로 써도 디자인은 충분히 괜찮아 보여요.

글 페이지 접근성 문제 해결하기

그런데 성능 테스트를 돌려보면 ‘접근성’ 부분에서 지적 사항이 나와요. 바로 모바일이나 태블릿에서 터치할 때 버튼이나 링크 영역이 너무 작다는 이야기인데요. 이건 방문자를 위해서라도 꼭 수정해 주는 게 좋아요.

주로 댓글을 단 작성자 이름이나 날짜의 글자 크기가 작아서 손가락으로 누르기 힘들 때 이런 경고가 떠요. 해결 방법은 간단해요. CSS를 조금 수정해서 글자 크기를 키워주면 됩니다. 폰트 설정이나 CSS 적용 방법이 낯설다면 이전에 작성한 글을 참고해 보시면 도움이 될 거예요.

아래 코드를 참고해서 스타일을 적용해 보세요.

/* 댓글 작성자 폰트 크기 조절 */
.comment-author cite {
font-style: normal;
font-weight: 700;
font-size: 20px;
}

/* 댓글 작성 날짜 폰트 크기 조절 */
.entry-meta.comment-metadata {
margin-top: 0;
font-size: 17px;
}

메인 페이지와 링크 텍스트 최적화

워드프레스 메인 화면은 보통 블로그 형식을 많이 쓰기 때문에 ‘동적 페이지’로 설정해 두는 편이에요. 가볍고 빠른 블로그를 원하신다면 기본 설정을 유지하는 게 좋고요. 그런데 메인 페이지를 테스트하다 보면 “링크 텍스트가 너무 모호합니다”라는 지적을 받을 때가 있어요. 검색엔진은 링크가 어디로 연결되는지 명확한 설명을 좋아하거든요.

‘Read more’ 문구 변경하기

보통 테마에서는 글 목록 하단에 “Read more(더 보기)”라는 버튼이 달리는데, 이게 검색엔진 입장에서는 불친절하게 느껴질 수 있어요. 이걸 “Read Full Article(전체 글 읽기)”처럼 좀 더 명확한 표현으로 바꿔주면 점수가 올라가요.

원래는 테마 파일의 코드를 직접 수정해야 하지만, 초보자분들은 FTP 접속이나 코드 수정이 부담스러울 수 있잖아요? 그럴 땐 자바스크립트를 이용해서 화면에 보이는 글자만 살짝 바꿔주는 꼼수가 있어요.

<script>
document.addEventListener("DOMContentLoaded", function() {
// 'read-more' 클래스를 가진 요소를 찾습니다
const readMoreLink = document.querySelector(".read-more");

// 해당 링크가 존재하면 텍스트를 변경합니다
if (readMoreLink) {
readMoreLink.textContent = "Read Full Article";
}
});
</script>