SEO의 메타 태그에 대한 종합 가이드
게시 됨: 2021-09-27메타 태그는 SEO의 주요 측면 중 하나이며 올바르게 사용하면 순위에 큰 영향을 미칠 수 있습니다.
그러나 모든 메타 태그가 SEO에 중요한 것은 아닙니다. 그렇기 때문에 모든 블로거와 SEO가 집중해야 하는 모든 중요한 메타 태그를 다루었습니다.
SEO 전략에서 중요한 역할을 합니다. 링크 구축 또는 더 나은 콘텐츠 작성 과 같은 단일 항목에 의존할 수 없습니다. 기술 SEO 부분을 적절하게 감사해야 하며 메타 태그가 그 중 하나입니다.
메타 태그란 무엇입니까?
메타 태그는 웹사이트에 대한 추가 정보를 검색 엔진과 브라우저에 제공하는 HTML 코드입니다.
검색 엔진에 검색 결과 페이지에 콘텐츠를 표시하는 방법에 대해 지시하고 브라우저가 방문자에게 콘텐츠를 적절하게 표시하도록 도와줍니다.
이 태그는 HTML 코드에서만 볼 수 있으며 일반 방문자에게는 표시되지 않습니다.
그럼 각 메타태그의 용도와 SEO의 이점은 무엇인지 확인해 보겠습니다. 마지막으로 블로거든 워드프레스든 웹사이트에서 제대로 사용하는 방법을 알려 드리겠습니다.
시각적 학습자라면 SEO용 메타 태그에 대한 아래 비디오를 볼 수 있습니다.
1. HTML 제목 태그
제목 태그는 웹 페이지에서 가장 중요한 부분이며 SERP에서 클릭 가능한 헤드라인으로 사용되며 링크가 공유될 때 소셜 미디어 사이트에도 표시됩니다.
일반적으로 <head> 태그 아래의 웹페이지 상단에 사용되며 페이지가 무엇인지에 대한 명확하고 포괄적인 아이디어를 제공합니다.
여기, 위의 이미지에서 구글에 표시되는 제목 태그를 지적했습니다.
따라서 HTML에서 이 페이지의 제목 태그는 다음과 같이 보일 것입니다.
<title>key2blogging | Learn Blogging and SEO tips</title> 참고 . Google은 항상 제목 태그를 표시하지 않습니다. 방문자에게 적합하지 않은 경우 수정하는 경우가 있습니다.
잘 작성된 제목은 검색 결과에서 더 많은 클릭을 얻는 데 도움이 되므로 제목 태그는 공식적으로 순위 요소입니다.
사실, Google은 focus 키워드가 제목 태그에 존재하지 않더라도 주제를 더 잘 이해할 것입니다. 그러나 제목 시작 부분에 focus 키워드를 포함하는 것이 가장 좋습니다.
Hubspot 에 따르면 제목은 60자를 넘지 않아야 합니다. 나머지는 숨겨져 사용자에게 표시되지 않습니다. 그러나 몇 가지 예외가 있습니다.
페이지에 제목 태그를 추가하는 방법은 무엇입니까?
페이지의 <head> 태그 바로 아래에 제목 태그를 추가할 수 있습니다.
Blogger 를 사용하는 경우 기본적으로 게시물 제목이 페이지의 제목 태그로 설정됩니다. 그리고 Wordpress를 사용하는 경우 RankMath , Yoast SEO 등과 같은 SEO 플러그인을 사용하여 제목 태그를 추가할 수 있습니다.
여기서는 글 제목과 사이트 이름을 페이지의 제목 태그로 설정했습니다.
모범 사례
- 내용을 간략하고 정확하게 설명하는 고유한 제목 태그를 모든 페이지에 사용하십시오.
- 제목 길이를 60자 미만으로 유지하십시오.
- 처음에 focus 키워드를 사용하십시오(가능한 경우).
- 한 페이지에 여러 제목 태그를 사용하지 마십시오.
- SERP에 숨겨져 있더라도 제목에 브랜드 이름을 사용하십시오. 그것은 여전히 SEO에 도움이 될 것입니다.
더 읽어보기: 더 나은 순위를 위한 7가지 콘텐츠 작성 기법.
2. 메타 설명
메타 설명은 웹 페이지를 요약하는 HTML 요소입니다. 검색 엔진은 일반적으로 제목 태그 아래의 검색 결과에 메타 설명을 표시합니다.
메타 설명은 SERP에서 더 많은 부분을 차지하며 검색자들에게 링크를 클릭한 후 솔루션을 찾을 수 있다는 확신을 줍니다.
좋은 설명은 검색 페이지에서 더 많은 클릭을 유도하고 CTR(클릭률)을 높이고 콘텐츠가 설명에서 약속한 대로 전달되면 이탈률을 줄이는 데 도움이 됩니다.
키워드를 메타 설명에 보관하면 SERP에 도움이 됩니다. 사용자가 Google에서 키워드를 검색하고 동일한 키워드가 설명에 있으면 검색 엔진은 CTR에 영향을 미치는 해당 단어를 굵게 표시합니다.
HTML에서 메타 설명은 다음과 같습니다.
<meta name="description" content="Here is a precise description of my awesome webpage.">페이지에 메타 설명을 추가하는 방법은 무엇입니까?
웹 페이지에 메타 설명을 추가하는 방법에는 여러 가지가 있습니다. HTML 웹사이트를 사용하는 경우 <head> 태그 아래에 코드 스니펫을 넣을 수 있습니다.
Blogger를 사용하는 경우 게시물 편집기 오른쪽에 옵션이 표시됩니다.
여기에 150자 길이의 설명을 작성할 수 있습니다. Wordpress를 사용하는 경우 순위 계산 설정을 클릭하고 스니펫 편집을 클릭하여 메타 설명을 추가할 수 있습니다.
여기에서 퍼머링크 설정 아래에 설명을 추가하는 옵션을 볼 수 있습니다. 설명에 대한 모범 사례를 따르십시오.
모범 사례
- 각 게시물 및 페이지에 고유한 설명 작성
- 150~160자(공백 포함)로 설명을 유지하세요.
- 일반적인 설명 피하기
- 검색 의도 일치
- 설명에 초점 키워드를 사용하십시오.
- 클릭 미끼가 아닌 클릭 가치가 있는 설명을 작성하십시오.
3. 메타 뷰포트
메타 뷰포트는 브라우저가 다양한 기기 크기에서 뷰포트 영역을 적절하게 표시하도록 지시합니다. 뷰포트는 HTML 문서의 가시 영역입니다.
이 태그는 브라우저가 다른 장치에서 페이지를 올바르게 렌더링하는 데 도움이 됩니다.
메타 뷰포트 태그는 검색 엔진이 페이지가 모바일 친화적인지 여부를 이해하는 데 도움이 됩니다. 따라서 웹사이트에 이 태그를 사용하면 모바일 검색 결과에서 더 나은 순위를 얻는 데 도움이 됩니다.
이 태그의 구문은 다음과 같습니다.
<meta name="viewport" content="width=device-width", initial-scale=1">모든 페이지의 <head> 태그 아래에 이 태그를 추가하기만 하면 되며 이 코드에서 아무 것도 변경할 필요가 없습니다.
WordPress를 사용하는 경우 기본적으로 추가되며 사용자 정의 테마를 사용하는 경우 이 태그 사용 여부를 확인하십시오.
화면의 최대 및 최소 확대/축소 수준 등을 설정하는 것과 같은 추가 요소를 추가할 수도 있습니다.
<meta content='width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=5' name='viewport'/>Google의 모바일 친화적 테스트 도구 에서 웹사이트가 모바일 친화적인지 여부를 확인할 수 있습니다.
웹사이트에 뷰포트가 설정되어 있지 않으면 다음과 같은 오류가 표시됩니다.
이 오류가 표시되지 않으면 계속 진행하십시오.
4. 메타 문자 집합
Meta charset 태그는 웹사이트에서 사용되는 HTML 인코딩에 대한 정보를 제공합니다. 웹 페이지의 텍스트가 어떻게 표시되어야 하는지 브라우저에 알려줍니다.
웹 사이트에서 사용되는 많은 문자 인코딩이 있지만 가장 많이 사용되는 것은
- UTF-8 — 유니코드용 문자 인코딩.
- ISO-8859–1 — 라틴 알파벳의 문자 인코딩.
- ASCII — 첫 번째 문자 인코딩 표준
charset 메타 태그는 다음과 같습니다. (HTML 5의 경우)
<meta charset='UTF-8'/>HTML 4 이하를 사용하는 경우 이와 같이 메타 태그를 추가해야 합니다.
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
Wordpress, Blogger 등과 같은 모든 최신 CMS 플랫폼은 HTML 5 Now를 사용하고 있습니다. 따라서 HTML 코드에 첫 번째 메타 코드가 추가되었는지 확인해야 합니다.
5. 메타 키워드
메타 키워드 태그에는 웹사이트의 중요한 키워드를 추가할 수 있습니다.
Google이 매번 이를 고려하지는 않지만 새로운 웹사이트에는 도움이 됩니다.
<meta name="keywords" content="HTML, CSS, JavaScript, Blogging, SEO">여기 콘텐츠 필드에서 웹사이트의 중요한 키워드를 추가해야 합니다. 그런 다음 이 코드 조각을 head 태그 아래에 붙여넣습니다.
6. 메타 저자
작성자 속성은 웹페이지의 작성자를 지정합니다.
따라서 이 메타 태그를 사용하여 콘텐츠 작성자에 대해 검색 엔진에 알립니다. EAT(전문성, 권위, 신뢰성)에 도움이 됩니다.
<meta name="author" content="Abhishek Padhi">여기에서 콘텐츠 필드에 작성자의 이름을 추가해야 합니다.
7. 정식 태그
표준 태그(일명 "rel canonical")는 검색 엔진이 웹페이지의 마스터 사본을 이해하는 데 도움이 됩니다.
웹 페이지는 www가 있거나 www가 없는 HTTP, HTTPS와 같은 여러 URL에서 액세스할 수 있습니다. 따라서 표준 태그를 사용하면 여러 URL에 표시되는 동일하거나 "중복된" 콘텐츠로 인해 발생하는 문제를 방지할 수 있습니다.
<link rel="canonical" href="http://example.com/" />8. 헤더 태그(h1, h2, h3 등)
헤더 태그는 SEO에 중요합니다. 콘텐츠를 적절하게 구성하고 검색 엔진이 콘텐츠를 이해하는 데 도움이 됩니다.
사실, 이러한 표제 태그를 올바르게 구현하면 SERP에서 더 나은 순위를 매기는 데 도움이 될 수 있습니다. (검색 엔진 결과 페이지). 또한 사용자 경험과 읽기 용이성을 향상시킵니다.
따라서 항상 콘텐츠를 적절하게 구성하십시오. 따라서 여기에서는 기본적으로 게시물 제목이 h1 태그 역할을 하고 콘텐츠에 h2 및 h3 태그를 사용합니다. 항상 머리글 태그에 포커스 키워드를 포함하십시오.
9. 로봇 메타 태그
로봇 메타 태그는 해당 페이지의 색인을 생성할지 여부를 검색 엔진에 지시하는 데 사용됩니다. 따라서 이 태그를 사용하여 특정 페이지를 쉽게 인덱스하지 않을 수 있습니다.
그러나 이러한 태그는 robots.txt 파일과 같은 색인이 없는 페이지에 대한 고급 방법이 있으므로 널리 사용되지 않습니다.
<meta name="robots" content="noindex, nofollow" />여기서 첫 번째 속성은 "이름"이고 값은 "로봇"이고 두 번째 속성은 "내용"이며 여기에서 다른 값을 설정할 수 있습니다.
- Noindex : 검색 엔진이 페이지를 인덱싱하지 않도록 지시합니다.
- Index : 검색 엔진이 페이지를 인덱싱하도록 지시합니다. (기본값이므로 사용할 필요 없음)
- 팔로우 : 페이지가 색인이 생성되지 않은 경우에도 크롤러는 페이지의 모든 링크를 따라가서 링크된 페이지에 형평성을 전달해야 합니다.
- Nofollow : 크롤러가 페이지의 링크를 따르거나 링크 자산을 전달하지 않도록 지시합니다.
- Noimageindex : 크롤러가 페이지의 이미지를 인덱싱하지 않도록 지시합니다.
- 없음 : noindex 및 nofollow 태그를 동시에 사용하는 것과 같습니다.
- Noarchive : 검색 엔진은 SERP에 이 페이지에 대한 캐시된 링크를 표시하지 않아야 합니다.
- Nocache : noarchive와 동일하지만 Internet Explorer 및 Firefox에서만 사용됩니다.
- Nosnippet : SERP에서 이 페이지의 이 페이지의 스니펫(예: 메타 설명)을 표시하지 않도록 검색 엔진에 지시합니다.
- Unavailable_after : 검색 엔진은 특정 날짜 이후에 이 페이지를 더 이상 색인화하지 않아야 합니다.
따라서 쉼표로 구분된 콘텐츠 속성에 여러 값을 사용할 수 있습니다.
그러나 Wordpress를 사용하는 경우 Rank Math SEO, Yoast SEO 등과 같은 SEO 플러그인을 사용하여 페이지를 쉽게 색인을 생성할 수 없습니다.
Blogger를 사용하는 경우 게시물 편집기를 사용하여 동일한 작업을 수행할 수도 있습니다.
10. 대체 텍스트
alt 태그는 이미지를 사용할 수 없거나 다운로드 오류가 있을 때 브라우저에 표시되는 대체 텍스트입니다. 또한 검색 엔진이 웹 페이지에 사용된 이미지에 대해 더 많이 이해할 수 있도록 도와줍니다.
따라서 웹사이트에 이미지를 업로드하면 코드가 다음과 같이 표시됩니다.
<img src="Mountain.jpg" alt="Photo of a mountain" width="500" height="600">따라서 여기 src 필드에는 이미지 URL이 추가되고, alt 필드에는 이미지를 설명하는 alt 텍스트를 추가해야 합니다.
그러나 대부분의 CMS 플랫폼에서는 코드를 편집할 필요가 없습니다. 이미지를 선택한 다음 설정 아이콘을 클릭하면 이 태그를 쉽게 추가할 수 있습니다.
11. 메타 새로 고침
메타 새로 고침 태그는 일정 간격으로 콘텐츠를 새로 고치는 데 사용됩니다. 따라서 브라우저는 이 태그에 제공된 지침을 따릅니다.
<meta http-equiv="refresh" content="30">여기 위의 예에서는 30초를 설정했습니다. 이 태그는 뉴스 업데이트, 점수 업데이트 등과 같은 특정 간격 후에 콘텐츠를 새로 고쳐야 하는 웹사이트를 실행할 때 유용합니다.
12. 메타 색상
이 메타 태그는 웹 사이트가 모바일 장치에서 열릴 때 URL 표시줄에 다른 색상을 표시하는 데 사용됩니다.
<meta content='#162536' name='theme-color'/>여기 "콘텐츠" 필드에 URL 표시줄에 표시할 색상 코드를 추가해야 합니다.
참고 : <head> 태그 아래의 모든 메타 태그를 사용해야 합니다.
결론
메타 태그가 무엇인지 이해하고 더 나은 SEO를 위해 웹사이트에서 메타 태그를 사용하는 방법을 이해하셨기를 바랍니다.
이와 관련하여 의문 사항이 있으면 언제든지 댓글 섹션에서 저에게 질문하십시오.
Key2Blogging 커뮤니티 가입
여기에서 최신 SEO 뉴스, 블로깅 팁 및 트릭, 비정기 거래를 얻을 수 있습니다.