<![CDATA[
이전글에 이어서 진행하며<br>
아래의 체크리스트사항에 대해 SEO 최적화를 Blogger에서 적용한 방법을 소개한다.
- 체크리스트 7. 내부 링크 삽입
- 체크리스트 10. 모바일 친화적 디자인
---
### 체크리스트 7. 내부 링크 삽입
- 관련된 블로그 글로 연결하여 블로그 체류 시간을 늘리고 **사이트 구조를 강화**
- Blogger의 경우는 라벨별로 분류가 되지만, 연관된 글을 링크 시킬수는 없다
- Html 코드를 통해 관련된 글을 이어서 볼수있도록 한다.
- **다만 글을 쓸때, HTML 작성으로 진행해야 함**
- 현재 쓰여진 글의 라벨에 대해 조회하여 노출시키는 코드
- 모바일에서 조회시 같은페이지 노출 방어 추가
<pre class="brush:xml"
class="brush:plain; gutter:true">
<!-- 목록을 표시할 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>
</pre>
위 코드는 공통이 아닌 글(본문)마다 필요하다.<br>
맨 밑에 위 코드를 추가하고, 라벨과 blogger 주소를 넣게되면 아래와 같이 나온다
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsTvlvO2IBsIdYaUh__M0-muZ6NAx5SKzo0H2OBZnOMmF6fFRwbhtIQzVBe9xZCzq26jgaaAhRuhvJwV4JPozdj_G_T3fDo1RuwoL4OPO1RKNdIP69xXzqidJ_NWgRSeYw34vqNEWej3074CTFyaigVECfIKmm2vK02o9xwATGlGrTEhT2pW888Th/s1600/%EA%B2%B0%EA%B3%BC%EB%AC%BC.PNG" style="display: block; padding: 1em 0; text-align: center; "><img alt="SEO최적화 내부 링크" border="0" data-original-height="222" data-original-width="821" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsTvlvO2IBsIdYaUh__M0-muZ6NAx5SKzo0H2OBZnOMmF6fFRwbhtIQzVBe9xZCzq26jgaaAhRuhvJwV4JPozdj_G_T3fDo1RuwoL4OPO1RKNdIP69xXzqidJ_NWgRSeYw34vqNEWej3074CTFyaigVECfIKmm2vK02o9xwATGlGrTEhT2pW888Th/s1600-rw/%EA%B2%B0%EA%B3%BC%EB%AC%BC.PNG"/></a></div>
---
### 체크리스트 10. 모바일 친화적 디자인
- 모바일 친화적 디자인을 써야하나는 이유
1. **Google의 모바일 우선 색인(Mobile-First Indexing)**
- Google은 모바일 버전을 기준으로 검색 색인을 생성.
- 반응형 디자인은 동일한 URL 사용으로 크롤링 효율적.
2. **더 나은 사용자 경험 (UX)**
- 빠르고 사용하기 편한 디자인은 이탈률 감소와 페이지 체류 시간 증가에 기여.
3. **로딩 속도 개선**
- 모바일 친화적 웹사이트는 속도 최적화에 유리.
- 빠른 로딩 속도는 Google의 검색 순위에 긍정적.
4. **소셜 미디어 공유 증가**
- 모바일에서 보기 좋은 콘텐츠는 공유 가능성을 높임.
5. **검색 결과 표시 개선**
- 모바일 친화적인 웹사이트는 검색 결과에 유리한 평가.
---
- 모바일 친화적 디자인 설정 방법
1. **모바일 친화적인 테마 선택**
- Blogger 관리자 화면 → **"테마"**로 이동.
- 반응형(Responsive) 테마 선택:
예) **Contempo**, **Soho**, **Emporio**<br>
> 반응형 테마는 화면 크기에 따라 자동으로 레이아웃이 조정됩니다.
- 위 세개 중 하나 선택하면 반응형으로 적용됨
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEA0Z0Jt902D6r2SLL0wRxaS-P6KlaTZlOxx84kUjrCkNHp0UU7ONdb4SNOs7yVnFk4HrVXFAfr1L5XKxaruhUctFILE52cmg-xpy1unIzCD03ZHLfg718mUgH3IhhjUo6pfYM9y3O-NC8zN96wGKFpHlnvuWiyMiKPrqGVvumwxLqTtSpj078lQs/s1600/%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9.PNG" style="display: block; padding: 1em 0; text-align: center; "><img alt="모바일 친화적 디자인 설정 blogger" border="0" data-original-height="816" data-original-width="1119" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEA0Z0Jt902D6r2SLL0wRxaS-P6KlaTZlOxx84kUjrCkNHp0UU7ONdb4SNOs7yVnFk4HrVXFAfr1L5XKxaruhUctFILE52cmg-xpy1unIzCD03ZHLfg718mUgH3IhhjUo6pfYM9y3O-NC8zN96wGKFpHlnvuWiyMiKPrqGVvumwxLqTtSpj078lQs/s1600-rw/%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9.PNG"/></a></div>
- 미리보기에서 아래 클릭시 모바일 화면 확인 가능
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhruIagmV8PYSdlDvHp0Dcli4Yo4lnbzr9lPOC9HuivJK7jXSkupDKWtPMyW78Bz_tfOdg4EOYGtApsFeiOZV7WyX7uxOgvQvhn-qZxCUErQZYdoVatbkLzzxUpmg8KieEE-iZd1SWFPuUVNgg-PJzEfoZAhezBsqk-TV2zUBVuWgpE8ZpOQk0rr9Uc/s1600/%EB%AA%A8%EB%B0%94%EC%9D%BC%20%ED%99%95%EC%9D%B8.PNG" style="display: block; padding: 1em 0; text-align: center; "><img alt="모바일 친화적 디자인 설정 blogger" border="0" data-original-height="988" data-original-width="609" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhruIagmV8PYSdlDvHp0Dcli4Yo4lnbzr9lPOC9HuivJK7jXSkupDKWtPMyW78Bz_tfOdg4EOYGtApsFeiOZV7WyX7uxOgvQvhn-qZxCUErQZYdoVatbkLzzxUpmg8KieEE-iZd1SWFPuUVNgg-PJzEfoZAhezBsqk-TV2zUBVuWgpE8ZpOQk0rr9Uc/s1600-rw/%EB%AA%A8%EB%B0%94%EC%9D%BC%20%ED%99%95%EC%9D%B8.PNG"/></a></div>
---
2. **모바일 친화성 테스트**
- Google의 [모바일 친화성 테스트](https://search.google.com/test/mobile-friendly/) 사용.
- blogger 페이지 띄우고 > Chrome에서 F12 > LightHouse > 모바일 > 페이지 로드 분석 진행
- Lighthouse통한 SEO 체크
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7N38Kk7oTjGXBCDsFV-2-WYyoPIfAUNvgtdxy_4rZt6W9bZXLmq50eg4YSnZTU1it4i0YY6SN8RohtIGu2XQXXVqHNZC027sXoxC4iueUI5EnOHu2GzHgo0kF_c1eyyw6Mh0L0t91Ki4u_wV2J8JTUIxXQobsBhi6c74_G1kElM_7gTodgbrE-2if/s1600/%EB%B3%B4%EA%B3%A0%EC%84%9C.PNG" style="display: block; padding: 1em 0; text-align: center; "><img alt="모바일 친화성 테스트" border="0" data-original-height="350" data-original-width="892" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7N38Kk7oTjGXBCDsFV-2-WYyoPIfAUNvgtdxy_4rZt6W9bZXLmq50eg4YSnZTU1it4i0YY6SN8RohtIGu2XQXXVqHNZC027sXoxC4iueUI5EnOHu2GzHgo0kF_c1eyyw6Mh0L0t91Ki4u_wV2J8JTUIxXQobsBhi6c74_G1kElM_7gTodgbrE-2if/s1600-rw/%EB%B3%B4%EA%B3%A0%EC%84%9C.PNG"/></a></div>
- 내 Blogger 페이지의 SEO 점수
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg743w84MNLUGbUHTBYm6Q8BOt0XWYHfAo8KHa7xpK2ZopMAMT0Gu4FtQpfH6_2LUdglw4rScsSkaO2qkHnrdfh9j1yCsEiCNNvCzG8bIzV9l5r8Tjw2sXww0kW8HG_Wv4-qxJ-7J48CFUfQ3MnC5A39eG0kNHgG-ckVPEyc0sbrPWYrLJETNeUR7AO/s1600/SEO%20%EC%B2%B4%ED%81%AC.PNG" style="display: block; padding: 1em 0; text-align: center; "><img alt="모바일 친화성 테스트" border="0" data-original-height="691" data-original-width="905" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg743w84MNLUGbUHTBYm6Q8BOt0XWYHfAo8KHa7xpK2ZopMAMT0Gu4FtQpfH6_2LUdglw4rScsSkaO2qkHnrdfh9j1yCsEiCNNvCzG8bIzV9l5r8Tjw2sXww0kW8HG_Wv4-qxJ-7J48CFUfQ3MnC5A39eG0kNHgG-ckVPEyc0sbrPWYrLJETNeUR7AO/s1600-rw/SEO%20%EC%B2%B4%ED%81%AC.PNG"/></a></div>
---
관련 내용을 참고하여<br>
Blogger유저의 SEO개선에 도움이 되었으면 합니다.
<!-- 목록을 표시할 HTML 컨테이너 -->
<div>
<h3>Related Links</h3>
<ul id="label-post-list">
<!-- 여기에 '주식' 라벨의 게시물 목록이 추가됩니다 -->
</ul>
</div>
---
]]>
댓글
댓글 쓰기