본문 바로가기
IT/모바일

티스토리. 검색엔진 최적화 하기 (Bing 웹마스터 도구. feat : SEO)

by 버들도령 2022. 8. 29.
728x90

티스토리. 검색엔진 최적화 하기 (Bing 웹마스터 도구. SEO)

블로그를 하다보면
방문자 숫자에 신경을 많이 쓰게 됩니다.
방문자는 자신에게 필요한 글을 검색하고, 도움이 될 만한 블로그의 글을 찾아서 오겠지요.

그렇다면 방문자는 어떻게 내 블로그까지 올까요?
나의 글을 구독하거나 친구맺기 등을 하지 않은 사람들은 포털사이트(Daum, Naver, Google, 줌, Bing, Yahoo, etc)을 통해서 검색키워드를 입력하고,
검색된 글들 중에서 마음에 드는 글의 제목이나 이미지를 보고 클릭하겠네요?

자~~
그러면 내 블로그를 활성화 시키는 방법은 찾았습니다.
내가 작성한 블로그 글이 포털사이트의 검색엔진에서 최대한 검색이 잘되게 하는 겁니다.
두가지로 요약하면 다음과 같겠죠?

블로그를 활성화 시키는 방법은?

  • 양질의 컨텐츠로 글을 잘 쓰는 것
  • 블로그 글이 검색엔진에서 더욱 더 많이 보여지게 하는 것

첫번째는 당연한거라서 모두들 잘 아실테고,
두번째는 검색엔진에서 어떻게 하면 많이 보여지게 할까?

구구절절 이야기하는 것보다 전문가들이 제시하는 방법을 알아보고,
문제점이 있다면 해결하면 되겠지요?

 

검색엔진 최적화 하기
SEO (Search Engine Optimization)

다른 최적화 방법도 많겠지만
저의 경우는
전문가들이 모여서 만든 Microsoft Bing에서 무료로 제공해주는
SEO (Search Engine Optimization) 보고서를 토대로 검색엔진 최적화를 진행합니다.

Bing의 웹마스터 툴을 아직 사용해보지 않으셨다면,
블로그 글을 모두 읽으신 다음에 Bing에 가입하시기 바랍니다.
Bing Webmaster Tools 사이트 주소는 글 하단에 올려두었습니다.

무조건 좋아요. ^^

Bing의 Webmaster Tools 사이트에 접속하면 다음과 같이 화면에 나타납니다.

Microsoft Bing - Webmaster Tools

SEO (Search Engine Optimization) 보고서

SEO 보고서에는 사이트 순위를 향상시키기 위한 가장 일반적인 페이지 수준 권장 사항이 몇 가지 포함되어 있습니다. 이러한 권장 사항은 시작하는 데 도움이 되는 약 15개의 SEO 모범 사례를 기반으로 합니다. SEO 모범 사례는 웹 사이트의 검색 엔진 순위를 향상시키는 데 도움이 되도록 설계된 작업 세트입니다.

SEO 보고서는 격주로 자동으로 생성되며 웹마스터 계정을 통해 사용할 수 있습니다. 주문형 SEO Analyzer 도구와 동일한 SEO Best Practices 집합을 사용하여 웹마스터 계정에 나열된 모든 사이트에 대한 대량 보고서를 만듭니다.

보고서를 검사하거나 작업해야 하는 항목을 확인하는 것 외에 시스템이 모든 페이지(인덱스에 표시되는 페이지)를 스캔하고 자동으로 보고하기 때문에 할 일이 없습니다.

이 페이지에는 검색된 전체 웹 사이트에서 발견된 모든 오류의 집계된 수와 오류가 포함된 총 페이지가 포함됩니다. 오류는 SEO 모범 사례를 따르지 않는 경우입니다. 모든 오류 유형 목록과 오류 심각도 및 이 오류가 포함된 페이지 수를 표에 볼 수 있습니다. 오류 유형을 클릭하면 오류 세부 정보 페이지로 이동합니다.

 

로그인 하시고,
왼쪽의 메뉴들을 훑어보시면, 'SEO 보고서' 라는 메뉴가 있습니다.
'SEO 보고서'를 눌러주세요.

Microsoft Bing - SEO(Search Engine Optimization) 검색 엔진 최적화

이 페이지에는 검색된 전체 웹 사이트에서 발견된 모든 오류의 집계된 수와 오류가 포함된 총 페이지가 포함됩니다. 오류는 SEO 모범 사례를 따르지 않는 경우입니다. 모든 오류 유형 목록과 오류 심각도 및 이 오류가 포함된 페이지 수를 표에 볼 수 있습니다. 오류 유형을 클릭하면 오류 세부 정보 페이지로 이동합니다.

위와 같이 SEO (Search Enging Optimization)의 보고서 내용들이 보여집니다.
중요한 것은 '오류 세부 정보'입니다.

SEO 오류 유형, 심각도, 페이지 수의 정보를 확인하실 수 있습니다.

이 페이지에는 개별 오류에 대한 세부 정보가 표시됩니다.
● 심각도 - 오류의 심각도는 높음, 중간 또는 낮음으로 페이지 순위에 영향을 미칠 수 있습니다.
● 오류가 있는 페이지 - 검색된 웹 사이트의 페이지 수, 이 오류가 있습니다.
● 총 오류 수 - 웹 사이트에서 검색된 모든 페이지에서 발생한 총 오류 수입니다.

※ 권장 조치
이 섹션에서는 이 오류에 대한 해결 세부 정보와 관련 있는 경우 예제를 포함하여 해결의 중요성을 설명합니다.

※ 오류가 있는 페이지
이 섹션에는 마지막 검색 중에 선택한 SEO 모범 사례를 준수하지 않은 최대 50페이지 목록이 포함되어 있습니다.

Microsoft Excel과 같은 여러 프로그램에서 데이터를 보려면 Download all 버튼을 클릭하여 데이터를 CSV 파일로 내보낼 수 있습니다.

 

위의 설명에서처럼 오류의 심각도에 따라서 해결해주시면 되겠습니다.

SEO (Search Enging Optimization)의 보고서의 오류 세부 정보

  • 페이지에 <h1>태그가 여러 개 있습니다. 《심각도 : 높음》
  • 페이지의 head 섹션에 설명이 없습니다. 《심각도 : 높음》
  • 설명이 너무 짧거나 너무 깁니다. 《심각도 : 높음》
  • <img> 태그에 ALT 속성 내용이 정의되지 않았습니다. 《심각도 : 낮음》
  • HTML의 평가된 크기는 125kb 이상으로 예상되고 완벽하게 캐시되지 않을 위험이 있습니다. 《심각도 : 낮음》

위에서 제시된 SEO 보고서에서의 오류들을 하나씩 해결해봅니다.

 

페이지에 <h1>태그가 여러 개 있습니다. 《심각도 : 높음》
※ 권장 작업
하나의 <h1> 태그만 존재하도록 페이지 소스에서 중복하는 <h1> 태그를 제거하세요.

♣♣♣ 이 페이지들에는 2개 이상의 <h1> 태그가 있습니다. 다수의 <h1> 헤더 태그는 검색 엔진 봇과 웹 사이트 사용자에게 혼란을 줄 수 있습니다. 페이지당 하나의 <h1> 태그만 사용하는 것이 좋습니다.

위에서 설명한 것처럼
한 페이지에 <h1> 헤더 태그는 하나씩만 존재해야 검색 엔진 봇과 웹사이트 사용자에게 혼란을 주지 않습니다.

내 블로그 글의 한페이지에 <h1> 태그가 몇개가 존재하는지 확인하는 방법. (구글 크롬 브라우저 기준)

  • 검색엔진을 통해 검색된 글이 관리자 페이지를 통해 보여지지 않도록 블로그를 로그아웃 해줍니다.
  • 검색엔진에서 내 블로그 글을 검색하고, 내 블로그 글을 클릭해줍니다.
  • 기능키 F12 키를 눌러서 구글 크롬 개발자도구를 실행합니다.
  • 기능키 F1 키를 눌러서 General Settings를 열어줍니다.
  • Debugger의 'Disable JavaScript' 항목을 체크해서 마우스 우클릭 제한을 해제해줍니다.

블로그 글에서 마우스 우클릭 제한 해제 후 소스보기~
소스보기 창에서 Ctrl+F키를 눌러서 '<h1' 태그 찾기

 

위에서 확인하신 것은
검색엔진을 통해서 검색된 내 블로그 글의 소스보기를 통해서 '<h1>' 태그의 사용 현황을 확인하신 것이구요.
모바일/웹에 따라서 해당 글의 소스보기 내용은 달라질 수 있습니다.

따라서, 원천적인 해결 방법은
티스토리 블로그의 '스킨 편집'을 통해서 스킨의 'html편집' 기능으로 '<h1>' 태그를 찾아주고, 해결해주는 것입니다.

※※※ 주의하실 점 ※※※
아래의 스킨 HTML/CSS의 소스와 수정작업은 제가 티스토리에 적용한 스킨에 대한 것으로 블로거님들의 스킨에 따라서 HTML/CSS의 소스가 다를 수 있음을 인지하시기 바랍니다.
따라서, 블로거님의 스킨마다 HTML/CSS 수정사항은 다르다!!!

다음과 같이 블로그 글에서 
"티스토리. 검색엔진 최적화 하기 (Bing 웹마스터 도구. feat : SEO)"에 h1 태그가 사용 된 부분이 1개만 있으면 되다는 것!!
<h1>티스토리. 검색엔진 최적화 하기 (Bing 웹마스터 도구. feat : SEO)</h1>

 

 

아래의 코드들이 블로그 제목에 대한 소스입니다.
<div class="post-cover">로 쌓여 있으며
블로그 제목을 나타내는 <h1>티스토리. 검색엔진 최적화 하기 (Bing 웹마스터 도구. feat : SEO)</h1> 이 있습니다.
이 부분의 <h1>태그를 제외하고는 모두 h2 태그로 바꿀거에요.
그렇게 한 후에 <h2> 태그에 대한 정의를 css에 수정/추가해줄거구요.

<s_page_rep>
	<div class="post-cover">
		<div class="inner">
			<h1>티스토리. 검색엔진 최적화 하기 (Bing 웹마스터 도구. feat : SEO)</h1>
			<span class="meta">
				<span class="author">by 버들도령</span>
				<span class="date">2022. 8. 29.</span>
			</span>
		</div>
	</div>
	<div class="entry-content">
		
                            
        






        

                                        
        

  

    
728x90

    
    
  



        

            
티스토리. 검색엔진 최적화 하기 (Bing 웹마스터 도구. SEO)


블로그를 하다보면
방문자 숫자에 신경을 많이 쓰게 됩니다.
방문자는 자신에게 필요한 글을 검색하고, 도움이 될 만한 블로그의 글을 찾아서 오겠지요.


