[3] Blooger SEO - SEO 최적화에 맞게 글을 쓰는법(내부 링크 삽입, 모바일 친화적 디자인)

이전글에 이어서 진행하며
아래의 체크리스트사항에 대해 SEO 최적화를 Blogger에서 적용한 방법을 소개한다.

- 체크리스트 7. 내부 링크 삽입 - 체크리스트 10. 모바일 친화적 디자인

---

체크리스트 7. 내부 링크 삽입

- 관련된 블로그 글로 연결하여 블로그 체류 시간을 늘리고 사이트 구조를 강화 - Blogger의 경우는 라벨별로 분류가 되지만, 연관된 글을 링크 시킬수는 없다 - Html 코드를 통해 관련된 글을 이어서 볼수있도록 한다. - 다만 글을 쓸때, HTML 작성으로 진행해야 함 - 현재 쓰여진 글의 라벨에 대해 조회하여 노출시키는 코드 - 모바일에서 조회시 같은페이지 노출 방어 추가

 <!-- 목록을 표시할 HTML 컨테이너 --> <div> <h3>Related Links</h3> <ul id="label-post-list"> <!-- 여기에 '주식' 라벨의 게시물 목록이 추가됩니다 --> </ul> </div>

<script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { var blogUrl = "$내블로그주소"; // 블로그 주소 var currentUrl = window.location.href; // 현재 페이지의 URL var usedLinks = new Set(); // 중복 링크 방지용 Set var cleanCurrentUrl = currentUrl.split("?")[0];
// 각 라벨별 최대 표시 갯수와 라벨 이름을 설정 var labels = { "label-post-list": { name: "라벨", maxResults: 10 }, // 라벨에서 10개 표시 };
// 각 라벨별로 게시물 가져오기 Object.keys(labels).forEach(function (listId) { var labelData = labels[listId]; var labelName = labelData.name; var maxResults = labelData.maxResults; var feedUrl = `${blogUrl}/feeds/posts/summary/-/${labelName}?alt=json&max-results=${maxResults}`;
// JSON 데이터 가져오기 fetch(feedUrl) .then(response => { if (!response.ok) throw new Error("네트워크 응답에 문제가 있습니다."); return response.json(); }) .then(data => { var posts = data.feed.entry; var listContainer = document.getElementById(listId);
// 피드 내 게시물 목록 생성 if (posts && listContainer) { posts.forEach(post => { var title = post.title.$t; var link = post.link.find(link => link.rel === "alternate").href;
// URL 파라미터 제거 var cleanLink = link.split("?")[0];
// 현재 페이지와 다른 글이며 중복이 아닐 때만 추가 if (cleanLink !== cleanCurrentUrl && !usedLinks.has(cleanLink)) { var listItem = document.createElement("li"); var anchor = document.createElement("a"); anchor.href = cleanLink; anchor.textContent = title; listItem.appendChild(anchor); listContainer.appendChild(listItem);
usedLinks.add(cleanLink); // 중복 방지용 Set에 추가 } }); } else { listContainer.innerHTML = "<li>이 라벨의 게시물이 없습니다.</li>"; } }) .catch(error => { console.error("게시물 가져오기 오류:", error); document.getElementById(listId).innerHTML = "<li>게시물을 불러올 수 없습니다.</li>"; }); }); }); </script>

위 코드는 공통이 아닌 글(본문)마다 필요하다.
맨 밑에 위 코드를 추가하고, 라벨과 blogger 주소를 넣게되면 아래와 같이 나온다

---

체크리스트 10. 모바일 친화적 디자인

- 모바일 친화적 디자인을 써야하나는 이유 1. Google의 모바일 우선 색인(Mobile-First Indexing) - Google은 모바일 버전을 기준으로 검색 색인을 생성. - 반응형 디자인은 동일한 URL 사용으로 크롤링 효율적.

2. 더 나은 사용자 경험 (UX) - 빠르고 사용하기 편한 디자인은 이탈률 감소와 페이지 체류 시간 증가에 기여.

3. 로딩 속도 개선 - 모바일 친화적 웹사이트는 속도 최적화에 유리. - 빠른 로딩 속도는 Google의 검색 순위에 긍정적.

4. 소셜 미디어 공유 증가 - 모바일에서 보기 좋은 콘텐츠는 공유 가능성을 높임.

5. 검색 결과 표시 개선 - 모바일 친화적인 웹사이트는 검색 결과에 유리한 평가.

---

- 모바일 친화적 디자인 설정 방법

1. 모바일 친화적인 테마 선택 - Blogger 관리자 화면 → "테마"로 이동. - 반응형(Responsive) 테마 선택: 예) Contempo, Soho, Emporio
> 반응형 테마는 화면 크기에 따라 자동으로 레이아웃이 조정됩니다.

- 위 세개 중 하나 선택하면 반응형으로 적용됨

- 미리보기에서 아래 클릭시 모바일 화면 확인 가능

---

2. 모바일 친화성 테스트 - Google의 모바일 친화성 테스트 사용. - blogger 페이지 띄우고 > Chrome에서 F12 > LightHouse > 모바일 > 페이지 로드 분석 진행

- Lighthouse통한 SEO 체크

- 내 Blogger 페이지의 SEO 점수

---

관련 내용을 참고하여
Blogger유저의 SEO개선에 도움이 되었으면 합니다.

Related Links

---