메타 태그 최적화는 사이트의 정보를 google, bing 등과 같은 검색 엔진에 제공하는 가장 좋은 방법입니다. 뿐만 아니라 메타 태그는 웹 사이트나 블로그에서 가장 기본적인 SEO 최적화 단계로 중요한 구성 요소 중 하나입니다.
메타 태그는 사이트 또는 블로그의
<head> 섹션에 작성된 HTML 코드로, 검색 엔진이나 소셜
미디어가 사이트의 전체 콘텐츠에 대한 요약된 정보를 찾는데 도움을 줍니다.
메타 태그는 얼마나 중요하나요?
특정 개인이나 독자를 위해 메타 태그가 설정되지 않은 경우 자신의 블로그가 검색 결과 상위에 표시되려면 사이트 또는 블로그의 구조에 메타 태그를 포함해야 합니다. 검색 결과에 표시되는 데이터는 대부분 메타 태그에서 가져온 것이라고 할 수 있습니다.
잘 구성된 완전한 형식의 메타 태그를 사용하면 검색 엔진은 사이트를 더 빠르게 색인화하고 검색 결과에서 상위에 노출될 가능성이 높아집니다.
메타 태그에는 무엇이 있나요?
가장 기본적인 메타 태그의 구성 요소는 사이트 제목, 설명, 키워드, 썸네일 이미지가 있으며 이들은 검색 엔진에 몇 가지 중요한 정보를 제공합니다.
위 4개의 데이터가 자신의 메타 태그에 이미 포함되어 있다면 검색 결과에서 사이트가 충분히 표시될 수 있습니다. 그러나 유사한 코드를 가진 수천 개의 다른 사이트가 더 있다면 그들과 경쟁할 수 있습니까? 남들과 똑같은 방식으로 메타 태그를 작성하지 않고 자신의 사이트에서 더 나은 품질의 콘텐츠를 제공할 수 있도록 메타 태그를 구현해야 합니다.
블로그 또는 웹 사이트의 메타 태그 품질을 개선하기 위한 방법은 메타 태그에 중요한 콘텐츠를 최대화 하는 것입니다. 그렇다면 사이트에 어떤 것을 추가해야 할까요?
오픈 그래프 (Open Graph)
대부분의 사이트 방문 트래픽은 검색 엔진 뿐만 아니라 소셜 미디어에서도 발생합니다. 이를 위해 Facebook , Twitter 등과 같은 소셜 미디어에 자신의 사이트 정보를 요약하여 제공하는 것도 중요합니다.
사이트 권한
사이트 관리자의 이름, 사이트 소유자의 정보, 웹 마스터 코드 등과 같은 사이트의 소유권 정보를 포함합니다.
로봇 메타 태그
이 메타 태그는 검색 엔진 로봇에게 더 자세한 정보를 제공하는 역할을 합니다. 일반적으로 이 메타 태그에 추가되는 내용은 사이트 언어, 사이트 위치 및 기타 여러 정보에 대한 내용입니다.
위에 소개된 모든 내용을 메타 태그에 적용할 경우 자신의 사이트가 검색 결과에서 높은 위치를 차지할 수 있으며 평소보다 빠르게 색인이 생성될 수 있습니다.
메타 태그는 어떻게 작성하나요?
메타 태그가 깔끔하게 정리 되어 있으면 검색 로봇에게 좋은 정보를 제공할 수 있을 뿐만 아니라 사이트 관리자가 쉽게 이해할 수 있습니다. 또한 사이트의 메타 태그 배열을 정리해두면 나중에 필요할 때 편집하거나 변경하기 쉬울 것입니다.
아래에서는 이 블로그에 사용된 2024년 최신 메타 태그 작성 방법을 공유합니다. 수정하기 쉽도록 깔끔하게 정리된 메타 태그이며 메타 태그를 쉽게 편집할 수 있도록 가이드도 제공합니다.
이 메타 태그를 사용해 본 경험에 따르면 아래의 메타 태그 덕분에 테마를 여러 번 변경해도 이 블로그 urliveblogger.blogspot.com의 검색 결과의 위치는 영향을 받지 않았습니다. 이 메타 태그가 완벽한 것이라고 말하는 것은 아니지만 적어도 제가 성공했다면 여러분도 성공할 수 있을 것이기 때문에 시도해 볼 가치가 있습니다.
사이트 또는 블로그의
<head> ... </ head> 섹션에 아래의 메타 태그 코드를
붙여 넣거나 이전에 사용하던 메타 태그를 아래의 메타 태그로 바꿉니다.
<b:if cond='data:view.isMultipleItems'>
<b:if cond='data:view.isHomepage'>
<!--[ Homepage title ]-->
<title><data:blog.title.escaped/></title>
<b:elseif cond='data:view.search.query'/>
<!--[ Search title ]-->
<title><data:messages.search/>: <data:view.search.query/></title>
<b:elseif cond='data:view.search.label'/>
<!--[ Label title ]-->
<title><data:blog.pageName.escaped/> - <data:blog.title.escaped/></title>
<b:elseif cond='data:view.isArchive'/>
<!--[ Archive title ]-->
<title>Blog archive in: <data:blog.pageName.escaped/></title>
<b:else/>
<title>Blog: <data:blog.title.escaped/></title>
</b:if>
<b:elseif cond='data:view.isError'/>
<!--[ Error title ]-->
<title>Error 404: Not found</title>
<b:else/>
<!--[ SingleItem title ]-->
<title><data:blog.pageName.escaped/> - <data:blog.title.escaped/></title>
</b:if>
<!--[ meta for browser ]-->
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=5' name='viewport'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<b:if cond='!data:view.isError'>
<!--[ Browser data, description and keyword ]-->
<link expr:href='data:blog.url.canonical' rel='canonical'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='description'/>
<b:elseif cond='data:view.isSingleItem'/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' name='description'/>
</b:if>
<meta expr:content='data:blog.title.escaped + ", " + data:blog.pageName.escaped + ", Add_your_addtional_keyword_here "' name='keywords'/>
<b:tag cond='data:view.isPost' expr:href='resizeImage(data:blog.postImageUrl, 0)' name='link' rel='image_src'/>
<!--[ Generator and RRS ]-->
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl.canonical path "feeds/posts/default"' expr:title='data:blog.title + " » Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl.canonical path "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " » Feed"' rel='alternate' type='application/rss+xml'/>
<link expr:href='data:blog.homepageUrl.canonical path "feeds/comments/default?alt=rss"' expr:title='data:blog.title + " » Comments Feed"' rel='alternate' type='application/rss+xml'/>
<!--[ Theme color ]-->
<meta content='#ffffff' name='theme-color'/>
<meta content='#ffffff' name='msapplication-navbutton-color'/>
<meta content='#ffffff' name='apple-mobile-web-app-status-bar-style'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>
<!--[ Favicon ]-->
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='120x120'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='152x152'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='shortcut icon' type='image/x-icon'/>
<!--[ Open graph ]-->
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title.escaped' property='og:site_name'/>
<b:if cond='data:view.isMultipleItems'>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' property='og:description'/>
</b:if>
<b:else/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:image:alt'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 0)' property='og:image'/>
<b:else/>
<meta content='Add_your_image_url_here' property='og:image'/>
</b:if>
<!--[ Twitter card ]-->
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:title'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<b:if cond='data:view.isMultipleItems'>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' name='twitter:description'/>
</b:if>
<b:else/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' name='twitter:description'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:image:alt'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 0)' name='twitter:image:src'/>
<b:else/>
<meta content='Add_your_image_url_here' name='twitter:image:src'/>
</b:if>
<!--[ Sife verification ]-->
<meta content='xxxxxxxxxxxxxxxxx_g' name='google-site-verification'/>
<meta content='xxxxxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxxxxxxxxxx' name='p:domain_verify'/>
<meta content='xxxxxxxxxxxxxxxxx' name='naver-site-verification'/>
<meta expr:content='data:blog.title.escaped' name='copyright'/>
</b:if>
사용 설명
위의 메타 태그를 사이트에 복사하여 붙여 넣기 전에 표시된 부분을 이전에 사용했던 메타 태그의 정보로 변경해야 합니다.
블로그 제목
먼저 <title> 태그는 검색 결과에 블로그의 특정 페이지의
제목을 표시하는 역할을 합니다. 예를 들어 새 글이 게시되면 글의 제목이 이
코드에 의해 자동으로 작성됩니다. 검색 결과에서 표시된 모습은 아래 이미지에서
볼 수 있습니다.
이 태그에 포함된 조건 및 규칙은 다음과 같습니다.
404 오류 페이지의 제목
기본적으로 404 오류 페이지 제목은 Error 404: Page Not Found이며 다른
제목으로 바꿀 수 있습니다. 예를 들면 Sorry! Page Not Found와 같이 바꿀
수 있습니다.
홈페이지의 제목
사이트의 홈페이지 제목을 표시합니다. 이 코드를 변경하여 다음과 같이 다른
문장을 검색 결과에 추가할 수 있습니다. "블로그 제목 :
홈페이지 제작, 웹 호스팅, 번역."
<!--[ Homepage title ]-->
<title><data:blog.title.escaped/> : subtite</title>
결과는 아래의 이미지와 같습니다.
간단해 보이지만 사이트의 키워드 타겟팅에 영향을 줄 수 있습니다.
게시물 페이지 및 정적 페이지의 제목
게시물 페이지 제목과 정적 페이지를 표시하면 기본값으로 블로그 게시물의 제목만
표시되지만, 블로그의 키워드로 블로그 제목을 추가하는 블로그도 있습니다. 예를
들면 다음과 같습니다.
Blogger 반응형 테마 템플릿 7 가지 - 구글 블로그 만들기
위와 같이 블로그 제목을 변경하기 위한 게시물의 제목 메타 태그 코드는 다음과 같습니다.
<!--[ SingleItem title ]-->
<title><data:blog.pageName.escaped/> - <data:blog.title.escaped/></title>
위의 대시 - 기호를 . 또는 |와 같이
기호를 변경할 수 있습니다.
색인 페이지 제목
블로거에서 URL 주소에 /search으로 표시된 색인 페이지 (홈페이지,
게시물 및 정적 페이지 제외)에 제목을 표시합니다. 다음을 포함하여 블로그의
각각의 색인 페이지에 다른 제목을 표시하기 위한 4가지 조건이 있습니다.
Search: search query - 블로그에 검색 페이지의 제목을 표시하면 사용자가 작성한 모든 키워드가 이 제목에 자동으로 표시되며 이 줄에서 Search Results: 또는 다른 단어와 같은 다른 단어로 Search: 단어를 변경할 수도 있습니다. 여기에서 이 코드를 구현한 예시를 볼 수 있습니다.
Label Name - Blog Title - 라벨 페이지의 제목을 표시하며, 사용자가 블로그에서 라벨 링크를 클릭하면 이 섹션이 제목으로 표시됩니다.
Blog Archive in: 3월 2024 - 이 섹션은 선택 사항으로 아카이브 기능을 활성화하거나 블로그에 위젯 아카이브를 추가하고 사용자가 블로그 아카이브 페이지를 클릭할 때 이 제목이 나타납니다.
Blog: Blog Title - 위의 모든 조건이 충족되지 않으면이 제목이 표시됩니다. 일반적으로 블로그에서 이전 게시물, 최신 게시물 버튼 또는 페이지 번호 버튼을 클릭하면 이 제목이 나타납니다.
대부분의 블로거는 이 페이지가 검색 결과에 나타나지 않도록 차단하지만 이 설정은 블로그 페이지 제목의 스타일을 더욱 예쁘게 꾸미기 위해 시도할 가치가 있습니다.
키워드 추가
Blogger의 키워드는 블로그 이름 및 페이지 제목과 함께 자동으로 작성되지만 대체 키워드를 추가할 수도 있습니다. 아래 코드를 찾아 표시된 부분을 쉼표로 구분하고 새 키워드를 추가하거나 변경합니다.
<meta expr:content='data:blog.title.escaped + ", " + data:blog.pageName.escaped + ", Add_your_addtional_keyword_here "' name='keywords'/>
썸네일 이미지
이 메타 태그는 블로그의 썸네일 이미지 스니펫을 표시하는 역할을 합니다. 이 섹션에 표시되는 이미지는 게시물의 첫 번째 이미지입니다.
작성한 게시물에 이미지가 없는 경우 이 태그에 삽입한 이미지 링크가 표시됩니다. 블로그 로고 링크로 아래의 표시된 부분을 변경합니다 (최소 300px x 300px 크기의 블로그 로고 이미지 필요).
<meta content='Add_your_image_url_here' property='og:image'/>
이미지의 URL 주소로 변경하세요. 예를 들어 다음과 같이 작성할 수 있습니다.
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJiRf7ddXKfwDcMwqPvjlHEwveyST8ZjLZ0Q0hcKXu-RZiFs-9cBaU6sL9Kesncpai_QOn2tgQRyx8U9q1utZ1li2ZxE87qBWYb7P12kj5sZuZ7cr3iAwu6imylDCb6HXWpAsYNfVQ5ns/s0/blogger-restriction-2021.png' property='og:image'/>
메타 이미지
메타 이미지는 블로그가 페이스북, 트위터 또는 카카오톡과 같은 SNS에 공유될 때 표시되는 썸네일이며 다음과 같습니다.
Open graph (Facebook) 및 Twitter 이미지를 포함하여 변경해야 하는 몇 가지 부분이 있습니다. 표시된 부분의 이미지 URL 주소를 변경합니다.
<meta content='Add_your_image_url_here' property='og:image'/>
<meta content='Add_your_image_url_here' property='twitter:image:src'/>
검색 설명
Blogger SEO를 최적화하는 방법 중 하나로 각 페이지에 검색 설명을 추가할 수 있습니다. 이 검색 설명은 아래와 같이 검색 결과의 블로그 제목 하단에 표시됩니다.
검색 설명은 다음과 같이 검색 결과에 게시물의 설명을 표시하는데 유용합니다.
참고: '검색 설명'은 '블로그 설명'과 다릅니다. '블로그 설명'은 모든
페이지에 유효하지만 검색 결과에 영향을 주지 않으며, '검색 설명'은 각각의
게시물 또는 페이지에 입력된 검색 설명이 검색 결과에 표시됩니다.
위 이미지에서 '블로그 설명'은 두 번째 결과와 같이 나타납니다.
검색 설명을 추가하려면 다음 단계를 따르십시오.
- Blogger 홈에서 설정을 클릭합니다.
-
메타 태그를 찾을 때까지 하단으로 스크롤합니다.
- 활성화되지 않은 경우 오른쪽의 스위치 버튼을 눌러 활성화합니다.
- 각 게시물에 대한 검색 설명을 입력합니다.
- 최대 150자의 검색 설명을 입력합니다.
현재 공유되는 이 메타 태그의 장점은 블로그에 검색 설명을 쓰지 않아도 대체 설명을 제공한다는 것입니다. 게시물에 설명이 없는 경우 게시물의 첫 번째 단락이 자동으로 검색 설명으로 표시됩니다.
파비콘
파비콘은 IOS 및 Android 플랫폼에 아이콘을 표시하는 역할을 하며 Blogger 설정에서 업로드한 파비콘으로 자동으로 채워집니다. 그러나 메타 태그를 사용하면 파비콘을 고화질 이미지로 변경할 수도 있습니다. 방법은 다음과 같습니다.
<!--[ Favicon ]-->
<link expr:href
='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='120x120'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='152x152'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='shortcut icon' type='image/x-icon'/>
// 적용 예시
<!--[ Favicon ]-->
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyBtnTlXR5iH1zOvsO_3fzPefD43wC2A_KvhzeZ6vhn__m5Du02Z5KidKQEXa-9NEQt4mZ4IeNe689WEg6GDYX9h3w_OMixXNyy23OIRv6-l8Ml3bNO8j4iZ7qxXMkZAB0wR50yQFMV2I/s300/Blogger-logo.png' rel='apple-touch-icon' sizes='120x120'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyBtnTlXR5iH1zOvsO_3fzPefD43wC2A_KvhzeZ6vhn__m5Du02Z5KidKQEXa-9NEQt4mZ4IeNe689WEg6GDYX9h3w_OMixXNyy23OIRv6-l8Ml3bNO8j4iZ7qxXMkZAB0wR50yQFMV2I/s300/Blogger-logo.png' rel='apple-touch-icon' sizes='152x152'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyBtnTlXR5iH1zOvsO_3fzPefD43wC2A_KvhzeZ6vhn__m5Du02Z5KidKQEXa-9NEQt4mZ4IeNe689WEg6GDYX9h3w_OMixXNyy23OIRv6-l8Ml3bNO8j4iZ7qxXMkZAB0wR50yQFMV2I/s300/Blogger-logo.png' rel='icon' type='image/x-icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyBtnTlXR5iH1zOvsO_3fzPefD43wC2A_KvhzeZ6vhn__m5Du02Z5KidKQEXa-9NEQt4mZ4IeNe689WEg6GDYX9h3w_OMixXNyy23OIRv6-l8Ml3bNO8j4iZ7qxXMkZAB0wR50yQFMV2I/s300/Blogger-logo.png' rel='shortcut icon' type='image/x-icon'/>
주소 표시줄 색상
Theme Color 코드 줄에 표시된 색상 코드를 블로그의 주요 색상으로 변경합니다. 이 섹션은 Android의 Google Chrome 브라우저 또는 iOS의 Safari 브라우저에서 주소표시줄의 색상을 변경하는 기능을 합니다.
여기에서 이 코드를 구현한 예시를 볼 수 있습니다.
소유권 인증
이 마지막 섹션은 블로그 소유권 확인에 사용됩니다. 이 코드는 일반적으로 블로그를 Google Search Console, Bing Web Master 또는 Naver Search Advisor에 등록할 때 얻습니다.
<!--[ Sife verification ]-->
<meta content='xxxxxxxxxxxxxxxxx_g' name='google-site-verification'/>
<meta content='xxxxxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxxxxxxxxxx' name='p:domain_verify'/>
<meta content='xxxxxxxxxxxxxxxxx' name='naver-site-verification'/>
<meta expr:content='data:blog.title.escaped' name='copyright'/>
이 글에서는 위의 인증 코드를 얻는 방법에 대한 내용은 다루지 않지만 Google에서 검색하면 손쉽게 찾아볼 수 있습니다.
이 메타 태그를 사용한 후 댓글로 후기를 남겨주세요. 또한 위의 메타 태그에 문제가 있으면 알려주세요. 유용하기를 바랍니다.