그렇다면 방문자는 어떻게 내 블로그까지 올까요?
나의 글을 구독하거나 친구맺기 등을 하지 않은 사람들은 포털사이트(Daum, Naver, Google, 줌, Bing, Yahoo, etc)을 통해서 검색키워드를 입력하고,
검색된 글들 중에서 마음에 드는 글의 제목이나 이미지를 보고 클릭하겠네요?


자~~
그러면 내 블로그를 활성화 시키는 방법은 찾았습니다.
내가 작성한 블로그 글이 포털사이트의 검색엔진에서 최대한 검색이 잘되게 하는 겁니다.
두가지로 요약하면 다음과 같겠죠?


블로그를 활성화 시키는 방법은?


    

  • 양질의 컨텐츠로 글을 잘 쓰는 것
    • 

  • 블로그 글이 검색엔진에서 더욱 더 많이 보여지게 하는 것
    • 



첫번째는 당연한거라서 모두들 잘 아실테고,
두번째는 검색엔진에서 어떻게 하면 많이 보여지게 할까?


구구절절 이야기하는 것보다 전문가들이 제시하는 방법을 알아보고,
문제점이 있다면 해결하면 되겠지요?


 


검색엔진 최적화 하기
SEO (Search Engine Optimization)


다른 최적화 방법도 많겠지만
저의 경우는
전문가들이 모여서 만든 Microsoft Bing에서 무료로 제공해주는
SEO (Search Engine Optimization) 보고서를 토대로 검색엔진 최적화를 진행합니다.


Bing의 웹마스터 툴을 아직 사용해보지 않으셨다면,
블로그 글을 모두 읽으신 다음에 Bing에 가입하시기 바랍니다.
Bing Webmaster Tools 사이트 주소는 글 하단에 올려두었습니다.


무조건 좋아요. ^^


Bing의 Webmaster Tools 사이트에 접속하면 다음과 같이 화면에 나타납니다.


Microsoft Bing - Webmaster Tools






SEO (Search Engine Optimization) 보고서

SEO 보고서에는 사이트 순위를 향상시키기 위한 가장 일반적인 페이지 수준 권장 사항이 몇 가지 포함되어 있습니다. 이러한 권장 사항은 시작하는 데 도움이 되는 약 15개의 SEO 모범 사례를 기반으로 합니다. SEO 모범 사례는 웹 사이트의 검색 엔진 순위를 향상시키는 데 도움이 되도록 설계된 작업 세트입니다.

SEO 보고서는 격주로 자동으로 생성되며 웹마스터 계정을 통해 사용할 수 있습니다. 주문형 SEO Analyzer 도구와 동일한 SEO Best Practices 집합을 사용하여 웹마스터 계정에 나열된 모든 사이트에 대한 대량 보고서를 만듭니다.

보고서를 검사하거나 작업해야 하는 항목을 확인하는 것 외에 시스템이 모든 페이지(인덱스에 표시되는 페이지)를 스캔하고 자동으로 보고하기 때문에 할 일이 없습니다.

이 페이지에는 검색된 전체 웹 사이트에서 발견된 모든 오류의 집계된 수와 오류가 포함된 총 페이지가 포함됩니다. 오류는 SEO 모범 사례를 따르지 않는 경우입니다. 모든 오류 유형 목록과 오류 심각도 및 이 오류가 포함된 페이지 수를 표에 볼 수 있습니다. 오류 유형을 클릭하면 오류 세부 정보 페이지로 이동합니다.


 


로그인 하시고,
왼쪽의 메뉴들을 훑어보시면, 'SEO 보고서' 라는 메뉴가 있습니다.
'SEO 보고서'를 눌러주세요.


Microsoft Bing - SEO(Search Engine Optimization) 검색 엔진 최적화






이 페이지에는 검색된 전체 웹 사이트에서 발견된 모든 오류의 집계된 수와 오류가 포함된 총 페이지가 포함됩니다. 오류는 SEO 모범 사례를 따르지 않는 경우입니다. 모든 오류 유형 목록과 오류 심각도 및 이 오류가 포함된 페이지 수를 표에 볼 수 있습니다. 오류 유형을 클릭하면 오류 세부 정보 페이지로 이동합니다.


위와 같이 SEO (Search Enging Optimization)의 보고서 내용들이 보여집니다.
중요한 것은 '오류 세부 정보'입니다.


SEO 오류 유형, 심각도, 페이지 수의 정보를 확인하실 수 있습니다.


이 페이지에는 개별 오류에 대한 세부 정보가 표시됩니다.
● 심각도 - 오류의 심각도는 높음, 중간 또는 낮음으로 페이지 순위에 영향을 미칠 수 있습니다.
● 오류가 있는 페이지 - 검색된 웹 사이트의 페이지 수, 이 오류가 있습니다.
● 총 오류 수 - 웹 사이트에서 검색된 모든 페이지에서 발생한 총 오류 수입니다.

※ 권장 조치
이 섹션에서는 이 오류에 대한 해결 세부 정보와 관련 있는 경우 예제를 포함하여 해결의 중요성을 설명합니다.

※ 오류가 있는 페이지
이 섹션에는 마지막 검색 중에 선택한 SEO 모범 사례를 준수하지 않은 최대 50페이지 목록이 포함되어 있습니다.

Microsoft Excel과 같은 여러 프로그램에서 데이터를 보려면 Download all 버튼을 클릭하여 데이터를 CSV 파일로 내보낼 수 있습니다.


 


위의 설명에서처럼 오류의 심각도에 따라서 해결해주시면 되겠습니다.


SEO (Search Enging Optimization)의 보고서의 오류 세부 정보


    

  • 페이지에 <h1>태그가 여러 개 있습니다. 《심각도 : 높음》
    • 

  • 페이지의 head 섹션에 설명이 없습니다. 《심각도 : 높음》
    • 

  • 설명이 너무 짧거나 너무 깁니다. 《심각도 : 높음》
    • 

  • <img> 태그에 ALT 속성 내용이 정의되지 않았습니다. 《심각도 : 낮음》
    • 

  • HTML의 평가된 크기는 125kb 이상으로 예상되고 완벽하게 캐시되지 않을 위험이 있습니다. 《심각도 : 낮음》
    • 



위에서 제시된 SEO 보고서에서의 오류들을 하나씩 해결해봅니다.


 


페이지에 <h1>태그가 여러 개 있습니다. 《심각도 : 높음》


※ 권장 작업
하나의 <h1> 태그만 존재하도록 페이지 소스에서 중복하는 <h1> 태그를 제거하세요.

♣♣♣ 이 페이지들에는 2개 이상의 <h1> 태그가 있습니다. 다수의 <h1> 헤더 태그는 검색 엔진 봇과 웹 사이트 사용자에게 혼란을 줄 수 있습니다. 페이지당 하나의 <h1> 태그만 사용하는 것이 좋습니다.


위에서 설명한 것처럼
한 페이지에 <h1> 헤더 태그는 하나씩만 존재해야 검색 엔진 봇과 웹사이트 사용자에게 혼란을 주지 않습니다.


내 블로그 글의 한페이지에 <h1> 태그가 몇개가 존재하는지 확인하는 방법. (구글 크롬 브라우저 기준)


    

  • 검색엔진을 통해 검색된 글이 관리자 페이지를 통해 보여지지 않도록 블로그를 로그아웃 해줍니다.
    • 

  • 검색엔진에서 내 블로그 글을 검색하고, 내 블로그 글을 클릭해줍니다.
    • 

  • 기능키 F12 키를 눌러서 구글 크롬 개발자도구를 실행합니다.
    • 

  • 기능키 F1 키를 눌러서 General Settings를 열어줍니다.
    • 

  • Debugger의 'Disable JavaScript' 항목을 체크해서 마우스 우클릭 제한을 해제해줍니다.
    • 



블로그 글에서 마우스 우클릭 제한 해제 후 소스보기~




소스보기 창에서 Ctrl+F키를 눌러서 '<h1' 태그 찾기






 


위에서 확인하신 것은
검색엔진을 통해서 검색된 내 블로그 글의 소스보기를 통해서 '<h1>' 태그의 사용 현황을 확인하신 것이구요.
모바일/웹에 따라서 해당 글의 소스보기 내용은 달라질 수 있습니다.


따라서, 원천적인 해결 방법은
티스토리 블로그의 '스킨 편집'을 통해서 스킨의 'html편집' 기능으로 '<h1>' 태그를 찾아주고, 해결해주는 것입니다.


※※※ 주의하실 점 ※※※
아래의 스킨 HTML/CSS의 소스와 수정작업은 제가 티스토리에 적용한 스킨에 대한 것으로 블로거님들의 스킨에 따라서 HTML/CSS의 소스가 다를 수 있음을 인지하시기 바랍니다.
따라서, 블로거님의 스킨마다 HTML/CSS 수정사항은 다르다!!!

다음과 같이 블로그 글에서 
""에 h1 태그가 사용 된 부분이 1개만 있으면 되다는 것!!
<h1></h1>






 






 


아래의 코드들이 블로그 제목에 대한 소스입니다.
<div class="post-cover">로 쌓여 있으며
블로그 제목을 나타내는 <h1></h1> 이 있습니다.
이 부분의 <h1>태그를 제외하고는 모두 h2 태그로 바꿀거에요.
그렇게 한 후에 <h2> 태그에 대한 정의를 css에 수정/추가해줄거구요.


<s_page_rep>
	<div class="post-cover">
		<div class="inner">
			<h1></h1>
			<span class="meta">
				<span class="author">by </span>
				<span class="date"></span>
			</span>
		</div>
	</div>
	<div class="entry-content">
		
	</div>
</s_page_rep>


 


<s_notice_rep>
	<div class="post-cover notice"<s_notice_rep_thumbnail> style="background-image: url();"</s_notice_rep_thumbnail>>
		<div class="inner">
			<!-- Edited : h1 tag >>>> h2 tag.  -->
			<h2><a href=""></a></h2>
			<span class="meta">
				<span class="date"></span>
			</span>
		</div>
	</div>
	<div class="entry-content">
		
	</div>
</s_notice_rep>


 


<s_list>
	
<!-- Kakao AdFit 상단 광고 start -->

<!-- Kakao AdFit 상단 광고 end -->
	
	<div class="post-header">
		<!-- Edited : h1 tag >>>> h2 tag.  -->
		<h2><span></span><em></em></h2>
	</div>


 


<s_tag>
	<div class="post-header">
		<!-- Edited : h1 tag >>>> h2 tag.  -->
		<h2>태그</h2>
	</div>
	<div class="tags">
		<s_tag_rep>
			<a href=""></a>
		</s_tag_rep>
	</div>
</s_tag>


 


<s_guest>
	<div class="comments">
		<div class="post-header">
			<!-- Edited : h1 tag >>>> h2 tag.  -->
			<h2>방명록</h2>
		</div>

		<s_guest_input_form>


 


스킨의 HTML  수정 완료 후 <h1> 태그


 


