결론부터 알려 드리면 구글 블로그에서는 아무런 중앙 정렬 태그 없이도 중앙정렬이 됩니다. 그런데 중앙정렬이 안 된다면, 특히 애드센스 승인을 받고 광고를 만들고 넣었는데, 중앙정렬이 안 된다면 이 글을 참고하시기를 바랍니다.
사실 중앙정렬을 하는 방법을 포스팅하기 위해 다시 살펴봤을 때는 지금까지 사용했던 중앙정렬 태그 그대로 사용해도 전혀 문제가 없었습니다. 지금도 그때 왜 중앙정렬이 안 되었는지 이해를 못 하면서 해결하기 위해 인공지능의 머리를 빌려 해결했습니다만, 아무리 생각해도 이상합니다.
이것은 딱 한 가지 이유입니다. 광고 크기를 자동광고로 만들면 전혀 필요 없습니다. PC에서는 게시판 크기에 맞춰서 광고가 노출되기에 중앙정렬이든 아니던 생각하지 않고 그대로 코드를 넣으면 됩니다.
그런데 이 경우에도 항상 게시판 폭 100%에 해당하는 광고만 나오는 것이 아닌 고정형 크기의 광고도 노출되기에 애드센스 코드를 넣고 난 다음에는 확인해 봐야 합니다. 하지만 구글 블로그에서 이미지를 넣었을 때 중앙 정렬이 된다면 애드센스 광고도 중앙정렬이 되더군요. 따로 설정할 필요 없습니다.
하지만, 광고 크기를 고정형으로 만든다면 이야기는 달라집니다.
광고 크기를 336*280의 크기라면 별도의 중앙정렬 태그를 사용하지 않으면 화면 왼쪽에 위치하게 됩니다. 물론 휴대폰에서는 의미가 없지만, 패드나 PC에서는 광고가 한쪽으로 치우치게 되겠죠. 의도적이 아닌 중앙에 광고를 위치시키기 위해서는 적절한 태그가 필요합니다.
중앙정렬 태그는 간단합니다.
<div style="text-align: center;">
<script async="" crossorigin="anonymous"></script>
<!-- 애드센스 광고 코드 -->
<ins ></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
애드센스 광고를 <div></div>로 감싸고 중앙정렬 태그만 넣으면 됩니다.
<div style="text-align: center;">
이 한 줄이면 되죠.
그리고 더 간단한 태그도 있는데요,
<table align="center">
이 태그는 틀렸다고 하는 분도 있는데요, 구글 블로그는 HTML5를 표준하고 있습니다. 이 코드가 표준이 아니라고 하지만 전혀 문제없습니다. 광고만 중앙으로 나오면 그냥 사용해도 됩니다. 이 코드를 사용하면 노출이 안 되거나 클릭이 안 되어 광고 수입이 줄어드는 것도 아닙니다. 그냥 중앙 정렬이 되면 그대로 사용하면 됩니다.
챗GPT가 권장하지는 않지만 사용하면 중앙정렬을 할 수 있다고 알려줍니다.
이렇게 적용하고 다시 새 글 작성 보기를 눌렀을 때
이 알림이 나온다면 어딘가에서 코드 오류가 생긴 겁니다. 분명 게시글을 작성했을 때는 아무 이상이 없었는데 애드센스 코드를 넣고, 또는 다른 상황에서 이런 알림이 나왔다면 분명히 코드를 다시 확인해야 합니다.
이 알림을 해결하지 않고 곧바로 업데이트하면 애드센스 광고가 정상적으로 노출되지 않거나 HTML에서 문제가 생길 수 있습니다. 항상 새 글 작성 보기를 클릭해서 오류 메시지가 나오지 않는 것을 확인한 후에 업데이트합니다.
실제로 어떻게 하든 'HTML 콘텐츠가 잘못되었습니다.' 이 오류 알림을 없애고 난 다음에는 애드센스 광고도 빠르고 제대로 나오더군요. 또 모르죠, 그때 그 상황에서만 제대로 되었을 수 있는데, 살펴보세요, 분명히 오류 알림이 있는 상태에서와 깔끔하게 새 글 보기 화면으로 넘어간 상태에서는 다르다는 것을 느낄 수 있을 겁니다.
중앙정렬 태그는 분명히 틀린 것은 아니지만, 계속 오류 메시지가 나오더군요. 챗GPT도 같은 코드만 계속 보여주기에, 이것저것 섞어서 아무 탈이 없는 코드를 만들었습니다. 아마 전혀 필요 없는 코드일지 모르지만, 혹시 애드센스 광고가 중앙정렬이 안 된다면 적용해 보세요.
<h2 style="text-align: center;">
<p>
<script async="" crossorigin="anonymous" ></script>
<!--애드센스 코드-->
<ins ></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>
</h2>
<h2></h2>로 전체를 감싸고 <p></p>로 또 하나 더 감싸니까 오류 메시지가 없어지더군요. 이 코드는 전혀 필요 없는데, 그 당시에는 이렇게라도 해결할 수 있어서 다행이었습니다.
이렇게 중앙정렬을 위한 광고 크기는 내년부터는 많이 보이지 않을까요,
그것은 애드센스 수익이 지금의 클릭에서 노출로 바뀝니다. 즉, 한 페이지에 더 많은 광고를 넣으면 수익도 올라갑니다. 그래서 방문자가 불편해하는 전체화면 차지하는 광고보다는 조금 작게 만들어 포스팅을 읽는데 광고에 신경 쓰지 않게 하는 것도 요령이라고 할 수 있죠.
지금 생각하면 왜 중앙정렬 태그로 고민하고 많은 시간을 빼앗겼는지 대충 느낌이 오는데요, 처음에 애드센스 중앙정렬 태그를 넣었을 때 어딘가 제대로 된 코드를 넣지 못했을 겁니다. 위의 새 글 작성 보기로 넘어갈 때 나타나는 오류 알림은 코드가 완전히 잘못되었을 때도 나타날 수 있지만, 대부분은<div>를 사용하고 마지막에 </div>를 닫지 않았을 때 나타납니다. 어차피 코드를 복사해서 붙여 넣기 때문에 오류가 날 사항은 아닙니다만, 엉뚱한 코드가 중복되어 붙여 넣었을 때도 이런 오류 알림이 나오더군요.
그리고 이 오류 알림은 지금처럼 게시판에서도 보이지만 HTML 편집 에서도 코드가 잘못되었을 때는 오류 알림이 나타납니다.