• 2023. 4. 13.

    by. 꿈꾸는 시인

    SEO(Search Engine Optimization)란 자신의 웹페이지 혹은 웹사이트를 검색엔진이 찾기 쉽도록 개선하여 검색 결과 페이지에서 상위에 노출시켜 트래픽의 양과 질을 높이는 검색엔진 최적화 작업을 말합니다.

    내가 작성한 글이 구글, 네이버, 빙 등에서 검색이 잘되도록 하려면 SEO 작업이 꼭 필요합니다.

     

    티스토리 블로그(북클럽 스킨 기준) 사용 시 Bing SEO에서 자주 발생하는 다음 오류의 발생 원인과 해결방안에 대해 알아봅니다.

    1) 이미지가 누락된 경우의 Alt 특성
    2) 2개 이상의 h1 태그
    3) 너무 길거나 짧은 meta Description

     

    티스토리 블로그 포스팅 후 Bing 웹마스터 도구에 접속하여 URL 검사를 진행하면 다음과 같은 오류가 발생함을 볼 수 있습니다.

     

    '이미지가 누락된 경우의 Alt 특성' 문제

     

    (1) 오류의 발생원인

    일반적으로 alt 태그는 인터넷의 속도가 느려서 이미지 로딩 시간이 길어질 경우, 이 이미지가 어떤 내용을 담고 있는지 이미지 대신 alt 태그로 입력된 텍스트를 먼저 보여줌으로써 사용자로 하여금 여기에 어떤 이미지가 들어있는지를 미리 인지할 수 있도록 돕기 위함인데 이 alt 태그가 빈칸으로 비어있어 오류가 발생하는 것입니다.

    티스토리 블로그의 경우 포스팅 시 삽입하는 이미지에 대해서는 alt 속성을 부여하는 기능이 별도로 있지만, 티스토리 블로그 스킨에 포함된 이미지에 대한 alt 태그는 비어있기 때문에 이러한 오류가 발생하는 것으로 보입니다.

    이는 티스토리 블로그 스킨 자체의 문제이기 때문에 블로그관리 - 스킨편집 - html 편집을 통해 해결해야 합니다.

     

    (2) 해결 방법

    먼저 블로그 관리 - 꾸미기 - 스킨편집 - html 편집으로 이동 후 "<img" 혹은 "alt"로 검색해 줍니다. 이 때 검색단어가 모두 나오게 하기 위해서는  html 편집창의 빈 공백을 클릭한 후 Ctrl+F를 눌러 검색해야 합니다. (그냥 검색할 경우 보이는 부분에서만 검색단어를 찾아줍니다.)

    alt 태그 검색

     

    그림에 보이는 것처럼 "alt"로 검색했을 때 13개의 결괏값이 도출되었고 일부 alt 태그는 비어있는 것을 확인할 수 있습니다.

     

    alt 태그 수정

    이제 비어있는 alt 태그에 문자를 넣어줍니다. 저는 옆에 있는 글자를 공백을 포함하여 똑같이 넣어주었습니다.

    총 13개의 태그 중 10개 정도를 수정하였습니다.

     

    라이브 URL검사

    이제 라이브 URL 검사를 통해 다시 한번 검사합니다. 하지만 여전히 1개의 인스턴스가 남았다고 결괏값이 뜨는 것을 확인할 수 있습니다.

    이것은 포스팅 시 삽입했던 이미지에 대한 alt 태그를 입력하지 않았기 때문입니다.

     

    이미지 편집에서 alt 태그를 입력해 줍니다.

     

    alt태그 오류 해결

    다시 라이브 URL 검사를 진행하면  '이미지가 누락된 경우 Alt 특성 오류'가 해결된 것을 볼 수 있습니다.

     

    '2개 이상의 h1 태그' 문제

    (1) 오류의 발생원인

    일반적으로 검색로봇은 h1 → h2 → h3 순서대로 글을 읽습니다. 

    글의 제목(h1), 본문 제목(h2), 제목2(h3), 제목3(h4) 이러한 순서입니다.

     

    검색로봇은 순차적으로 글을 읽기 시작하는데 글의 제목인 h1이 두 개 이상일 경우 로봇이 내가 작성한 포스팅의 제목을 제대로 파악하기 어렵고 그렇게 되면 검색순위도 뒤로 밀릴 수가 있습니다.

    거기에 h1 태그가 2개 이상일 경우 검색로봇이 광고성 글로 판단하여 검색순위를 뒤로 미룰 수도 있다고 합니다.

     

    (2) 해결 방법

    h1 태그의 중복 문제는 티스토리 블로그  html 편집을 통해 해결이 가능합니다.

     

    블로그 관리 →  꾸미기 → 스킨편집 → html 편집기로 이동하여 "##_title"을 검색하여 아래 사진에 보이는 부분의 h1을 p로 수정해 줍니다. (<h1>→<p>, </h1>→</p>)

    h1 중복해결 html

     

    그 다음, css편집에서 "header h1"을 검색하여 사진의 부분의 h1을 p로 변경해 줍니다.(3곳)

    h1중복수정 css편집

     

    CSS까지 바꿔줘야 블로그의 제목 크기가 줄어들지 않습니다.

     

     

    너무 길거나 짧은 Meta Description

     

    (1) 오류의 발생원인

    Meta Description이란 쉽게 말해 페이지의 요약 정보라고 할 수 있습니다. 검색 결과에서 해당 페이지의 내용을 간략하게 요약하여 사용자가 원하는 내용이 포함되어 있는지를 바로 확인할 수 있어야 하는데 이 정보가 너무 길거나 짧을 경우, 검색로봇이 해당 페이지는 사용자에게 정확한 정보전달이 어렵다고 판단해서 발생하는 오류입니다.

    bing 사이트에서는 해당 오류의 해결 방법에 대해 이렇게 기술하고 있습니다.

    "이러한 문제를 해결하기 위해서는 페이지 소스 내 <meta description> 태그의 설명 길이를 25~160자 사이로 변경하세요."

     

    (2) 티스토리 블로그의 Meta Description 해결방안

    아쉽게도 티스토리 블로그는 Meta Description을 현재까지 '공백 포함 400자'로 규정하고 있습니다.

    meta description

    f12를 눌러 meta descripion을 보면 이렇게 길게 표시되어 있고 이를 글자 수 검색기에 돌려보면 정확히 공백 포함 400자 인걸 확인할 수 있습니다.

    description 글자 수

    때문에 bing에서 요구하는 25~160자 이내의 description을 맞출 수 있는 방법은 아쉽지만 현재까지는 없는 것으로 보입니다.

     

    저는 이렇게 문제를 해결했지만, 다른 방법이 존재할 수 있습니다. bing SEO 오류 해결방안에 대한 여러 다른 글도 함께 찾아보시기 바랍니다.