<s_page_rep>
	<div class="post-cover">
		<div class="inner">
			<h1></h1>
			<span class="meta">
				<span class="author">by </span>
				<span class="date"></span>
			</span>
		</div>
	</div>
	<div class="entry-content">
		
	</div>
</s_page_rep>


 


<s_permalink_article_rep>
	<div class="post-cover"<s_article_rep_thumbnail> style="background-image:url()"</s_article_rep_thumbnail>>
		<div class="inner">
			<span class="category"></span>
			<!-- ※※※ Edited : h2 tag >>>> h1 tag. ※※※ -->
			<h1></h1>
			<span class="meta">
				<span class="author">by </span>
				<span class="date"></span>
				<s_ad_div>
					<a href="">수정</a>
					<a href="#" onclick="">삭제</a>
				</s_ad_div>
			</span>
		</div>
	</div>


 


스킨의 CSS 편집하기


/* Edited : h1 tag >>>> h2 tag. */
#header h2 {
	padding: 23px 0 ;
	font-family: 'Nanum Myeongjo';
	font-weight: 800;
	font-size: 1.75em;
	line-height: 32px;
	letter-spacing: -0.2px;
	color: #333;
}
#header h2 a {
	display: inline-block;
	height: 32px;
	text-decoration: none;
	color: #333;
	vertical-align: top;
}
#header h2 img {
	width: auto;
	height: 32px;
}


 


/* Edited : h1 tag >>>> h2 tag. */
#tt-body-index .post-cover.notice h2 {
	margin: 0;
	font-size: 1.6875em;
	line-height: 1.5;
	color: #000;
}
#tt-body-index .post-cover.notice h2 a {
	color: #000;
}


 


.post-header {padding-top: 4px;}
.post-header h1 {
	margin-bottom: 18px;
	font-size: 1em;
	line-height: 1.375;
}
/* added : .post-header h2 css */
.post-header h2 {
	margin-bottom: 18px;
	font-size: 1em;
	line-height: 1.375;
}
#tt-body-archive .post-header span:before {content: "'";}
#tt-body-archive .post-header span:after {content: "' 에 등록된 글";}
#tt-body-tag .post-header span:before {content: "#";}
#tt-body-search .post-header span:before {content: "'";}
#tt-body-search .post-header span:after {content: "'의 검색결과";}

.post-header h1 em {
	margin-left: 7px;
	font-style: normal;
	color: #04beb8;
}
/* added : .post-header h2 em css */
.post-header h2 em {
	margin-left: 7px;
	font-style: normal;
	color: #04beb8;
}


 


.list-type-thumbnail .post-header h1 {
	margin-bottom: 0;
}
/* added : .list-type-thumbnail .post-header h2 css */
.list-type-thumbnail .post-header h2 {
	margin-bottom: 0;
}


 


.list-type-text .post-header h1 {
	margin-bottom: 0;
}
/* added : .list-type-text .post-header h2 css */
.list-type-text .post-header h2 {
	margin-bottom: 0;
}


 


스킨 HTML/CSS 수정 적용


아래와 같은 순서로 스킨의 HTML/CSS를 수정하시고,
적용하신 다음에 '새로고침'을 통해서 확인하세요.






 






티스토리 스킨의 HTML/CSS의 소스 수정이 필요한 부분들이 여러군데라서 글이 길어졌네요.
여기까지 잘 따라하셨길 바랍니다.




페이지의 head 섹션에 설명이 없습니다. 《심각도 : 높음》


※ 권장 작업
페이지 소스의 <head> 섹션에 설명을 추가하세요: <meta name='description' content='페이지 콘텐츠에 관한 설명적이고 키워드가 풍부한 텍스트를 여기에 삽입하세요.'>.

예)
<head>
    <meta name='description' content='Descriptive, 페이지 콘텐츠에 대해 설명하는 키워드가 풍부한 텍스트가 여기에 표시됩니다.'>
</head>


♣♣♣ 검색 엔진은 <description> 태그 내의 설명만 검색 엔진 결과 페이지(SERP)에 사용할 수 있습니다. 페이지 콘텐츠를 반영하고 검색자의 의도에 관련 있도록 설명을 잘 작성하면 검색 시 사용자 페이지의 클릭률이 향상하여 트래픽이 증가합니다.


 


오류가 있는 페이지... 를 보여주는데 티스토리 관리자 페이지네요. ^^;






티스토리에서 블로그 글의 <head> 섹션에 설명은 자동으로 생성됩니다.


<meta name="description" content="윈도우 10 동영상 녹화 기능 (게임 동영상/화면 녹화, 캡처)  윈도우 10에는 유용한 동영상 녹화 기능이 있습니다. 많은 분들이 게임을 즐겨하시고, 자신의 플레이 영상을 녹화하고 싶은 욕구가 있죠. 그럴 경우에..">


 


Meta tag가 필요한 경우에는
티스토리 관리자 페이지에서 "플러그인" 메뉴를 클릭한 후
Meta Tag의 필요한 속성을 추가해줍니다.






 




설명이 너무 짧거나 너무 깁니다. 《심각도 : 높음》


권장 작업
페이지 소스 내 <meta description> 태그의 설명 길이를 25~160자 사이로 변경하세요.

♣♣♣ 검색 엔진 크롤러는 검사 결과 페이지에서 첫 150-160자만 표시하므로 설명이 너무 길면 검색자가 일부 텍스트를 보지 못할 수 있습니다. 설명이 너무 짧으면 검색 엔진은 페이지의 다른 곳에서 찾은 텍스트를 추가할 수도 있습니다. 검색 엔진은 사용자의 검색에 더 적합하다고 판단되면 사용자가 작성한 내용의 다른 설명을 표시할 수도 있습니다.


 


음... 티스토리에서는 Meta Tag의 Description을 자동으로 만들어 준다고 말씀드렸죠?
네. 맞아요.
티스토리가 자동으로 만들어줍니다.
제가 너무 짧은 것을 찾아보니
사진만 올린 경우이고,
너무 길다고 한 부분은 SEO에서 얘기하는 
<meta description> 태그의 설명 길이가 25 ~ 160자를 넘지 않는데도 오류로 보고한 것으로 보입니다.
설명글이 길다고 하는 부분은 어떻게 해야할지 보류합니다.


설명글이 25자 이내인 것은
 해당 블로그 글에 설명을 추가하는 것으로 해결 됩니다.




<img> 태그에 ALT 속성 내용이 정의되지 않았습니다. 《심각도 : 낮음》


권장 작업
<img alt> 특성을 사용하여 이미지에 대해 설명적인 콘텐츠를 작성하세요: <img source='pic.gif' alt='이미지를 표현하는 정확하고 설명적인 키워드 텍스트.' />.

♣♣♣ 일반적인 원칙상 검색 엔진은 이미지 파일의 콘텐츠를 해석하지 않습니다. <img alt> 특성은 사이트 소유자가 검색 엔진과 최종 사용자에게 관련 정보를 제공할 수 있도록 합니다. Alt 텍스트는 최종 사용자가 이미지 사용을 비활성화하였거나 이미지가 제대로 로드되지 않는 경우 유용합니다. 또한, Alt 텍스트는 화면 읽기 프로그램에 사용됩니다. Alt 텍스트가 설명적이고 이미지가 표현하는 것을 정확하게 반영하는지, 페이지의 콘텐츠를 지원하는지 확인합니다.


위에서 설명한 것처럼
이미지 태그의 alt 속성에 설명이 없을때 오류로 보고됩니다.
심각도가 낮기 때문에 필수적으로 할 필요는 없어 보입니다.


하지만,
검색 엔진 최적화의 블로그 글을 원하신다면
블로그 글에 들어가는 이미지마다 설명을 달아주시면 되겠습니다.
아래 이미지에서처럼요.


위의 이미지는 갤럭시 워치 4의 이미지에 설명을 추가한 것으로, 이미지의






음... 이 부분도 티스토리에서는 좀 특이한 방법으로 블로그를 발행하는 것 같아요.
위의 이미지에 대한 소스보기를 해보면 아래와 같이 나와요.
img태그에 alt 속성이 포함이 안되죠?
이건 더 알아봐야겠어요. ^^;;;


<p>
<figure class='imageblock alignCenter' data-origin-width='251' data-origin-height='300' data-ke-mobilestyle='alignCenter'>
  <span data-url='https://blog.kakaocdn.net/dn/tLsms/btrxiuCoOdW/0BpVEBef3PYBfR81wJZd5K/img.jpg' data-lightbox='lightbox' data-alt='Samsung Galaxy Watch 4 클래식 실버 색상'>
    <img src='https://blog.kakaocdn.net/dn/tLsms/btrxiuCoOdW/0BpVEBef3PYBfR81wJZd5K/img.jpg' srcset='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtLsms%2FbtrxiuCoOdW%2F0BpVEBef3PYBfR81wJZd5K%2Fimg.jpg' width='241' height='288' data-ke-mobilestyle='alignCenter' />
  </span>
  <figcaption>Samsung Galaxy Watch 4 클래식 실버 색상</figcaption>
</figure>
</p>


 




HTML의 평가된 크기는 125kb 이상으로 예상되고 완벽하게 캐시되지 않을 위험이 있습니다. 《심각도 : 낮음》


권장 작업
페이지 원본의 페이지 상단에 다량의 CSS 또는 코드가 있지 않은지 확인하세요. 코드와 스타일을 다른 파일에 옮기는 것을 고려해 보세요.

♣♣♣ 페이지에 코드가 많이 포함되어 있으면 검색 엔진이 페이지 콘텐츠를 전부 획득하지는 못할 수 있습니다. 관련 없는 코드는 페이지 소스에서 콘텐츠를 아래로 밀어내어 검색 엔진 크롤러가 접근하기 어렵게 만들 수 있습니다. 크롤러에 의해 캐시될 페이지 소스에서 모든 콘텐츠 및 링크가 사용되도록 125KB의 소프트 제한이 사용됩니다. 이는 기본적으로, 페이지가 너무 크면 검색 엔진이 콘텐츠의 일부를 가져오지 못하거나 완전히 캐싱하지 못할 수 있음을 의미합니다.


음.. 이 부분의 티스토리에서 블로그 글을 만들어낼때 css 또는 코드가 많은 경우에 발생하는가봐요.
이것도 쉽게 수정하기 어려운 부분이네요.
CSS 코드나 스타일을 다른 파일로 옮기는 작업을 고려해보라고 하는데 쉽지 않은 부분이죠.
혹시.. 가능하신 분은 위의 '권장 작업'을 따라해보세요.


그리고, 공유해주시면 참고하겠습니다. ^^




사이트 검사 / 스캔하기


SEO 문제를 모두 해결하셨나요?
그렇다면...새롭게 사이트 검사를 진행해볼까요?
아래 이미지를 따라해보세요.










