워드프레스닷컴에 아무런 처리를 하지 않은 상태에서 인스타그램 컨텐츠를 넣으면 모바일에서 가로스크롤이 생긴답니다. 이 경우 사용자 경험에도 안 좋지만, 무엇보다 SEO 점수를 많이 깎아먹는답니다. 저는 실제로 이런 경우 때문에 구글 콘솔에서 경고 메시지를 받은 적이 있습니다. 이런 부분은 소스코드를 수정해서 해결해야 하는 부분입니다.
문제는 이 소스코드가 인스타그램의 iframe 기능으로 제공되는 것이고, 따라서 인스타그램에서 자체적으로 제공되는 기능이라 인라인 소스코드를 바꿔서 해결이 안 된다는 점입니다. 이 경우 워드프레스 스킨의 추가CSS 기능을 활용하여 CSS를 강제로 입혀서 문제를 해결해야 합니다.
워드프레스닷컴의 추가CSS를 삽입하는 기능이 프리미엄 요금제 이상에서 가능하기 때문에, 당연히 무료 요금제에서는 이런 기능을 활용할 수 없답니다. 따라서 워드프레스닷컴의 무료 요금제를 활용하는 경우 인스타그램의 소스코드를 삽입하면 이런 SEO 문제의 불리함을 안고 가야 한다는 이야기가 되겠습니다.
현재 제 블로그 (zoahaza.blog) 의 소스코드입니다. 이들 중 일부에 인스타그램 컨텐츠를 삽입할 때 가로스크롤 문제를 해결하는 소스코드가 들어 있습니다.
main p, main h1, main h2, main h3, main h4, main h5, main h6, main li {
word-break: break-all;
}
.entry-featured-image {
border-top: 1px solid #333;
border-bottom: 1px solid #333;
position: relative;
height: 20vh;
overflow: hidden;
}
.entry-featured-image img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.entry-featured-image::after {
display: none;
}
.site-logo-link img {
width: 150px;
height: 150px;
}
.wp-block-embed-instagram .embed-instagram iframe[style] {
min-width: 100px !important;
}
@media (max-width: 599px) {
#main .wp-block-embed-flickr img {
max-width: 75vw;
height: fit-content;
}
.entry-featured-image {
height: 10vh;
}
}여기서 인스타그램의 인라인 소스코드를 수정하는 부분은 다음과 같습니다.
.wp-block-embed-instagram .embed-instagram iframe[style] {
min-width: 100px !important;
}주의할 점이 있다면, 인라인 소스코드의 방식이 워드프레스닷컴의 테마(스킨)에 따라 조금씩 달라질 수 있으므로, 워드프레스닷컴이라고 무조건 이 소스코드를 복사 + 붙여넣기 해서 이 문제를 해결할 수 없을지도 모릅니다. 따라서 이런 경우 문제를 해결하기 위해 약간의 html, css 지식이 있어야 합니다.
문제를 해결하는 과정을 따로 유튜브로 보여 드리니 참고 바랍니다.
디지털 창작물 정리보관소 