아래의 문제들은
사이트 검사를 통해 스캔한 이후의 결과 값들에 대한 문제들에 대한 설명과 해결 방법입니다.
SEO보고서와 비교해서 살펴보시고,
조치할 수 있는 것들은 조치해주시는게 검색엔진 최적화에 좋습니다.


HTTP 400~499 오류 《오류》


※무엇에 관한 문제입니까?
이 페이지들에는 400~499 HTTP 상태 코드가 포함되어 있습니다. HTTP 상태 200을 보장하면 SERP 성능을 개선하고 사용자 트래픽을 확보할 수 있습니다.

※ 어떻게 수정하나요?
사이트를 업데이트하면 이 오류들이 포함된 URL을 수정할 수 있습니다.


 


이미지가 누락된 경우의 Alt 특성 《경고》


※무엇에 관한 문제입니까?
<img> 태그에 ALT 특성이 정의되어 있지 않습니다. 일반적인 원칙상 검색 엔진은 이미지 파일의 콘텐츠를 해석하지 않습니다. <img alt> 특성은 사이트 소유자가 검색 엔진과 최종 사용자에게 관련 정보를 제공할 수 있도록 합니다. Alt 텍스트는 최종 사용자가 이미지 사용을 비활성화하였거나 이미지가 제대로 로드되지 않는 경우 유용합니다. 또한, Alt 텍스트는 화면 읽기 프로그램에 사용됩니다. Alt 텍스트가 설명적이고 이미지가 표현하는 것을 정확하게 반영하는지, 페이지의 콘텐츠를 지원하는지 확인합니다.

※어떻게 수정하나요?
<img alt> 특성을 사용하여 이미지에 대해 설명적인 콘텐츠를 작성하세요: <img source='pic.gif' alt='이미지를 표현하는 정확하고 설명적인 키워드 텍스트.' />


 


너무 길거나 짧은 Meta Description 《경고》


※무엇에 관한 문제입니까?
설명이 너무 짧거나 너무 깁니다. 검색 엔진 크롤러는 검사 결과 페이지에서 첫 150-160자만 표시하므로 설명이 너무 길면 검색자가 일부 텍스트를 보지 못할 수 있습니다. 설명이 너무 짧으면 검색 엔진은 페이지의 다른 곳에서 찾은 텍스트를 추가할 수도 있습니다. 검색 엔진은 사용자의 검색에 더 적합하다고 판단되면 사용자가 작성한 내용의 다른 설명을 표시할 수도 있습니다.

※어떻게 수정하나요?
페이지 소스 내 <meta description> 태그의 설명 길이를 25~160자 사이로 변경하세요.


 


너무 짧은 제목 《경고》


※무엇에 관한 문제입니까?
이 페이지의 제목 길이가 15자 미만입니다. 제목이 너무 짧으면, 페이지의 관련성을 이해하는 데 필요한 정보를 당사와 사용자에게 충분히 제공하지 못할 수 있습니다.

※어떻게 수정하나요?
<title> 태그 안에 더 많은 설명 내용을 추가합니다. 페이지 내용을 잘 설명하도록 고유성과 관련성을 높입니다. 제목 태그 관련 키워드 아이디어를 찾으려면 키워드 연구 도구를 사용하세요.


 


너무 긴 제목 《경고》


※무엇에 관한 문제입니까?
이 페이지의 제목 길이가 70자 이상입니다. 제목이 너무 길면 검색 엔진에서 제목이 잘리거나 무시될 수 있습니다. 제목의 관련성을 유지하고 너무 길지 않도록 하세요.

※어떻게 수정하나요?
제목 길이를 70자 미만으로 변경하세요. 페이지 내용을 잘 설명하도록 고유성과 관련성을 높이세요. 제목 태그 관련 키워드 아이디어를 찾으려면 키워드 연구 도구를 사용하세요.


 


Html 길이가 너무 깁니다. 《경고》


※무엇에 관한 문제입니까?
HTML의 평가된 크기는 125kb보다 클 것으로 예상되고 완벽하게 캐시되지 않을 위험이 있습니다. 페이지에 코드가 많이 포함되어 있으면 검색 엔진이 페이지 콘텐츠를 전부 획득하지는 못할 수 있습니다. 관련 없는 코드는 페이지 소스에서 콘텐츠를 아래로 밀어내어 검색 엔진 크롤러가 접근하기 어렵게 만들 수 있습니다. 크롤러에 의해 캐시될 페이지 소스에서 모든 콘텐츠 및 링크가 사용되도록 125KB의 소프트 제한이 사용됩니다. 이는 기본적으로, 페이지가 너무 크면 검색 엔진이 콘텐츠의 일부를 가져오지 못하거나 완전히 캐싱하지 못할 수 있음을 의미합니다.

※어떻게 수정하나요?
페이지 원본의 페이지 상단에 다량의 CSS 또는 코드가 있지 않은지 확인하세요. 코드와 스타일을 다른 파일에 옮기는 것을 고려해 보세요.


 


H1 태그 누락 《알림》


※무엇에 관한 문제입니까?
<h1> 태그가 누락되었습니다. <h1> 태그는 Bingbot 및 웹 방문자에게 본문의 주요 테마 또는 주제가 무엇인지를 나타냅니다. <h1> 태그는 제목, 설명 및 본문의 핵심 키워드를 강화합니다. <h1> 태그는 콘텐츠를 반영하는 키워드를 포함하고 길이는 약 150자를 넘지 않는 것이 좋습니다.

※어떻게 수정하나요?
<h1> 태그를 사용하여 페이지에 헤더를 추가하고 페이지 소스의 <body> 내에 배치하세요.


 


2개 이상의 h1 태크 《알림》


※무엇에 관한 문제입니까?
이 페이지들에는 2개 이상의 <h1> 태그가 있습니다. 다수의 <h1> 헤더 태그는 검색 엔진 봇과 웹 사이트 사용자에게 혼란을 줄 수 있습니다. 페이지당 하나의 <h1> 태그만 사용하는 것이 좋습니다.

※어떻게 수정하나요?
하나의 <h1> 태그만 존재하도록 페이지 소스에서 중복하는 <h1> 태그를 제거하세요.


 


글이 많이 길어졌는데...
본인에게 필요하신 부분만 살펴보시고, 적용해보세요.
긴 글 따라하신다고 수고 많으셨습니다.

                    
        

  

    
728x90

    
    
  



        

                            
        






        







	</div>
</s_page_rep>

 

<s_notice_rep>
	<div class="post-cover notice"<s_notice_rep_thumbnail> style="background-image: url();"</s_notice_rep_thumbnail>>
		<div class="inner">
			<!-- Edited : h1 tag >>>> h2 tag.  -->
			<h2><a href=""></a></h2>
			<span class="meta">
				<span class="date"></span>
			</span>
		</div>
	</div>
	<div class="entry-content">
		
	</div>
</s_notice_rep>

 

<s_list>
	
<!-- Kakao AdFit 상단 광고 start -->

<!-- Kakao AdFit 상단 광고 end -->
	
	<div class="post-header">
		<!-- Edited : h1 tag >>>> h2 tag.  -->
		<h2><span></span><em></em></h2>
	</div>

 

<s_tag>
	<div class="post-header">
		<!-- Edited : h1 tag >>>> h2 tag.  -->
		<h2>태그</h2>
	</div>
	<div class="tags">
		<s_tag_rep>
			<a href=""></a>
		</s_tag_rep>
	</div>
</s_tag>

 

<s_guest>
	<div class="comments">
		<div class="post-header">
			<!-- Edited : h1 tag >>>> h2 tag.  -->
			<h2>방명록</h2>
		</div>

		<s_guest_input_form>

 

스킨의 HTML  수정 완료 후 <h1> 태그

 

<s_page_rep>
	<div class="post-cover">
		<div class="inner">
			<h1>티스토리. 검색엔진 최적화 하기 (Bing 웹마스터 도구. feat : SEO)</h1>
			<span class="meta">
				<span class="author">by 버들도령</span>
				<span class="date">2022. 8. 29.</span>
			</span>
		</div>
	</div>
	<div class="entry-content">
		
                            
        






        

                                        
        

  

    
728x90

    
    
  



        

            
티스토리. 검색엔진 최적화 하기 (Bing 웹마스터 도구. SEO)


블로그를 하다보면
방문자 숫자에 신경을 많이 쓰게 됩니다.
방문자는 자신에게 필요한 글을 검색하고, 도움이 될 만한 블로그의 글을 찾아서 오겠지요.


그렇다면 방문자는 어떻게 내 블로그까지 올까요?
나의 글을 구독하거나 친구맺기 등을 하지 않은 사람들은 포털사이트(Daum, Naver, Google, 줌, Bing, Yahoo, etc)을 통해서 검색키워드를 입력하고,
검색된 글들 중에서 마음에 드는 글의 제목이나 이미지를 보고 클릭하겠네요?


자~~
그러면 내 블로그를 활성화 시키는 방법은 찾았습니다.
내가 작성한 블로그 글이 포털사이트의 검색엔진에서 최대한 검색이 잘되게 하는 겁니다.
두가지로 요약하면 다음과 같겠죠?


블로그를 활성화 시키는 방법은?


    

  • 양질의 컨텐츠로 글을 잘 쓰는 것
    • 

  • 블로그 글이 검색엔진에서 더욱 더 많이 보여지게 하는 것
    • 



첫번째는 당연한거라서 모두들 잘 아실테고,
두번째는 검색엔진에서 어떻게 하면 많이 보여지게 할까?


구구절절 이야기하는 것보다 전문가들이 제시하는 방법을 알아보고,
문제점이 있다면 해결하면 되겠지요?


 


검색엔진 최적화 하기
SEO (Search Engine Optimization)


다른 최적화 방법도 많겠지만
저의 경우는
전문가들이 모여서 만든 Microsoft Bing에서 무료로 제공해주는
SEO (Search Engine Optimization) 보고서를 토대로 검색엔진 최적화를 진행합니다.


Bing의 웹마스터 툴을 아직 사용해보지 않으셨다면,
블로그 글을 모두 읽으신 다음에 Bing에 가입하시기 바랍니다.
Bing Webmaster Tools 사이트 주소는 글 하단에 올려두었습니다.


무조건 좋아요. ^^


Bing의 Webmaster Tools 사이트에 접속하면 다음과 같이 화면에 나타납니다.


Microsoft Bing - Webmaster Tools






SEO (Search Engine Optimization) 보고서

SEO 보고서에는 사이트 순위를 향상시키기 위한 가장 일반적인 페이지 수준 권장 사항이 몇 가지 포함되어 있습니다. 이러한 권장 사항은 시작하는 데 도움이 되는 약 15개의 SEO 모범 사례를 기반으로 합니다. SEO 모범 사례는 웹 사이트의 검색 엔진 순위를 향상시키는 데 도움이 되도록 설계된 작업 세트입니다.

SEO 보고서는 격주로 자동으로 생성되며 웹마스터 계정을 통해 사용할 수 있습니다. 주문형 SEO Analyzer 도구와 동일한 SEO Best Practices 집합을 사용하여 웹마스터 계정에 나열된 모든 사이트에 대한 대량 보고서를 만듭니다.

보고서를 검사하거나 작업해야 하는 항목을 확인하는 것 외에 시스템이 모든 페이지(인덱스에 표시되는 페이지)를 스캔하고 자동으로 보고하기 때문에 할 일이 없습니다.

이 페이지에는 검색된 전체 웹 사이트에서 발견된 모든 오류의 집계된 수와 오류가 포함된 총 페이지가 포함됩니다. 오류는 SEO 모범 사례를 따르지 않는 경우입니다. 모든 오류 유형 목록과 오류 심각도 및 이 오류가 포함된 페이지 수를 표에 볼 수 있습니다. 오류 유형을 클릭하면 오류 세부 정보 페이지로 이동합니다.


 


로그인 하시고,
왼쪽의 메뉴들을 훑어보시면, 'SEO 보고서' 라는 메뉴가 있습니다.
'SEO 보고서'를 눌러주세요.


Microsoft Bing - SEO(Search Engine Optimization) 검색 엔진 최적화






이 페이지에는 검색된 전체 웹 사이트에서 발견된 모든 오류의 집계된 수와 오류가 포함된 총 페이지가 포함됩니다. 오류는 SEO 모범 사례를 따르지 않는 경우입니다. 모든 오류 유형 목록과 오류 심각도 및 이 오류가 포함된 페이지 수를 표에 볼 수 있습니다. 오류 유형을 클릭하면 오류 세부 정보 페이지로 이동합니다.


위와 같이 SEO (Search Enging Optimization)의 보고서 내용들이 보여집니다.
중요한 것은 '오류 세부 정보'입니다.


SEO 오류 유형, 심각도, 페이지 수의 정보를 확인하실 수 있습니다.


이 페이지에는 개별 오류에 대한 세부 정보가 표시됩니다.
● 심각도 - 오류의 심각도는 높음, 중간 또는 낮음으로 페이지 순위에 영향을 미칠 수 있습니다.
● 오류가 있는 페이지 - 검색된 웹 사이트의 페이지 수, 이 오류가 있습니다.
● 총 오류 수 - 웹 사이트에서 검색된 모든 페이지에서 발생한 총 오류 수입니다.

※ 권장 조치
이 섹션에서는 이 오류에 대한 해결 세부 정보와 관련 있는 경우 예제를 포함하여 해결의 중요성을 설명합니다.

※ 오류가 있는 페이지
이 섹션에는 마지막 검색 중에 선택한 SEO 모범 사례를 준수하지 않은 최대 50페이지 목록이 포함되어 있습니다.

Microsoft Excel과 같은 여러 프로그램에서 데이터를 보려면 Download all 버튼을 클릭하여 데이터를 CSV 파일로 내보낼 수 있습니다.


 


위의 설명에서처럼 오류의 심각도에 따라서 해결해주시면 되겠습니다.


SEO (Search Enging Optimization)의 보고서의 오류 세부 정보


    

  • 페이지에 <h1>태그가 여러 개 있습니다. 《심각도 : 높음》
    • 

  • 페이지의 head 섹션에 설명이 없습니다. 《심각도 : 높음》
    • 

  • 설명이 너무 짧거나 너무 깁니다. 《심각도 : 높음》
    • 

  • <img> 태그에 ALT 속성 내용이 정의되지 않았습니다. 《심각도 : 낮음》
    • 

  • HTML의 평가된 크기는 125kb 이상으로 예상되고 완벽하게 캐시되지 않을 위험이 있습니다. 《심각도 : 낮음》
    • 



위에서 제시된 SEO 보고서에서의 오류들을 하나씩 해결해봅니다.


 


페이지에 <h1>태그가 여러 개 있습니다. 《심각도 : 높음》


※ 권장 작업
하나의 <h1> 태그만 존재하도록 페이지 소스에서 중복하는 <h1> 태그를 제거하세요.

♣♣♣ 이 페이지들에는 2개 이상의 <h1> 태그가 있습니다. 다수의 <h1> 헤더 태그는 검색 엔진 봇과 웹 사이트 사용자에게 혼란을 줄 수 있습니다. 페이지당 하나의 <h1> 태그만 사용하는 것이 좋습니다.


위에서 설명한 것처럼
한 페이지에 <h1> 헤더 태그는 하나씩만 존재해야 검색 엔진 봇과 웹사이트 사용자에게 혼란을 주지 않습니다.


내 블로그 글의 한페이지에 <h1> 태그가 몇개가 존재하는지 확인하는 방법. (구글 크롬 브라우저 기준)


    

  • 검색엔진을 통해 검색된 글이 관리자 페이지를 통해 보여지지 않도록 블로그를 로그아웃 해줍니다.
    • 

  • 검색엔진에서 내 블로그 글을 검색하고, 내 블로그 글을 클릭해줍니다.
    • 

  • 기능키 F12 키를 눌러서 구글 크롬 개발자도구를 실행합니다.
    • 

  • 기능키 F1 키를 눌러서 General Settings를 열어줍니다.
    • 

  • Debugger의 'Disable JavaScript' 항목을 체크해서 마우스 우클릭 제한을 해제해줍니다.
    • 



블로그 글에서 마우스 우클릭 제한 해제 후 소스보기~




소스보기 창에서 Ctrl+F키를 눌러서 '<h1' 태그 찾기






 


위에서 확인하신 것은
검색엔진을 통해서 검색된 내 블로그 글의 소스보기를 통해서 '<h1>' 태그의 사용 현황을 확인하신 것이구요.
모바일/웹에 따라서 해당 글의 소스보기 내용은 달라질 수 있습니다.


따라서, 원천적인 해결 방법은
티스토리 블로그의 '스킨 편집'을 통해서 스킨의 'html편집' 기능으로 '<h1>' 태그를 찾아주고, 해결해주는 것입니다.


※※※ 주의하실 점 ※※※
아래의 스킨 HTML/CSS의 소스와 수정작업은 제가 티스토리에 적용한 스킨에 대한 것으로 블로거님들의 스킨에 따라서 HTML/CSS의 소스가 다를 수 있음을 인지하시기 바랍니다.
따라서, 블로거님의 스킨마다 HTML/CSS 수정사항은 다르다!!!

다음과 같이 블로그 글에서 
""에 h1 태그가 사용 된 부분이 1개만 있으면 되다는 것!!
<h1></h1>






 






 


아래의 코드들이 블로그 제목에 대한 소스입니다.
<div class="post-cover">로 쌓여 있으며
블로그 제목을 나타내는 <h1></h1> 이 있습니다.
이 부분의 <h1>태그를 제외하고는 모두 h2 태그로 바꿀거에요.
그렇게 한 후에 <h2> 태그에 대한 정의를 css에 수정/추가해줄거구요.


<s_page_rep>
	<div class="post-cover">
		<div class="inner">
			<h1></h1>
			<span class="meta">
				<span class="author">by </span>
				<span class="date"></span>
			</span>
		</div>
	</div>
	<div class="entry-content">
		
	</div>
</s_page_rep>


 


<s_notice_rep>
	<div class="post-cover notice"<s_notice_rep_thumbnail> style="background-image: url();"</s_notice_rep_thumbnail>>
		<div class="inner">
			<!-- Edited : h1 tag >>>> h2 tag.  -->
			<h2><a href=""></a></h2>
			<span class="meta">
				<span class="date"></span>
			</span>
		</div>
	</div>
	<div class="entry-content">
		
	</div>
</s_notice_rep>


 


<s_list>
	
<!-- Kakao AdFit 상단 광고 start -->

<!-- Kakao AdFit 상단 광고 end -->
	
	<div class="post-header">
		<!-- Edited : h1 tag >>>> h2 tag.  -->
		<h2><span></span><em></em></h2>
	</div>


 


<s_tag>
	<div class="post-header">
		<!-- Edited : h1 tag >>>> h2 tag.  -->
		<h2>태그</h2>
	</div>
	<div class="tags">
		<s_tag_rep>
			<a href=""></a>
		</s_tag_rep>
	</div>
</s_tag>


 


<s_guest>
	<div class="comments">
		<div class="post-header">
			<!-- Edited : h1 tag >>>> h2 tag.  -->
			<h2>방명록</h2>
		</div>

		<s_guest_input_form>


 


스킨의 HTML  수정 완료 후 <h1> 태그


 


<s_page_rep>
	<div class="post-cover">
		<div class="inner">
			<h1></h1>
			<span class="meta">
				<span class="author">by </span>
				<span class="date"></span>
			</span>
		</div>
	</div>
	<div class="entry-content">
		
	</div>
</s_page_rep>


 


<s_permalink_article_rep>
	<div class="post-cover"<s_article_rep_thumbnail> style="background-image:url()"</s_article_rep_thumbnail>>
		<div class="inner">
			<span class="category"></span>
			<!-- ※※※ Edited : h2 tag >>>> h1 tag. ※※※ -->
			<h1></h1>
			<span class="meta">
				<span class="author">by </span>
				<span class="date"></span>
				<s_ad_div>
					<a href="">수정</a>
					<a href="#" onclick="">삭제</a>
				</s_ad_div>
			</span>
		</div>
	</div>


 


스킨의 CSS 편집하기


/* Edited : h1 tag >>>> h2 tag. */
#header h2 {
	padding: 23px 0 ;
	font-family: 'Nanum Myeongjo';
	font-weight: 800;
	font-size: 1.75em;
	line-height: 32px;
	letter-spacing: -0.2px;
	color: #333;
}
#header h2 a {
	display: inline-block;
	height: 32px;
	text-decoration: none;
	color: #333;
	vertical-align: top;
}
#header h2 img {
	width: auto;
	height: 32px;
}


 


/* Edited : h1 tag >>>> h2 tag. */
#tt-body-index .post-cover.notice h2 {
	margin: 0;
	font-size: 1.6875em;
	line-height: 1.5;
	color: #000;
}
#tt-body-index .post-cover.notice h2 a {
	color: #000;
}


 


.post-header {padding-top: 4px;}
.post-header h1 {
	margin-bottom: 18px;
	font-size: 1em;
	line-height: 1.375;
}
/* added : .post-header h2 css */
.post-header h2 {
	margin-bottom: 18px;
	font-size: 1em;
	line-height: 1.375;
}
#tt-body-archive .post-header span:before {content: "'";}
#tt-body-archive .post-header span:after {content: "' 에 등록된 글";}
#tt-body-tag .post-header span:before {content: "#";}
#tt-body-search .post-header span:before {content: "'";}
#tt-body-search .post-header span:after {content: "'의 검색결과";}

.post-header h1 em {
	margin-left: 7px;
	font-style: normal;
	color: #04beb8;
}
/* added : .post-header h2 em css */
.post-header h2 em {
	margin-left: 7px;
	font-style: normal;
	color: #04beb8;
}


 


.list-type-thumbnail .post-header h1 {
	margin-bottom: 0;
}
/* added : .list-type-thumbnail .post-header h2 css */
.list-type-thumbnail .post-header h2 {
	margin-bottom: 0;
}


 


.list-type-text .post-header h1 {
	margin-bottom: 0;
}
/* added : .list-type-text .post-header h2 css */
.list-type-text .post-header h2 {
	margin-bottom: 0;
}


 


스킨 HTML/CSS 수정 적용


아래와 같은 순서로 스킨의 HTML/CSS를 수정하시고,
적용하신 다음에 '새로고침'을 통해서 확인하세요.






 






티스토리 스킨의 HTML/CSS의 소스 수정이 필요한 부분들이 여러군데라서 글이 길어졌네요.
여기까지 잘 따라하셨길 바랍니다.




페이지의 head 섹션에 설명이 없습니다. 《심각도 : 높음》


※ 권장 작업
페이지 소스의 <head> 섹션에 설명을 추가하세요: <meta name='description' content='페이지 콘텐츠에 관한 설명적이고 키워드가 풍부한 텍스트를 여기에 삽입하세요.'>.

예)
<head>
    <meta name='description' content='Descriptive, 페이지 콘텐츠에 대해 설명하는 키워드가 풍부한 텍스트가 여기에 표시됩니다.'>
</head>


♣♣♣ 검색 엔진은 <description> 태그 내의 설명만 검색 엔진 결과 페이지(SERP)에 사용할 수 있습니다. 페이지 콘텐츠를 반영하고 검색자의 의도에 관련 있도록 설명을 잘 작성하면 검색 시 사용자 페이지의 클릭률이 향상하여 트래픽이 증가합니다.


 


오류가 있는 페이지... 를 보여주는데 티스토리 관리자 페이지네요. ^^;






티스토리에서 블로그 글의 <head> 섹션에 설명은 자동으로 생성됩니다.


<meta name="description" content="윈도우 10 동영상 녹화 기능 (게임 동영상/화면 녹화, 캡처)  윈도우 10에는 유용한 동영상 녹화 기능이 있습니다. 많은 분들이 게임을 즐겨하시고, 자신의 플레이 영상을 녹화하고 싶은 욕구가 있죠. 그럴 경우에..">


 


Meta tag가 필요한 경우에는
티스토리 관리자 페이지에서 "플러그인" 메뉴를 클릭한 후
Meta Tag의 필요한 속성을 추가해줍니다.






 




설명이 너무 짧거나 너무 깁니다. 《심각도 : 높음》


권장 작업
페이지 소스 내 <meta description> 태그의 설명 길이를 25~160자 사이로 변경하세요.

♣♣♣ 검색 엔진 크롤러는 검사 결과 페이지에서 첫 150-160자만 표시하므로 설명이 너무 길면 검색자가 일부 텍스트를 보지 못할 수 있습니다. 설명이 너무 짧으면 검색 엔진은 페이지의 다른 곳에서 찾은 텍스트를 추가할 수도 있습니다. 검색 엔진은 사용자의 검색에 더 적합하다고 판단되면 사용자가 작성한 내용의 다른 설명을 표시할 수도 있습니다.


 


음... 티스토리에서는 Meta Tag의 Description을 자동으로 만들어 준다고 말씀드렸죠?
네. 맞아요.
티스토리가 자동으로 만들어줍니다.
제가 너무 짧은 것을 찾아보니
사진만 올린 경우이고,
너무 길다고 한 부분은 SEO에서 얘기하는 
<meta description> 태그의 설명 길이가 25 ~ 160자를 넘지 않는데도 오류로 보고한 것으로 보입니다.
설명글이 길다고 하는 부분은 어떻게 해야할지 보류합니다.


설명글이 25자 이내인 것은
 해당 블로그 글에 설명을 추가하는 것으로 해결 됩니다.




<img> 태그에 ALT 속성 내용이 정의되지 않았습니다. 《심각도 : 낮음》


권장 작업
<img alt> 특성을 사용하여 이미지에 대해 설명적인 콘텐츠를 작성하세요: <img source='pic.gif' alt='이미지를 표현하는 정확하고 설명적인 키워드 텍스트.' />.

♣♣♣ 일반적인 원칙상 검색 엔진은 이미지 파일의 콘텐츠를 해석하지 않습니다. <img alt> 특성은 사이트 소유자가 검색 엔진과 최종 사용자에게 관련 정보를 제공할 수 있도록 합니다. Alt 텍스트는 최종 사용자가 이미지 사용을 비활성화하였거나 이미지가 제대로 로드되지 않는 경우 유용합니다. 또한, Alt 텍스트는 화면 읽기 프로그램에 사용됩니다. Alt 텍스트가 설명적이고 이미지가 표현하는 것을 정확하게 반영하는지, 페이지의 콘텐츠를 지원하는지 확인합니다.


위에서 설명한 것처럼
이미지 태그의 alt 속성에 설명이 없을때 오류로 보고됩니다.
심각도가 낮기 때문에 필수적으로 할 필요는 없어 보입니다.


하지만,
검색 엔진 최적화의 블로그 글을 원하신다면
블로그 글에 들어가는 이미지마다 설명을 달아주시면 되겠습니다.
아래 이미지에서처럼요.


위의 이미지는 갤럭시 워치 4의 이미지에 설명을 추가한 것으로, 이미지의






음... 이 부분도 티스토리에서는 좀 특이한 방법으로 블로그를 발행하는 것 같아요.
위의 이미지에 대한 소스보기를 해보면 아래와 같이 나와요.
img태그에 alt 속성이 포함이 안되죠?
이건 더 알아봐야겠어요. ^^;;;


<p>
<figure class='imageblock alignCenter' data-origin-width='251' data-origin-height='300' data-ke-mobilestyle='alignCenter'>
  <span data-url='https://blog.kakaocdn.net/dn/tLsms/btrxiuCoOdW/0BpVEBef3PYBfR81wJZd5K/img.jpg' data-lightbox='lightbox' data-alt='Samsung Galaxy Watch 4 클래식 실버 색상'>
    <img src='https://blog.kakaocdn.net/dn/tLsms/btrxiuCoOdW/0BpVEBef3PYBfR81wJZd5K/img.jpg' srcset='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtLsms%2FbtrxiuCoOdW%2F0BpVEBef3PYBfR81wJZd5K%2Fimg.jpg' width='241' height='288' data-ke-mobilestyle='alignCenter' />
  </span>
  <figcaption>Samsung Galaxy Watch 4 클래식 실버 색상</figcaption>
</figure>
</p>


 




HTML의 평가된 크기는 125kb 이상으로 예상되고 완벽하게 캐시되지 않을 위험이 있습니다. 《심각도 : 낮음》


권장 작업
페이지 원본의 페이지 상단에 다량의 CSS 또는 코드가 있지 않은지 확인하세요. 코드와 스타일을 다른 파일에 옮기는 것을 고려해 보세요.

♣♣♣ 페이지에 코드가 많이 포함되어 있으면 검색 엔진이 페이지 콘텐츠를 전부 획득하지는 못할 수 있습니다. 관련 없는 코드는 페이지 소스에서 콘텐츠를 아래로 밀어내어 검색 엔진 크롤러가 접근하기 어렵게 만들 수 있습니다. 크롤러에 의해 캐시될 페이지 소스에서 모든 콘텐츠 및 링크가 사용되도록 125KB의 소프트 제한이 사용됩니다. 이는 기본적으로, 페이지가 너무 크면 검색 엔진이 콘텐츠의 일부를 가져오지 못하거나 완전히 캐싱하지 못할 수 있음을 의미합니다.


음.. 이 부분의 티스토리에서 블로그 글을 만들어낼때 css 또는 코드가 많은 경우에 발생하는가봐요.
이것도 쉽게 수정하기 어려운 부분이네요.
CSS 코드나 스타일을 다른 파일로 옮기는 작업을 고려해보라고 하는데 쉽지 않은 부분이죠.
혹시.. 가능하신 분은 위의 '권장 작업'을 따라해보세요.


그리고, 공유해주시면 참고하겠습니다. ^^




사이트 검사 / 스캔하기


SEO 문제를 모두 해결하셨나요?
그렇다면...새롭게 사이트 검사를 진행해볼까요?
아래 이미지를 따라해보세요.










아래의 문제들은
사이트 검사를 통해 스캔한 이후의 결과 값들에 대한 문제들에 대한 설명과 해결 방법입니다.
SEO보고서와 비교해서 살펴보시고,
조치할 수 있는 것들은 조치해주시는게 검색엔진 최적화에 좋습니다.


HTTP 400~499 오류 《오류》


※무엇에 관한 문제입니까?
이 페이지들에는 400~499 HTTP 상태 코드가 포함되어 있습니다. HTTP 상태 200을 보장하면 SERP 성능을 개선하고 사용자 트래픽을 확보할 수 있습니다.

※ 어떻게 수정하나요?
사이트를 업데이트하면 이 오류들이 포함된 URL을 수정할 수 있습니다.


 


이미지가 누락된 경우의 Alt 특성 《경고》


※무엇에 관한 문제입니까?
<img> 태그에 ALT 특성이 정의되어 있지 않습니다. 일반적인 원칙상 검색 엔진은 이미지 파일의 콘텐츠를 해석하지 않습니다. <img alt> 특성은 사이트 소유자가 검색 엔진과 최종 사용자에게 관련 정보를 제공할 수 있도록 합니다. Alt 텍스트는 최종 사용자가 이미지 사용을 비활성화하였거나 이미지가 제대로 로드되지 않는 경우 유용합니다. 또한, Alt 텍스트는 화면 읽기 프로그램에 사용됩니다. Alt 텍스트가 설명적이고 이미지가 표현하는 것을 정확하게 반영하는지, 페이지의 콘텐츠를 지원하는지 확인합니다.

※어떻게 수정하나요?
<img alt> 특성을 사용하여 이미지에 대해 설명적인 콘텐츠를 작성하세요: <img source='pic.gif' alt='이미지를 표현하는 정확하고 설명적인 키워드 텍스트.' />


 


너무 길거나 짧은 Meta Description 《경고》


※무엇에 관한 문제입니까?
설명이 너무 짧거나 너무 깁니다. 검색 엔진 크롤러는 검사 결과 페이지에서 첫 150-160자만 표시하므로 설명이 너무 길면 검색자가 일부 텍스트를 보지 못할 수 있습니다. 설명이 너무 짧으면 검색 엔진은 페이지의 다른 곳에서 찾은 텍스트를 추가할 수도 있습니다. 검색 엔진은 사용자의 검색에 더 적합하다고 판단되면 사용자가 작성한 내용의 다른 설명을 표시할 수도 있습니다.

※어떻게 수정하나요?
페이지 소스 내 <meta description> 태그의 설명 길이를 25~160자 사이로 변경하세요.


 


너무 짧은 제목 《경고》


※무엇에 관한 문제입니까?
이 페이지의 제목 길이가 15자 미만입니다. 제목이 너무 짧으면, 페이지의 관련성을 이해하는 데 필요한 정보를 당사와 사용자에게 충분히 제공하지 못할 수 있습니다.

※어떻게 수정하나요?
<title> 태그 안에 더 많은 설명 내용을 추가합니다. 페이지 내용을 잘 설명하도록 고유성과 관련성을 높입니다. 제목 태그 관련 키워드 아이디어를 찾으려면 키워드 연구 도구를 사용하세요.


 


너무 긴 제목 《경고》


※무엇에 관한 문제입니까?
이 페이지의 제목 길이가 70자 이상입니다. 제목이 너무 길면 검색 엔진에서 제목이 잘리거나 무시될 수 있습니다. 제목의 관련성을 유지하고 너무 길지 않도록 하세요.

※어떻게 수정하나요?
제목 길이를 70자 미만으로 변경하세요. 페이지 내용을 잘 설명하도록 고유성과 관련성을 높이세요. 제목 태그 관련 키워드 아이디어를 찾으려면 키워드 연구 도구를 사용하세요.


 


Html 길이가 너무 깁니다. 《경고》


※무엇에 관한 문제입니까?
HTML의 평가된 크기는 125kb보다 클 것으로 예상되고 완벽하게 캐시되지 않을 위험이 있습니다. 페이지에 코드가 많이 포함되어 있으면 검색 엔진이 페이지 콘텐츠를 전부 획득하지는 못할 수 있습니다. 관련 없는 코드는 페이지 소스에서 콘텐츠를 아래로 밀어내어 검색 엔진 크롤러가 접근하기 어렵게 만들 수 있습니다. 크롤러에 의해 캐시될 페이지 소스에서 모든 콘텐츠 및 링크가 사용되도록 125KB의 소프트 제한이 사용됩니다. 이는 기본적으로, 페이지가 너무 크면 검색 엔진이 콘텐츠의 일부를 가져오지 못하거나 완전히 캐싱하지 못할 수 있음을 의미합니다.

※어떻게 수정하나요?
페이지 원본의 페이지 상단에 다량의 CSS 또는 코드가 있지 않은지 확인하세요. 코드와 스타일을 다른 파일에 옮기는 것을 고려해 보세요.


 


H1 태그 누락 《알림》


※무엇에 관한 문제입니까?
<h1> 태그가 누락되었습니다. <h1> 태그는 Bingbot 및 웹 방문자에게 본문의 주요 테마 또는 주제가 무엇인지를 나타냅니다. <h1> 태그는 제목, 설명 및 본문의 핵심 키워드를 강화합니다. <h1> 태그는 콘텐츠를 반영하는 키워드를 포함하고 길이는 약 150자를 넘지 않는 것이 좋습니다.

※어떻게 수정하나요?
<h1> 태그를 사용하여 페이지에 헤더를 추가하고 페이지 소스의 <body> 내에 배치하세요.


 


2개 이상의 h1 태크 《알림》


※무엇에 관한 문제입니까?
이 페이지들에는 2개 이상의 <h1> 태그가 있습니다. 다수의 <h1> 헤더 태그는 검색 엔진 봇과 웹 사이트 사용자에게 혼란을 줄 수 있습니다. 페이지당 하나의 <h1> 태그만 사용하는 것이 좋습니다.

※어떻게 수정하나요?
하나의 <h1> 태그만 존재하도록 페이지 소스에서 중복하는 <h1> 태그를 제거하세요.


 


글이 많이 길어졌는데...
본인에게 필요하신 부분만 살펴보시고, 적용해보세요.
긴 글 따라하신다고 수고 많으셨습니다.

                    
        

  

    
728x90

    
    
  



        

                            
        






        







	</div>
</s_page_rep>

 

<s_permalink_article_rep>
	<div class="post-cover"<s_article_rep_thumbnail> style="background-image:url(https://blog.kakaocdn.net/dn/cyJuMd/btrKGP1K4Jq/aa4SqFhsEdNcxfzTRWwtM0/img.png)"</s_article_rep_thumbnail>>
		<div class="inner">
			<span class="category">IT/모바일</span>
			<!-- ※※※ Edited : h2 tag >>>> h1 tag. ※※※ -->
			<h1>티스토리. 검색엔진 최적화 하기 (Bing 웹마스터 도구. feat : SEO)</h1>
			<span class="meta">
				<span class="author">by 버들도령</span>
				<span class="date">2022. 8. 29.</span>
				<s_ad_div>
					<a href="">수정</a>
					<a href="#" onclick="">삭제</a>
				</s_ad_div>
			</span>
		</div>
	</div>

 

스킨의 CSS 편집하기

/* Edited : h1 tag >>>> h2 tag. */
#header h2 {
	padding: 23px 0 ;
	font-family: 'Nanum Myeongjo';
	font-weight: 800;
	font-size: 1.75em;
	line-height: 32px;
	letter-spacing: -0.2px;
	color: #333;
}
#header h2 a {
	display: inline-block;
	height: 32px;
	text-decoration: none;
	color: #333;
	vertical-align: top;
}
#header h2 img {
	width: auto;
	height: 32px;
}

 

/* Edited : h1 tag >>>> h2 tag. */
#tt-body-index .post-cover.notice h2 {
	margin: 0;
	font-size: 1.6875em;
	line-height: 1.5;
	color: #000;
}
#tt-body-index .post-cover.notice h2 a {
	color: #000;
}

 

.post-header {padding-top: 4px;}
.post-header h1 {
	margin-bottom: 18px;
	font-size: 1em;
	line-height: 1.375;
}
/* added : .post-header h2 css */
.post-header h2 {
	margin-bottom: 18px;
	font-size: 1em;
	line-height: 1.375;
}
#tt-body-archive .post-header span:before {content: "'";}
#tt-body-archive .post-header span:after {content: "' 에 등록된 글";}
#tt-body-tag .post-header span:before {content: "#";}
#tt-body-search .post-header span:before {content: "'";}
#tt-body-search .post-header span:after {content: "'의 검색결과";}

.post-header h1 em {
	margin-left: 7px;
	font-style: normal;
	color: #04beb8;
}
/* added : .post-header h2 em css */
.post-header h2 em {
	margin-left: 7px;
	font-style: normal;
	color: #04beb8;
}

 

.list-type-thumbnail .post-header h1 {
	margin-bottom: 0;
}
/* added : .list-type-thumbnail .post-header h2 css */
.list-type-thumbnail .post-header h2 {
	margin-bottom: 0;
}

 

.list-type-text .post-header h1 {
	margin-bottom: 0;
}
/* added : .list-type-text .post-header h2 css */
.list-type-text .post-header h2 {
	margin-bottom: 0;
}

 

스킨 HTML/CSS 수정 적용

아래와 같은 순서로 스킨의 HTML/CSS를 수정하시고,
적용하신 다음에 '새로고침'을 통해서 확인하세요.

 

티스토리 스킨의 HTML/CSS의 소스 수정이 필요한 부분들이 여러군데라서 글이 길어졌네요.
여기까지 잘 따라하셨길 바랍니다.

페이지의 head 섹션에 설명이 없습니다. 《심각도 : 높음》
※ 권장 작업
페이지 소스의 <head> 섹션에 설명을 추가하세요: <meta name='description' content='페이지 콘텐츠에 관한 설명적이고 키워드가 풍부한 텍스트를 여기에 삽입하세요.'>.

예)
<head>
    <meta name='description' content='Descriptive, 페이지 콘텐츠에 대해 설명하는 키워드가 풍부한 텍스트가 여기에 표시됩니다.'>
</head>


♣♣♣ 검색 엔진은 <description> 태그 내의 설명만 검색 엔진 결과 페이지(SERP)에 사용할 수 있습니다. 페이지 콘텐츠를 반영하고 검색자의 의도에 관련 있도록 설명을 잘 작성하면 검색 시 사용자 페이지의 클릭률이 향상하여 트래픽이 증가합니다.

 

오류가 있는 페이지... 를 보여주는데 티스토리 관리자 페이지네요. ^^;

티스토리에서 블로그 글의 <head> 섹션에 설명은 자동으로 생성됩니다.

<meta name="description" content="윈도우 10 동영상 녹화 기능 (게임 동영상/화면 녹화, 캡처)  윈도우 10에는 유용한 동영상 녹화 기능이 있습니다. 많은 분들이 게임을 즐겨하시고, 자신의 플레이 영상을 녹화하고 싶은 욕구가 있죠. 그럴 경우에..">

 

Meta tag가 필요한 경우에는
티스토리 관리자 페이지에서 "플러그인" 메뉴를 클릭한 후
Meta Tag의 필요한 속성을 추가해줍니다.

 

설명이 너무 짧거나 너무 깁니다. 《심각도 : 높음》
권장 작업
페이지 소스 내 <meta description> 태그의 설명 길이를 25~160자 사이로 변경하세요.

♣♣♣ 검색 엔진 크롤러는 검사 결과 페이지에서 첫 150-160자만 표시하므로 설명이 너무 길면 검색자가 일부 텍스트를 보지 못할 수 있습니다. 설명이 너무 짧으면 검색 엔진은 페이지의 다른 곳에서 찾은 텍스트를 추가할 수도 있습니다. 검색 엔진은 사용자의 검색에 더 적합하다고 판단되면 사용자가 작성한 내용의 다른 설명을 표시할 수도 있습니다.

 

음... 티스토리에서는 Meta Tag의 Description을 자동으로 만들어 준다고 말씀드렸죠?
네. 맞아요.
티스토리가 자동으로 만들어줍니다.
제가 너무 짧은 것을 찾아보니
사진만 올린 경우이고,
너무 길다고 한 부분은 SEO에서 얘기하는
<meta description> 태그의 설명 길이가 25 ~ 160자를 넘지 않는데도 오류로 보고한 것으로 보입니다.
설명글이 길다고 하는 부분은 어떻게 해야할지 보류합니다.

설명글이 25자 이내인 것은
해당 블로그 글에 설명을 추가하는 것으로 해결 됩니다.

<img> 태그에 ALT 속성 내용이 정의되지 않았습니다. 《심각도 : 낮음》
권장 작업
<img alt> 특성을 사용하여 이미지에 대해 설명적인 콘텐츠를 작성하세요: <img source='pic.gif' alt='이미지를 표현하는 정확하고 설명적인 키워드 텍스트.' />.

♣♣♣ 일반적인 원칙상 검색 엔진은 이미지 파일의 콘텐츠를 해석하지 않습니다. <img alt> 특성은 사이트 소유자가 검색 엔진과 최종 사용자에게 관련 정보를 제공할 수 있도록 합니다. Alt 텍스트는 최종 사용자가 이미지 사용을 비활성화하였거나 이미지가 제대로 로드되지 않는 경우 유용합니다. 또한, Alt 텍스트는 화면 읽기 프로그램에 사용됩니다. Alt 텍스트가 설명적이고 이미지가 표현하는 것을 정확하게 반영하는지, 페이지의 콘텐츠를 지원하는지 확인합니다.

위에서 설명한 것처럼
이미지 태그의 alt 속성에 설명이 없을때 오류로 보고됩니다.
심각도가 낮기 때문에 필수적으로 할 필요는 없어 보입니다.

하지만,
검색 엔진 최적화의 블로그 글을 원하신다면
블로그 글에 들어가는 이미지마다 설명을 달아주시면 되겠습니다.
아래 이미지에서처럼요.

위의 이미지는 갤럭시 워치 4의 이미지에 설명을 추가한 것으로, 이미지의

음... 이 부분도 티스토리에서는 좀 특이한 방법으로 블로그를 발행하는 것 같아요.
위의 이미지에 대한 소스보기를 해보면 아래와 같이 나와요.
img태그에 alt 속성이 포함이 안되죠?
이건 더 알아봐야겠어요. ^^;;;

<p>
<figure class='imageblock alignCenter' data-origin-width='251' data-origin-height='300' data-ke-mobilestyle='alignCenter'>
  <span data-url='https://blog.kakaocdn.net/dn/tLsms/btrxiuCoOdW/0BpVEBef3PYBfR81wJZd5K/img.jpg' data-lightbox='lightbox' data-alt='Samsung Galaxy Watch 4 클래식 실버 색상'>
    <img src='https://blog.kakaocdn.net/dn/tLsms/btrxiuCoOdW/0BpVEBef3PYBfR81wJZd5K/img.jpg' srcset='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtLsms%2FbtrxiuCoOdW%2F0BpVEBef3PYBfR81wJZd5K%2Fimg.jpg' width='241' height='288' data-ke-mobilestyle='alignCenter' />
  </span>
  <figcaption>Samsung Galaxy Watch 4 클래식 실버 색상</figcaption>
</figure>
</p>

 

HTML의 평가된 크기는 125kb 이상으로 예상되고 완벽하게 캐시되지 않을 위험이 있습니다. 《심각도 : 낮음》
권장 작업
페이지 원본의 페이지 상단에 다량의 CSS 또는 코드가 있지 않은지 확인하세요. 코드와 스타일을 다른 파일에 옮기는 것을 고려해 보세요.

♣♣♣ 페이지에 코드가 많이 포함되어 있으면 검색 엔진이 페이지 콘텐츠를 전부 획득하지는 못할 수 있습니다. 관련 없는 코드는 페이지 소스에서 콘텐츠를 아래로 밀어내어 검색 엔진 크롤러가 접근하기 어렵게 만들 수 있습니다. 크롤러에 의해 캐시될 페이지 소스에서 모든 콘텐츠 및 링크가 사용되도록 125KB의 소프트 제한이 사용됩니다. 이는 기본적으로, 페이지가 너무 크면 검색 엔진이 콘텐츠의 일부를 가져오지 못하거나 완전히 캐싱하지 못할 수 있음을 의미합니다.

음.. 이 부분의 티스토리에서 블로그 글을 만들어낼때 css 또는 코드가 많은 경우에 발생하는가봐요.
이것도 쉽게 수정하기 어려운 부분이네요.
CSS 코드나 스타일을 다른 파일로 옮기는 작업을 고려해보라고 하는데 쉽지 않은 부분이죠.
혹시.. 가능하신 분은 위의 '권장 작업'을 따라해보세요.

그리고, 공유해주시면 참고하겠습니다. ^^

사이트 검사 / 스캔하기

SEO 문제를 모두 해결하셨나요?
그렇다면...새롭게 사이트 검사를 진행해볼까요?
아래 이미지를 따라해보세요.

아래의 문제들은
사이트 검사를 통해 스캔한 이후의 결과 값들에 대한 문제들에 대한 설명과 해결 방법입니다.
SEO보고서와 비교해서 살펴보시고,
조치할 수 있는 것들은 조치해주시는게 검색엔진 최적화에 좋습니다.

HTTP 400~499 오류 《오류》
※무엇에 관한 문제입니까?
이 페이지들에는 400~499 HTTP 상태 코드가 포함되어 있습니다. HTTP 상태 200을 보장하면 SERP 성능을 개선하고 사용자 트래픽을 확보할 수 있습니다.

※ 어떻게 수정하나요?
사이트를 업데이트하면 이 오류들이 포함된 URL을 수정할 수 있습니다.

 

이미지가 누락된 경우의 Alt 특성 《경고》
※무엇에 관한 문제입니까?
<img> 태그에 ALT 특성이 정의되어 있지 않습니다. 일반적인 원칙상 검색 엔진은 이미지 파일의 콘텐츠를 해석하지 않습니다. <img alt> 특성은 사이트 소유자가 검색 엔진과 최종 사용자에게 관련 정보를 제공할 수 있도록 합니다. Alt 텍스트는 최종 사용자가 이미지 사용을 비활성화하였거나 이미지가 제대로 로드되지 않는 경우 유용합니다. 또한, Alt 텍스트는 화면 읽기 프로그램에 사용됩니다. Alt 텍스트가 설명적이고 이미지가 표현하는 것을 정확하게 반영하는지, 페이지의 콘텐츠를 지원하는지 확인합니다.

※어떻게 수정하나요?
<img alt> 특성을 사용하여 이미지에 대해 설명적인 콘텐츠를 작성하세요: <img source='pic.gif' alt='이미지를 표현하는 정확하고 설명적인 키워드 텍스트.' />

 

너무 길거나 짧은 Meta Description 《경고》
※무엇에 관한 문제입니까?
설명이 너무 짧거나 너무 깁니다. 검색 엔진 크롤러는 검사 결과 페이지에서 첫 150-160자만 표시하므로 설명이 너무 길면 검색자가 일부 텍스트를 보지 못할 수 있습니다. 설명이 너무 짧으면 검색 엔진은 페이지의 다른 곳에서 찾은 텍스트를 추가할 수도 있습니다. 검색 엔진은 사용자의 검색에 더 적합하다고 판단되면 사용자가 작성한 내용의 다른 설명을 표시할 수도 있습니다.

※어떻게 수정하나요?
페이지 소스 내 <meta description> 태그의 설명 길이를 25~160자 사이로 변경하세요.

 

너무 짧은 제목 《경고》
※무엇에 관한 문제입니까?
이 페이지의 제목 길이가 15자 미만입니다. 제목이 너무 짧으면, 페이지의 관련성을 이해하는 데 필요한 정보를 당사와 사용자에게 충분히 제공하지 못할 수 있습니다.

※어떻게 수정하나요?
<title> 태그 안에 더 많은 설명 내용을 추가합니다. 페이지 내용을 잘 설명하도록 고유성과 관련성을 높입니다. 제목 태그 관련 키워드 아이디어를 찾으려면 키워드 연구 도구를 사용하세요.

 

너무 긴 제목 《경고》
※무엇에 관한 문제입니까?
이 페이지의 제목 길이가 70자 이상입니다. 제목이 너무 길면 검색 엔진에서 제목이 잘리거나 무시될 수 있습니다. 제목의 관련성을 유지하고 너무 길지 않도록 하세요.

※어떻게 수정하나요?
제목 길이를 70자 미만으로 변경하세요. 페이지 내용을 잘 설명하도록 고유성과 관련성을 높이세요. 제목 태그 관련 키워드 아이디어를 찾으려면 키워드 연구 도구를 사용하세요.

 

Html 길이가 너무 깁니다. 《경고》
※무엇에 관한 문제입니까?
HTML의 평가된 크기는 125kb보다 클 것으로 예상되고 완벽하게 캐시되지 않을 위험이 있습니다. 페이지에 코드가 많이 포함되어 있으면 검색 엔진이 페이지 콘텐츠를 전부 획득하지는 못할 수 있습니다. 관련 없는 코드는 페이지 소스에서 콘텐츠를 아래로 밀어내어 검색 엔진 크롤러가 접근하기 어렵게 만들 수 있습니다. 크롤러에 의해 캐시될 페이지 소스에서 모든 콘텐츠 및 링크가 사용되도록 125KB의 소프트 제한이 사용됩니다. 이는 기본적으로, 페이지가 너무 크면 검색 엔진이 콘텐츠의 일부를 가져오지 못하거나 완전히 캐싱하지 못할 수 있음을 의미합니다.

※어떻게 수정하나요?
페이지 원본의 페이지 상단에 다량의 CSS 또는 코드가 있지 않은지 확인하세요. 코드와 스타일을 다른 파일에 옮기는 것을 고려해 보세요.

 

H1 태그 누락 《알림》
※무엇에 관한 문제입니까?
<h1> 태그가 누락되었습니다. <h1> 태그는 Bingbot 및 웹 방문자에게 본문의 주요 테마 또는 주제가 무엇인지를 나타냅니다. <h1> 태그는 제목, 설명 및 본문의 핵심 키워드를 강화합니다. <h1> 태그는 콘텐츠를 반영하는 키워드를 포함하고 길이는 약 150자를 넘지 않는 것이 좋습니다.

※어떻게 수정하나요?
<h1> 태그를 사용하여 페이지에 헤더를 추가하고 페이지 소스의 <body> 내에 배치하세요.

 

2개 이상의 h1 태크 《알림》
※무엇에 관한 문제입니까?
이 페이지들에는 2개 이상의 <h1> 태그가 있습니다. 다수의 <h1> 헤더 태그는 검색 엔진 봇과 웹 사이트 사용자에게 혼란을 줄 수 있습니다. 페이지당 하나의 <h1> 태그만 사용하는 것이 좋습니다.

※어떻게 수정하나요?
하나의 <h1> 태그만 존재하도록 페이지 소스에서 중복하는 <h1> 태그를 제거하세요.

 

글이 많이 길어졌는데...
본인에게 필요하신 부분만 살펴보시고, 적용해보세요.
긴 글 따라하신다고 수고 많으셨습니다.

728x90
저작자표시

'IT > 모바일' 카테고리의 다른 글

아이폰 14 스펙, 색상, 출시일, 판매일, 가격 정보 알아보기 (Far Out)  (1) 2022.09.22
에어팟 프로 상태 표시등 알아보기 (AirPods Pro - Status light. 케이스 LED 램프)  (0) 2022.09.14
애드센스. 광고 크롤러 오류가 있으며, 이 때문에 수익 손실이 발생. 해결 방법  (0) 2022.08.26
갤럭시 워치 4 블루투스 vs LTE 장단점 비교해보기  (0) 2022.06.24
애플 워치 6 에서의 리콜 정보 확인 (빈 화면 문제)  (1) 2022.05.20

관련글

댓글

티스토리툴바