우리는 HTML과 관련된 대부분의 작업이 코더, 프로그래머 및 소프트웨어 개발자에 의해 수행된다는 사실에 익숙합니다. 그러나 이것이 SEO 전문가와 디지털 마케터가 필수 HTML 태그를 잘 이해하지 못한다는 의미는 아닙니다. 결론은 기술 사양을 적절하게 개발하고 태그가 SEO에 미치는 영향을 이해하려면 태그를 반드시 알아야 한다는 것입니다.
그렇다면 검색 엔진 최적화에서 중요한 태그와 속성은 무엇일까요? 왜 그것들이 필요하고 어떻게 사용되어야 합니까? 우리는 모든 HTML 태그를 살펴보고 HTML의 요령을 배우거나 단순히 기억을 되살리는 데 도움이 되는 가장 중요한 태그 목록을 모았습니다.
HTML 기본 분석
HTML(HyperText Markup Language)은 문서에 포함된 요소와 화면에 표시해야 하는 요소를 브라우저에 알리기 위해 웹 페이지에서 사용하는 문서용 표준 마크업 언어입니다.
HTML은 대부분의 웹 페이지의 기초입니다. 기술 SEO의 가장 필수적인 부분 중 하나입니다. HTML 요소의 도움으로 SEO는 웹 페이지의 정보를 사람과 검색 엔진 봇 모두에게 전달할 수 있습니다. 이렇게 하면 모든 사람에게 페이지 구조와 콘텐츠 순서가 무엇인지 명확하게 알 수 있을 뿐만 아니라 페이지가 온라인에서 다른 웹 페이지와 어떻게 관련되어 있는지 명확하게 알 수 있습니다.
평신도의 용어로, 인간으로 웹 페이지를 방문하면 섹션, 부제목, 이미지 및 링크와 함께 표시된 텍스트가 표시됩니다. 그러나 웹 브라우저와 검색 엔진 봇의 경우 웹 페이지는 특정 요소가 있는 HTML 코드에 불과하다는 점을 명심하십시오.
우리는 HTML과 같은 용어를 언급했습니다. 요소 및 태그뿐만 아니라 메타 태그 및 속성. 차이점을 모르면 매우 혼란스러울 수 있습니다. 따라서 이 게시물 전체에서 사용할 기본 용어를 살펴보겠습니다.
HTML 요소 구조
HTML 요소 머리글, 단락, 이미지, 링크 등과 같은 페이지 정보를 구성하고 표시하는 데 도움이 되는 웹 페이지의 필수 구성 요소입니다. HTML 요소는 여는 태그, 속성, 내용 및 닫는 태그(자체 닫는 요소 제외)로 구성됩니다.
이 예제에서는 헤더라는 HTML 요소가 제공됩니다. 헤더는 코드에 시작 태그와 닫는 태그. 요소에 속성이 있습니다. 정렬 = "왼쪽", 이는 페이지의 왼쪽을 향해 배치되고 정렬됨을 의미합니다. 요소의 콘텐츠는 웹페이지에 제목으로 표시되는 텍스트입니다.
An HTML 태그 웹 페이지 내의 요소를 정의하는 코드 조각입니다. HTML 태그는 웹 콘텐츠를 구조화하고 형식을 지정하고 웹 브라우저가 페이지를 올바르게 해석하고 표시할 수 있도록 하는 데 중요한 역할을 합니다.
태그는 꺾쇠 괄호(<>) 여는 태그 또는 닫는 태그가 될 수 있습니다. 다음과 같은 일부 태그 or , 닫는 태그가 필요하지 않습니다. 여는 태그와 닫는 태그 사이의 콘텐츠는 요소의 콘텐츠 또는 중첩된 요소를 나타냅니다. HTML 태그의 예는 다음과 같습니다. 단락의 경우 에 제목의 경우, 링크 및 이미지.
A 메타 태그 HTML 문서에 대한 추가 정보 역할을 하는 메타데이터를 제공하는 HTML 요소입니다. 이러한 메타 태그는 HTML 문서의 섹션을 만들고 웹 브라우저, 검색 엔진 및 기타 응용 프로그램에 대한 구조화된 메타데이터를 제공합니다. 이 데이터에는 제목, 설명, 작성자, 게시 날짜, 키워드 등이 포함됩니다. 이러한 각 요소는 SEO 노력의 결과를 결정하고 검색 결과에서 콘텐츠의 위치 및 표시를 개선하는 데 중요한 역할을 합니다.
An 속성 추가 정보를 제공하고 동작을 조정하거나 HTML 요소의 표시를 수정합니다. 요소의 여는 태그 내에 지정됩니다. 속성은 이름-값 쌍으로 구성되며 이름은 특정 속성을 나타내고 해당 값은 원하는 효과를 결정합니다. 속성은 모양, 동작 또는 외부 리소스에 대한 링크와 같은 요소의 다양한 측면을 제어하는 데 사용됩니다.
태그와 속성의 차이점
많은 사람들이 용어를 사용하기 때문에 태그 과 속성 실질적으로 동의어로, 잠시 시간을 내어 용어를 바로 잡겠습니다.
다음은 요소를 세 부분으로 나누는 HTML 요소 형식의 예입니다.
제목입니다.
이 예에서, 태그를 열면 "This is a header"가 태그의 내용이고, 태그를 닫습니다.
위의 예에서 HTML 요소는 검색 엔진 최적화에 대한 콘텐츠를 소개하기 위해 웹 페이지에서 눈에 보이는 제목으로 사용되는 헤더입니다. 이제 구별을 해봅시다.
태그가 제대로 작동하려면 시작 및 닫기 요소가 있어야 하지만 속성은 그렇지 않으며 수정자로 HTML 요소에 추가됩니다. 예를 들면 다음과 같습니다.
이 예에서, REL 과 HREF 의 속성입니다 꼬리표.
사용자와 검색 엔진에 태그가 필요한 이유
이제 HTML 태그와 속성을 명확하게 이해했으므로 검색 엔진, 브라우저 및 사용자에게 필요한 이유에 대해 논의해 보겠습니다.
먼저 Google은 메타 태그를 사용하여 페이지 콘텐츠에 대한 정보를 얻고 궁극적으로 검색 결과에 포함합니다. 스니펫은 다음으로 구성되어 있으므로 이를 직접 확인합니다. 제목 태그 과 설명 메타 태그.
그러나 페이지의 제목과 설명이 잘못 설정된 경우(오해의 소지가 있거나 키워드가 지나치게 스팸인 경우 등) Google은 자동으로 그들을 교체 페이지 콘텐츠에서 더 적절한 텍스트로.
Google의 Search Console 도움말 센터에는 모든 메타 태그 목록 검색 거인이 지원합니다. 따라서 모든 HTML 태그를 더 깊이 파고들고 싶다면 꼭 확인하십시오.
HTML 태그 및 속성
이제 모든 HTML 기본 사항을 다루었으므로 일반적으로 사용되는 태그와 속성을 살펴보겠습니다.
| 꼬리표 | 상품 설명 |
|---|---|
| 문서 유형을 HTML로 정의합니다. | |
| 스크립트, 스타일시트, 문자 인코딩, 뷰포트 설정 등 문서에 대한 메타데이터 및 정보를 포함합니다. | |
| HTML 문서의 주요 내용을 정의합니다. | |
| 브라우저의 제목 표시줄, 검색 엔진 결과 및 책갈피에 나타나는 HTML 문서의 제목을 지정합니다. | |
| 문자 인코딩 및 키워드와 같은 HTML 문서에 대한 메타데이터를 제공합니다. | |
| 사용자가 동일한 페이지 내의 다른 웹 페이지, 파일 또는 특정 섹션으로 이동할 수 있는 하이퍼링크를 생성합니다. | |
| HTML 문서와 스타일시트 또는 아이콘과 같은 외부 리소스 간의 링크를 지정합니다. | |
| HTML 문서 내에 이미지를 포함하고 표시합니다. | |
| 텍스트를 기울임꼴로 스타일 지정하거나 의미론적으로 텍스트를 강조하거나 중요하게 표시합니다. | |
| , | 텍스트를 굵게 표시하거나 강한 중요성 부여 |
| 인라인 스타일 지정 또는 그룹화를 적용하고 스타일 지정 또는 스크립팅 목적으로 특정 요소를 대상으로 지정합니다. | |
| HTML 문서 내에서 직접 CSS 스타일을 정의합니다. | |
| 데이터 정리를 위한 테이블 생성 | |
| 정렬되지 않은(글머리 기호) 목록을 나타냅니다. | |
| 순서가 있는(번호가 매겨진) 목록을 나타냅니다. | |
| 소개 콘텐츠 및 사이트 탐색을 위한 컨테이너를 정의합니다. | |
| 에게 | 다음과 같이 다양한 수준의 제목을 지정합니다. 가장 높은 |
| 문서 또는 섹션의 바닥글에 대한 컨테이너를 정의합니다. | |
| 태그를 그룹화하고 컨텐츠 스타일을 지정하기 위한 범용 컨테이너를 생성합니다. | |
| 문서 또는 문서 개요 내의 섹션을 정의합니다. | |
| 자체 포함되고 독립적으로 배포 가능한 콘텐츠를 나타냅니다. | |
| 주요 콘텐츠와 접선적으로 관련된 콘텐츠를 정의합니다. | |
| 현재 문서 내에 외부 웹 페이지 또는 문서를 삽입합니다. | |
| 탐색 링크의 섹션을 정의합니다. | |
| 외부 JavaScript 파일 또는 코드를 포함하거나 참조합니다. | |
| 컴퓨터 코드 조각을 나타냅니다. |
기본 HTML 태그
사람들에게 유용한 웹 페이지를 만들려면 이 문서의 맥락에서 더 중요하게는 검색 엔진에 포함해야 하는 세 가지 주요 HTML 태그가 있습니다.
: 문서가 HTML 웹 페이지임을 지정합니다.
XNUMXD덴탈의 태그는 웹페이지 코드 시작 부분에 배치됩니다. 그 목적은 페이지를 검색 엔진과 웹 브라우저에 소개하여 HTML 문서임을 나타내는 것입니다. 이 태그를 포함하면 페이지가 HTML을 사용하여 구성되어 있음을 검색 엔진에 알리는 것입니다. 이를 통해 콘텐츠를 올바르게 해석하고 표시할 수 있습니다.
참고로 태그는 그 자체로 HTML 태그가 아니므로 속성이 없습니다. 브라우저에 매우 중요한 정보를 제공하여 페이지에서 찾을 것으로 예상되는 문서 유형과 표시 방법을 알 수 있습니다.
다음은 사용 중인 코드의 예입니다.
문서의 제목입니다. 제목입니다. 이것은 단락입니다.
: 페이지에 대한 메타데이터 및 기타 필수 정보를 포함합니다.
XNUMXD덴탈의 요소는 메타데이터의 컨테이너 역할을 합니다. 즉, 웹 페이지에 표시되지 않는 HTML 문서에 대한 정보를 포함합니다. 그것은 사이에 위치 태그와 꼬리표. 내부에 다양한 HTML 요소를 포함할 수 있습니다. 다음과 같은 태그 , , ,, 가장 중요한 것은 .
HTML 코드는 다음과 같습니다.
문서의 제목입니다. 제목입니다. 이것은 단락입니다.
위의 예에서 다음을 확인할 수 있습니다. 태그는 웹 페이지에서 직접 볼 수 없는 문서의 제목을 포함하여 중요한 메타데이터를 포함합니다. 또한, 태그는 페이지에 대한 추가 데이터를 제공하는 다양한 요소를 수용할 수 있습니다.
XNUMXD덴탈의 태그 지원 HTML 전역 속성 모든 HTML 요소와 함께 사용할 수 있습니다. 이러한 속성은 안내
: 웹 페이지의 메인 콘텐츠를 정의합니다.
XNUMXD덴탈의 태그는 문서의 본문을 정의하고 모든 사람이 볼 수 있도록 웹 페이지에 표시하는 텍스트, 이미지 및 비디오를 포함하여 페이지의 정보에 대한 컨테이너 역할을 합니다.
XNUMXD덴탈의 태그에는 제목, 단락, 멀티미디어, 하이퍼링크, 표, 목록 등 HTML 문서의 주요 내용이 포함됩니다. 기본적으로 웹 페이지에서 인간의 눈으로 볼 수 있는 모든 것은 그건 그렇고, 태그 중 하나만 있을 수 있습니다.
HTML 코드는 다음과 같습니다.
문서의 제목입니다. 제목입니다. 이것은 단락입니다.
코드를 실행하면 다음과 같이 표시됩니다.
여기에서 태그 : 과 . 주목할 가치가 있습니다. 태그에는 실제 페이지에 표시되지 않는 문서의 제목 및 설명과 같은 메타데이터가 포함됩니다.
XNUMXD덴탈의 태그는 HTML 전역 속성도 지원합니다. 게다가, 그것은 또한 지원합니다 HTML 이벤트 속성 JavaScript에서 요소를 클릭하는 것과 유사하게 이벤트가 브라우저에서 동작을 트리거하도록 합니다.
유용한 HTML 태그 및 속성
이제 SEO에 도움이 될 수 있는 다른 HTML 태그로 넘어갑니다.
이미 다루었듯이 태그는 페이지를 어떻게 처리해야 하는지, 페이지의 내용, 페이지의 목적 등 브라우저와 검색 엔진이 알아야 할 모든 것을 이해할 수 있는 언어로 알려줄 수 있습니다.
유일한 요령은 사용하려는 대상과 올바르게 사용하는 방법을 아는 것입니다. HTML 코드가 올바르게 구성되고 적절한 표준을 준수하는지 확인하려면 다음을 활용할 수 있습니다. HTML 유효성 검사기 W3C 제공.
: HTML 문서의 제목을 정의합니다.
SEO 전문가들이 가장 좋아하는 태그 중 하나인 태그는 사용자와 검색 엔진 모두 페이지의 내용을 이해하는 데 도움이 됩니다.
제목 SERP에서 클릭 가능한 제목으로 표시됩니다. 유용성과 검색 엔진 최적화에 매우 중요합니다. 이 태그의 목적은 검색자가 페이지를 방문하도록 유도하고 검색 엔진이 페이지 주제에 대한 충분한 추가 정보를 얻을 수 있도록 페이지의 내용을 정확하고 간결하게 설명하는 것입니다. 사용자는 사용자의 관심을 끌고 웹사이트로 유인하기 위해 클릭베이트 제목을 사용하는 경우가 많습니다.
제목은 스니펫뿐만 아니라 브라우저 탭에도 표시되므로 사용자는 브라우저에서 어떤 페이지가 열려 있는지 한 눈에 이해할 수 있습니다.
제목은 소셜 미디어에 링크를 게시할 때 앵커 텍스트로 표시됩니다. 오픈 그래프 마크업 그건. 그렇기 때문에 잠재 독자를 끌어들이기 위해 제목이 간결하고 유익하며 독특하고 흥미로워야 합니다.
너무 긴 제목은 어쨌든 55픽셀로 잘리므로 제목 길이는 최대 600자까지 권장됩니다. 결과적으로 불완전한 정보는 스니펫으로 가져옵니다.
자, 제목 길이 문제는 해결했으니 제목 태그에 대상 키워드를 사용해야 하는지 알아보겠습니다. 짧은 대답은 그렇습니다. 연구에 따르면, 제목 태그 내 target 키워드 웹사이트 순위에 긍정적인 영향을 미칠 수 있습니다. 타겟 키워드는 순위 상승에 도움이 될 수 있지만 제목 태그에 키워드 사용과 순위 상승 사이에는 직접적인 관계가 없습니다. 구글은 예전처럼 태그에만 매달리지 않고 웹 페이지 의미론을 분석하는 법을 오래 전부터 배웠다.
주요 테이크 아웃은 당신이 do 키워드를 사용해야 하지만 검색 엔진과 사용자 모두가 귀하의 페이지가 무엇인지 이해하도록 돕기 위한 목적으로만 필요합니다.
가격, 브랜드, 배송 옵션 등과 같은 기타 추가 정보를 제목에 자유롭게 지정할 수도 있습니다.
HTML 코드는 다음과 같습니다.
문서의 제목입니다. 제목입니다. 이것은 단락입니다.
흥미롭게도 요소는 HTML 파일의 태그는 페이지 자체에 표시되지 않습니다. 게다가 하나만 있어야 한다. 내부에 배치해야 하는 단일 문서의 태그 컨테이너. NS 태그도 지원 HTML 전역 속성,하지만 지원하지 않습니다 이벤트 속성.
: 웹 페이지에 대한 추가 메타데이터 제공
XNUMXD덴탈의 태그는 페이지에 표시되지 않지만 검색 봇에서 처리하여 키워드를 식별하고 브라우저에서 콘텐츠를 표시하거나 페이지를 다시 로드하도록 처리할 수 있는 HTML 문서의 메타데이터를 정의합니다.
항상 다음 범위 내에 배치해야 합니다. , 일반적으로 페이지에 사용되는 문자 집합, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 지정하는 데 사용됩니다.
에서 제공하는 속성을 살펴보겠습니다. 태그가 포함될 수 있습니다.
이름 속성
XNUMXD덴탈의 성함 속성은 기본 속성 중 하나입니다. 우리가 집중할 태그입니다. 메타데이터의 이름을 지정하는 데 사용됩니다. 사용 방법은 다음과 같습니다.
- 검색 봇에게 알리기: 이름 속성을 사용하여 페이지의 정보가 검색 봇용인지 여부를 나타낼 수 있습니다. 메타 태그에 이름 속성을 포함하면 모든 또는 특정 봇이 다음을 고려해야 한다고 지적할 수 있습니다. 색인 없음 지시문을 사용하여 페이지와 상호 작용하지 못하게 합니다. 예를 들어:
이름=”구글봇” 콘텐츠=”NOINDEX”> 이름 = "로봇" 내용 =”NOINDEX”>
이름=”키워드” 내용 =”HTML, 태그, 속성”>
- 페이지 설명 정의: 이는 검색 엔진 및 기타 앱이 페이지의 콘텐츠를 이해하는 데 도움이 됩니다. 예를 들어:
이름=”설명” content=”훌륭한 설명입니다”>
- 작성자 식별: 이름 속성은 페이지 콘텐츠의 작성자를 식별하는 데에도 사용할 수 있습니다. 이것은 원저자에 대한 귀속을 제공합니다. 예를 들어:
이름 = "저자" 내용=”존 애플시드”>
그러나 이것이 이름 속성의 모든 값은 아닙니다. 다른 것들을 좀 더 자세히 살펴봅시다.
설명 속성
설명 속성(종종 메타 설명와 함께 사용되는 또 다른 속성입니다. SEO에 꼭 필요한 태그입니다. 이 속성은 제목과 함께 SERP에 표시되는 페이지 콘텐츠에 대한 텍스트 설명을 제공합니다.
HTML 코드는 다음과 같습니다.
이름="설명" content="알아야 할 HTML 태그 및 속성">
검색 엔진에 페이지에 대한 추가 정보를 제공하는 것 외에도 설명 속성은 콘텐츠 제작자에게 사람들이 SERP에서 직접 페이지를 클릭하도록 유도하는 매력적인 텍스트를 작성할 수 있는 기회를 제공합니다.
설명 텍스트는 사람들이 페이지로 이동하도록 동기를 부여할 수 있도록 약간의 클릭베이트적이어야 합니다. 그러나 Google은 제공된 페이지 설명을 사용자의 검색어와 관련된 콘텐츠의 일부로 대체할 수 있습니다.
이제 설명 텍스트가 순위에 직접적인 영향을 주지는 않지만 CTR을 높일 수 있으며 이는 긍정적인 순위 신호로 간주됩니다.
뷰포트 메타 태그
속성은 아니지만 뷰포트 메타 태그를 사용하면 뷰포트(사용자에게 표시되는 페이지 영역)의 너비와 배율을 제어할 수 있으므로 데스크톱 컴퓨터에서 랩톱 및 태블릿에 이르기까지 모든 크기의 화면에 올바르게 표시됩니다. 휴대폰에.
다음은 HTML 코드의 모양이며 모든 웹 페이지에 추가하는 것이 좋습니다.
이름="뷰포트" content="너비=장치-너비, 초기-스케일=1.0">
이 데이터의 도움으로 브라우저는 웹 페이지의 크기와 배율을 제어하는 방법에 대한 정보를 얻을 수 있습니다. 코드를 자세히 살펴보면 너비=장치 너비 부분은 페이지 너비가 사용된 장치의 화면 너비와 일치하도록 설정됩니다.
에 대해서는 초기 규모=1.0 페이지가 브라우저에 의해 처음 로드될 때 초기 확대/축소 수준을 설정합니다. 따라서 페이지 설정 방법에 따라 테스트해 볼 수 있습니다. 다음은 뷰포트 메타 태그를 사용하지 않는 페이지와 이를 사용하는 동일한 웹 페이지의 예입니다.
현대에 와서는 사이트의 유용성은 순위 순위에 직접적인 영향을 미칩니다, 다른 화면의 크기에 맞게 조정되지 않는 페이지를 만드는 것은 용납되지 않습니다. 왼쪽의 예와 같이 보이면 사람들은 즉시 귀하의 페이지를 떠날 것입니다.
콘텐츠 속성
콘텐츠 속성은 다음과 함께 작동합니다. name 과 http-equiv 속성을 제공하고 메타 태그의 의미/데이터 유형을 검색 엔진에 공개합니다. 기본적으로 메타 태그를 포함하는 콘텐츠를 지정합니다.
다음은 메타 태그에 사용된 콘텐츠 속성의 예입니다.
<메타 이름="설명" content="HTML 태그와 속성은 무엇입니까? SEO 이점을 얻기 위해 이를 어떻게 사용합니까? 이 게시물에서 모든 중요한 HTML 태그와 해당 속성을 확인하세요!">
맥락에서 http-equiv 다음에 살펴볼 속성인 content 속성은 브라우저로 전송되는 데이터 유형을 정의합니다. 그러나 먼저 콘텐츠 속성의 매우 중요한 값에 초점을 맞추겠습니다.
NOINDEX 속성
Noindex는 SEO 목적으로 일반적으로 사용되는 또 다른 메타 태그 속성입니다. 기본적으로 NOINDEX 속성 검색 엔진에 해당 인덱스에서 지정된 페이지를 사용하지 않을 수 있음을 알릴 수 있습니다.
받는 유사 메타 로봇 태그에서 noindex 속성은 일반적으로 색인 없음 태그는 메타 태그의 속성이지만 사용하기 때문입니다.
HTML 코드는 다음과 같습니다.
<메타 이름="로봇" 내용 = "NOINDEX">
다음은 meta robots 태그 외에 사용할 수 있는 명령의 몇 가지 예입니다. 색인 없음 (조합하여 사용할 수 있음):
- 팔로우 금지: 페이지의 링크를 따르지 말고 순위를 계산할 때 링크 주스를 고려하지 마십시오.
- 인덱스, 팔로우 금지: i페이지의 콘텐츠를 색인화하지만 페이지의 링크를 따라가지는 마세요.
이 속성은 자연 검색에서 민감한 데이터를 숨기고 싶을 때 매우 유용합니다. 예를 들어 사이트에 유료 회원만 액세스할 수 있는 영역이 있고 해당 영역을 사용하지 못할 수 있습니다. 색인 없음 태그는 검색 결과 페이지에서 누구나 콘텐츠에 액세스할 수 있도록 합니다.
페이지에서 로봇 지시문을 사용할 때 페이지가 robots.txt 파일. 그렇지 않으면 검색 엔진이 페이지에 액세스할 수 없고메타> 태그.
HTTP와 동등한 속성
XNUMXD덴탈의 http-equiv 속성은 HTTP 헤더 추가 페이지 정보를 수집하기 위해 서버에서 사용됩니다. 평신도의 용어로 브라우저는 http-equiv 속성 - 의 도움으로 지정 함유량 속성—HTTP 응답 헤더 형식으로 지정하고 서버에서 직접 온 것처럼 처리합니다.
다음은 HTML 코드의 예입니다.
http-equiv="만료" content="4년 2022월 XNUMX일"> http-equiv="새로고침" 내용="60">
HTTP 헤더는 서버 응답 상태(200, 404 등) 또는 응답을 보낸 서버 이름과 같이 SEO 전문가에게 유용한 많은 데이터를 나타냅니다.
또한 요청된 페이지의 표준 URL을 지정하고 로봇이 X-로봇-태그 HTTP 헤더 또는 설정 HTML 리디렉션 새로 고침 속성을 사용합니다.
다음은 일부 속성입니다. 에서 사용할 수 있는 값 http-equiv 속성:
- 콘텐츠 보안 정책: 문서의 콘텐츠 정책을 지정합니다.
http-equiv=”콘텐츠 보안 정책” 내용 =”default-src 'self'”>
- 컨텐츠 타입: 문서의 문자 인코딩을 지정합니다.
http-equiv=”콘텐츠 유형” 내용 =”텍스트/html; 문자셋=UTF-8″>
- 기본 스타일: 문서의 기본 스타일시트를 지정합니다. content 속성 값은 link 요소의 title 속성 값과 일치하거나 style 요소의 title 속성 값과 일치해야 합니다.
http-equiv="기본 스타일" content=”문서의 기본 스타일시트”>
- 새로 고침: 문서를 자동으로 새로 고쳐야 하는 빈도(초)를 정의합니다.
http-equiv="새로고침" 내용=”120″>
문자셋 속성
XNUMXD덴탈의 문자셋 속성은 문서 인코딩을 담당합니다. 브라우저가 HTML 문서의 텍스트를 페이지에 올바르게 표시할 수 있도록 지정해야 하는 웹 사이트의 문자 인코딩 스타일을 정의합니다. 인코딩 데이터가 있는 태그에 오류가 있으면 페이지에 뒤섞인 문자만 표시됩니다.
HTML 코드는 다음과 같습니다.
문자셋="UTF-8">
가장 자주 사용되는 것 중 하나 코딩 표준 분석된 웹사이트의 8%가 UTF-96.6을 사용하고 있습니다. 모든 최신 브라우저 및 검색 엔진에서 지원됩니다. 일부 다른 인코딩 표준에는 ISO-8859-1, Windows-1251 및 Windows-1252가 포함되지만 웹 사이트의 3% 미만에서 사용됩니다.
단일 문서에서 여러 코딩 표준을 사용하지 마십시오. 브라우저와 검색 엔진이 모두 혼동될 수 있습니다. 결과적으로 콘텐츠 인덱싱 문제와 잘못된 텍스트 표시가 발생할 수 있습니다.
오늘날 거의 모든 검색 엔진은 외부 도움 없이 페이지 인코딩을 식별하는 방법을 알고 있습니다. 그러나 안전을 위해 문제가 발생하지 않도록 페이지에서 사용되는 인코딩을 지정하는 것이 가장 좋습니다.
및 : 사용자가 다른 웹페이지 또는 동일한 페이지 내의 특정 위치로 이동할 수 있는 링크를 만듭니다.
XNUMXD덴탈의 태그는 다른 웹 페이지, 파일 또는 동일한 페이지 내의 특정 섹션으로 연결되는 하이퍼링크를 정의하는 역할을 합니다. 다음은 HTML 코드의 예입니다.
링크 앵커 텍스트
HTML 코드에 추가하고 콘텐츠에 배치하면 위의 예는 다음과 같습니다.
이제 부품을 이해하기 위해 분해해 봅시다. 먼저, 우리는 요소가 링크임을 나타내는 태그입니다. 그런 다음 HREF 속성은 링크가 외부로 연결되는 페이지를 정의합니다. www.website.com 우리의 경우. 시작 사이에 볼 수 있는 텍스트 태그와 닫기 태그는 클릭 가능한 콘텐츠 내 텍스트 웹 사이트 방문자가 페이지에서 볼 수 있는 앵커 텍스트입니다.
XNUMXD덴탈의 태그는 페이지 콘텐츠 내에 있는 클릭 가능한 링크에 사용됩니다. 꼬리표. 글꼴이 포함된 문서나 외부 스타일 시트와 같은 외부 리소스에 웹 페이지를 연결해야 하는 경우 에 나타나는 태그 페이지의.
HTML 코드는 다음과 같습니다.
XNUMXD덴탈의 태그 링크는 하이퍼링크가 아니므로 클릭할 수 없으며 요소 자체에는 속성만 포함됩니다. 그들은 단순히 웹 문서가 서로 어떻게 관련되어 있는지 보여줍니다.
이제 링크 태그와 관련된 속성을 살펴보겠습니다.
Hreflang 속성
가장 중요한 속성은 태그는 href 및 hreflang입니다. 링크의 대상을 나타내고 대체 페이지의 국가 및 언어를 지정하는 속성.
XNUMXD덴탈의 hreflang 속성 주로 다른 언어로 된 동일한 사본을 포함하는 웹사이트용으로 설계되었습니다. 이를 통해 검색 엔진은 웹 사이트 방문자에게 어떤 페이지 버전을 표시해야 하는지 알 수 있으므로 원하는 언어로 콘텐츠를 볼 수 있습니다.
XNUMXD덴탈의 hreflang 속성은 다음에서도 사용할 수 있습니다. 링크된 웹 페이지의 언어를 정의하는 태그이며 HTML 코드는 다음과 같습니다.
<링크 rel="대체" href="https://website.com" hreflang="ko-kr" />
코드는 세 부분으로 나눌 수 있습니다.
- XNUMXD덴탈의 대체 값은 웹 페이지에 대체 관련 페이지가 있음을 검색 엔진에 나타냅니다.
- XNUMXD덴탈의 HREF 속성은 링크된 페이지의 URL을 정의합니다.
- 뒤에 표시되는 언어 코드 hreflang 속성을 통해 검색 엔진은 링크된 페이지의 언어 또는 국가를 알 수 있습니다. 다음으로 알려진 언어 코드의 전체 목록을 확인하십시오. ISO 639-1 코드.
XNUMXD덴탈의 hreflang 속성은 HTML이 아닌 문서의 HTTP 헤더에 추가로 사용되거나 사이트의 XML 사이트맵에 지정될 수 있습니다.
Rel=“nofollow” 속성
XNUMXD덴탈의 rel =”nofollow” 속성은 검색 엔진 봇이 다음에 표시된 URL을 따라갈 수 없음을 나타냅니다. HREF 속성을 사용하지 않는 것입니다.
이 속성은 웹사이트 방문자에게 아무런 영향을 미치지 않으므로 방문자는 여전히 링크를 클릭하여 다른 페이지로 이동할 수 있습니다. 그러나 페이지를 방문하기 위해 링크를 따라가거나 한 페이지를 다른 페이지로 연결하는 특정 긍정적인 측면을 강조하는 것은 봇에 영향을 미칩니다.
이 속성은 다음과 같이 단일 링크에 적용될 수 있습니다.
<a href=www.website.com rel="노팔로우">링크 앵커 텍스트
또는 다음에서 이를 사용하여 페이지의 모든 링크를 팔로우하지 않음으로 표시할 수 있습니다. noindex 속성과 같은 태그:
name="로봇" content="nofollow"/>
그러나 이는 단지 검색 엔진과 그 봇에 관한 것이 아닙니다. 웹사이트 방문자가 링크된 웹페이지를 클릭하면 nofollow 링크를 통해 간접적인 혜택을 누릴 수 있습니다.
Google의 rel=“nofollow” 속성 사용
몇 년 전, Google에서 몇 가지 사항을 변경했습니다. ~로 따르지 속성과 도입 UGC 과 후원 속성. 달리 따르지 속성을 통해 게시자는 링크와 대상 페이지 간의 관계를 훨씬 더 명확하게 설명할 수 있습니다.
페이지 순위를 매길 때 연결된 페이지를 고려해서는 안 되는 경우를 Google이 인식하는 데 도움이 됩니다.
- XNUMXD덴탈의 UGC 속성은 사용자 생성 콘텐츠를 나타내며 공개적으로 사용 가능한 리소스를 통해 추가된 링크를 표시하는 데 사용됩니다.
- XNUMXD덴탈의 후원 속성은 광고 또는 후원을 통해 얻은 링크를 식별하는 데 사용됩니다.
또한 Google은 따르지, UGC및 후원 속성은 이제 검색 엔진에서 힌트로 간주됩니다. Google의 봇은 이러한 링크를 무시하곤 했지만 이제는 제공된 "힌트"를 고려할 수 있지만 여전히 링크를 "nofollow"로 취급할 수 있습니다.
정식 속성
링크 태그의 rel = "표준" 속성을 통해 SEO는 어떤 다른 웹 페이지를 고려해야 하는지 지적할 수 있습니다. 규범적인—페이지의 기본 버전이지만 사본이 존재할 수 있습니다. SEO 관점에서 이는 자연 검색에서 특정 페이지를 홍보하여 해당 페이지의 순위가 매겨지는 것을 차단하는 데 도움이 됩니다.
이 속성은 다음과 같습니다.
canonical 속성이 있는 코드는 페이지의 요소. 다음에 검색 엔진 봇이 표준으로 표시할 페이지를 지정해야 합니다. HREF 속성을 사용하지 않는 것입니다.
Google이 말하는 내용을 확인하세요. 정식 링크 더 많은 것을 알 수 있습니다.
: 웹 페이지에 이미지 삽입
XNUMXD덴탈의 태그는 이미지가 있는 모든 페이지에 있습니다. 이미지를 HTML 코드에 삽입하고 PNG, JPEG 또는 GIF 형식으로 표시하는 데 사용됩니다. 다른 파일에 대한 링크 형식으로 이미지를 추가할 수도 있습니다. 이렇게 하려면 간단히 태그에 컨테이너.
이미지는 HTML로도 사용할 수 있습니다. 이미지 맵 이미지에 링크 역할을 하는 클릭 가능한 영역이 포함된 경우. 이미지 맵은 클릭할 수 있는 다양한 모양의 보이지 않는 영역으로 나눌 수 있다는 점을 제외하면 일반 이미지와 전혀 다르지 않습니다.
흥미롭게도 이 태그는 실제로 페이지에 이미지를 삽입하는 것이 아니라 이미지가 페이지에 표시되도록 이미지에 연결됩니다. 그만큼 태그는 기본적으로 서버와 같이 실제로 다른 곳에 있는 이미지의 컨테이너 역할을 합니다.
다음은 HTML 코드의 태그는 다음과 같습니다.
보시다시피 이 태그에는 세 가지 속성이 있습니다. 태그가 작동하려면 그 중 하나를 올바르게 입력해야 하며, 다른 하나는 값 없이 그대로 둘 수 있습니다. 세 가지를 좀 더 자세히 살펴보겠습니다.
소스 속성
src 속성의 주요 목적은 웹 페이지에 표시되는 이미지의 파일이 있는 위치(URL)를 나타내는 것입니다. URL에서와 같이 이미지의 위치는 두 가지 방법으로 지정할 수 있습니다. SRC 속성을 사용하지 않는 것입니다.
이미지를 보관하는 컨테이너와 동일한 도메인에서 이미지를 찾을 수 있는 경우 상대 URL을 사용해야 합니다. 이 경우 도메인 이름은 URL 주소에 포함되지 않습니다. URL 시작 부분에 슬래시가 없으면 해당 페이지에 상대적입니다.
src=”이미지파일.png”
그러나 URL 시작 부분에 슬래시가 있으면 도메인에 상대적입니다.
src="/images/imagefile.png"
상대 URL은 예를 들어 다음과 같은 경우 도메인 변경으로 중단되지 않습니다. HTTP에서 HTTPS로 전환. 브라우저에서 이미지를 찾을 수 없는 경우 깨진 링크 아이콘과 함께 대체 텍스트가 표시됩니다.
다른 웹사이트에 있는 이미지를 사용하려면 절대 URL을 사용하세요.
src=”https://www.website.com/images/imagefile.png”
허가 없이 외부 소스의 이미지를 사용하는 것은 저작권법을 위반할 수 있으며 귀하는 해당 이미지를 제어할 수 없으며 언제 제거되거나 업데이트되는지 알 수 없습니다.
SEO 측면에서 이 속성의 유일한 목적은 이미지를 인덱싱하고 이미지 검색에서 순위를 매기는 데 필요하다는 것입니다. 또한 이미지 태그는 이 속성 없이는 작동하지 않습니다.
대체 속성
이 속성의 주요 목적은 어떤 이유로든 페이지에 이미지를 표시할 수 없는 경우 표시될 대체 텍스트를 나타내는 것입니다. 검색 엔진은 이미지에 묘사된 내용을 완벽하게 이해할 수 있는 기술을 찾기 위해 여전히 고군분투하고 있기 때문에 다른 속성 다른 방법을 제공합니다. 제목 속성 - 이미지에 묘사된 내용을 이해하고 궁극적으로 이미지 검색에서 순위를 매깁니다.
더 나은 SEO를 위해 이미지를 설명하고 웹 페이지의 주제와 관련된 키워드를 사용하십시오.
인간 웹 사이트 방문자의 경우 alt 속성의 텍스트는 화면 판독기 및 보조 기술에서 맹인 또는 시각 장애인이 이미지에 포함된 내용을 이해하는 데 사용됩니다. 따라서 그러한 사람들이 콘텐츠를 흡수하도록 돕는 측면에서 alt 속성을 최대한 활용하고 싶을 수 있습니다.
비록 다른 속성은 제목 속성과 같이 이미지 태그에 있어야 하며 반드시 입력할 필요는 없습니다. 그러나 위의 사항을 고려하여 결국 작성하는 것이 좋습니다.
제목 속성
XNUMXD덴탈의 제목 속성은 이미지의 내용을 설명합니다. 이 속성은 최적화에 중요하지는 않지만 다른 속성은 검색 순위에 사용되지 않기 때문에 사용자가 이미지 위로 마우스를 가져가면 추가 정보를 제공할 수 있으므로 여전히 채울 가치가 있습니다.
많은 다른 속성이 다음과 함께 사용됩니다. 페이지에서 이미지의 위치, 크기 및 디자인 기능을 담당하는 태그입니다. 여기에 그 중 일부가 있습니다.
- 크로스오리진: Cross-Origin Access를 허용하는 타사 사이트의 이미지 사용을 캔버스와 함께 사용할 수 있습니다.
- 높이: 이미지 높이 정의
- 이스맵: 이미지를 서버 측 이미지 맵으로 정의
- 로딩중: 브라우저가 이미지를 바로 로드해야 하는지 또는 특정 조건이 충족될 때까지 기다려야 하는지를 정의합니다.
- 긴 설명: 자세한 이미지 설명이 포함된 웹 페이지를 정의합니다.
- 리퍼러 정책: 이미지를 가져올 때 사용해야 하는 리퍼러 정보를 정의합니다.
- 크기: 다양한 페이지 레이아웃에 대한 이미지 크기를 정의합니다.
- Srcset: 다양한 시나리오에서 사용해야 하는 이미지 파일 목록을 제공합니다.
- 유스맵: 이미지를 클라이언트측 이미지 맵으로 정의
- 폭: 이미지 너비를 정의합니다.
XNUMXD덴탈의 태그는 HTML 전역 속성 및 HTML 이벤트 속성도 지원합니다.
별도의 태그 그룹은 텍스트를 굵게, 기울임꼴, 밑줄 등으로 강조하는 역할을 합니다. 텍스트 선택은 독자와 검색 엔진 모두를 위해 텍스트의 중요한 부분을 논리적으로 강조해야 할 때 유용합니다.
텍스트 서식을 지정하는 데 도움이 되는 가장 일반적인 태그는 다음과 같습니다.
- XNUMXD덴탈의 태그는 텍스트를 기울임꼴로 만듭니다.
- XNUMXD덴탈의 태그는 강조 텍스트를 정의합니다. 태그 내의 콘텐츠는 기울임꼴로 표시됩니다. 스크린 리더는 단어를 발음할 때 언어 강세를 사용합니다. :
강조된 텍스트
주요 차이점은 과 태그는 후자는 중요한 단어 또는 단어 섹션(SEO에 유용함)에 의미론적 강조를 제공하는 반면, 전자는 다른 분위기나 목소리를 보여주기 위해 일반적으로 이탤릭체로 스타일이 지정된 오프셋 텍스트일 뿐입니다.
- XNUMXD덴탈의 태그는 텍스트를 굵게 표시합니다.
대담한 텍스트
- XNUMXD덴탈의 태그는 텍스트도 굵게 만듭니다. 그러나, 아무런 논리적인 의미 없이 텍스트를 굵게 만드는 태그입니다. 이 태그는 검색 엔진에 굵게 표시된 텍스트가 매우 중요하다는 사실을 알려줍니다.
강력한 텍스트
코드에서 다음과 같이 표시됩니다.
: 선택한 텍스트 섹션에 스타일 또는 서식을 적용합니다.
XNUMXD덴탈의 태그는 더 큰 콘텐츠 블록 내에서 텍스트의 특정 섹션에 스타일이나 서식을 적용하는 데 사용되는 인라인 요소입니다. 텍스트 자체의 구조나 의미를 변경하지 않습니다. 대신 대상 스타일 지정을 위한 컨테이너 역할을 합니다.
HTML 코드는 다음과 같습니다.
이 단어는 파란색.
코드에서 직접 표시되는 방법은 다음과 같습니다.
XNUMXD덴탈의 요소는 다목적이며 다른 요소 내에 중첩되어 개별 단어, 구문 또는 단락의 작은 섹션에 선택적으로 스타일을 지정할 수 있습니다. CSS 스타일을 추가하여 글자색을 변경하거나 배경색을 적용하는 등 태그를 사용하여 텍스트의 특정 부분을 시각적으로 구분하여 강조할 수 있습니다.
XNUMXD덴탈의 태그는 JavaScript 기능에 대한 후크 역할을 할 수 있습니다. 에 ID 또는 클래스를 할당하여 요소를 사용하면 JavaScript를 사용하여 콘텐츠를 쉽게 대상으로 지정하고 조작할 수 있습니다. 이는 대화형 기능, 동적 콘텐츠 업데이트 또는 텍스트의 특정 부분 내 이벤트 처리 가능성을 열어줍니다.
: Defines internal CSS styles
XNUMXD덴탈의 HTML의 태그는 HTML 문서 내에서 내부 CSS 스타일을 정의하는 데 사용되므로 외부 CSS 파일 없이도 웹 페이지의 특정 요소나 섹션에 사용자 정의 스타일을 적용할 수 있습니다.
h1 {색상:빨간색;}
p {색상:파란색;}
제목 단락.
내부에 CSS 규칙을 배치하여 태그를 사용하여 콘텐츠의 시각적 표시를 제어할 수 있습니다. 여기에는 색상, 글꼴, 레이아웃 등과 같은 속성이 포함됩니다. 그만큼 태그는 단일 HTML 파일 내에서 HTML 요소의 스타일을 구성하고 관리하는 편리한 방법을 제공하므로 웹 페이지의 모양을 보다 쉽게 유지하고 수정할 수 있습니다.
일반적으로 태그는 HTML 문서 섹션:
의 사용 태그 자체는 SEO에 직접적인 영향을 미치지 않지만 태그를 지정하고 HTML 요소에 스타일을 적용하면 간접적으로 영향을 미칠 수 있습니다.
HTML 문서 내에서 직접 인라인 스타일을 사용하는 것은 일반적으로 덜 최적의 방법으로 간주됩니다. 이 접근 방식은 확장성과 재사용성을 방해할 수 있는 복잡하고 유지 관리하기 어려운 코드베이스로 이어질 수 있습니다. 대신 외부 CSS 파일 또는 내부 스타일시트를 활용하여 관심 사항을 명확하게 분리하고 코드 구성을 개선하며 전체 웹 사이트에서 일관되고 효율적인 스타일 지정을 용이하게 하는 것이 좋습니다.
, , : 데이터를 표와 목록으로 구조화 및 구성
표와 목록은 페이지의 정보를 구성하는 데 도움이 되며 Google의 답변 상자에 나타날 수 있는 기회라는 달콤한 보너스를 제공합니다. 예를 들어 "지역별 국가 비교"라는 쿼리를 입력하면 다음 표가 포함된 답변 상자가 표시됩니다.
추가 정보가 모두 포함되지 않은 깔끔한 HTML 코드는 다음과 같습니다.
table, th, td { border: 1px solid black; border-collapse: collapse;
}
국가 양 미국 9.16만 평방 킬로미터 캐나다 9.9만 km²
이 약어를 분해하고 사용 방법을 알아 보겠습니다. , , , 과 올바르게 태그:
- : 테이블의 구조와 내용을 정의합니다. 그만큼 , , , 및 기타 요소는 내부에서 사용됩니다. 꼬리표. 속성을 사용하여 테이블을 완전히 변경할 수 있습니다: 테이블 정렬, 배경 이미지 설정, 배경 색상 변경, 테두리 너비 설정 등
- : 테이블 설명의 제목을 만듭니다.
- : 테이블에 행을 생성합니다.
- : 테이블에 표준 셀을 생성합니다.
- : 양쪽 정렬된 굵은 텍스트로 테이블에 헤더 셀을 생성합니다.
목록에 관한 한 비슷한 이야기를 볼 수 있습니다. 목록의 SEO 가치는 페이지의 가능성을 높이는 명확하고 간결한 단계별 구조에 있습니다. 추천 스니펫에 표시됨.
다음은 정렬되지 않은 HTML 코드의 예입니다() 및 주문() 목록 :
정렬되지 않은 목록 항목 목록 항목 하나 더 다른 목록 항목 주문 목록 항목 목록 항목 하나 더 다른 목록 항목
다시 한번 분해해서 사용법을 알아봅시다. , 과 올바르게 태그:
- : 정렬되지 않은(글머리 기호) 목록을 정의합니다.
- : 정렬된 목록 정의
- : 목록 항목의 값을 지정합니다. 여기서 목록의 각 요소는 태그
- 과
- 태그 예” 클래스 =”wp-image-48403″ srcset =”https://zephyrnet.com/wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-12 .png 2048w, https://zephyrnet.com/wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-60.png 450w, https://zephyrnet.com /wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-61.png 924w, https://zephyrnet.com/wp-content/uploads/2023/07/ html-tags-you-cant-do-without-in-2023-62.png 768w, https://seranking.com/blog/wp-content/uploads/2023/06/ul-ol-tags-1536×828 .png 1536w” 크기=”(최대 너비: 709px) 85vw, (최대 너비: 909px) 67vw, (최대 너비: 1362px) 62vw, 840px”>
SEO의 관점에서 테이블을 사용하면 검색 엔진이 쉽게 테이블 데이터를 가져오고 결과적으로 기사 순위를 높일 수 있기 때문에 목록 대신 테이블을 사용하는 것이 훨씬 더 유리합니다.
: 브랜딩 및 내비게이션을 소개하는 웹 페이지의 상단 섹션을 정의합니다.
XNUMXD덴탈의 태그는 앞으로 콘텐츠를 소개하기 위해 페이지 또는 섹션 헤더를 정의하도록 설계되었으며 일반적으로 로고 또는 아이콘, 탐색 링크 및 검색 표시줄이 있습니다.
여러 가지가 있을 수 있음을 지적하는 것이 중요합니다. 태그는 단일 HTML 코드에 있지만 태그 자체는 또는 다른 꼬리표. 그만큼 태그는 HTML 전역 속성 및 HTML 이벤트 속성을 지원합니다.
HTML 코드는 다음과 같습니다.
여기에 제목 쓰기 게시자: John Appleseed 콘텐츠를 소개하세요 이제 모든 세부 사항에 들어가십시오.
실행하면 다음과 같이 나옵니다.
이제 이것은 단지 예일 뿐이지만 다음을 쉽게 찾을 수 있습니다. 많은 웹사이트의 맨 위에 사용되는 요소:
SEO 이점 측면에서 검색 엔진 봇은 헤더가 페이지 형식을 제공하여 페이지의 콘텐츠를 스캔할 수 있도록 만들기 때문에 헤더를 사용자 친화적인 것으로 간주합니다. 제목이 없으면 검색 봇이 귀하의 페이지가 사용자에게 친숙하지 않다고 생각할 수 있으며 결과적으로 귀하의 순위가 타격을 받을 수 있습니다. 또한 헤더에는 내부 탐색 링크도 포함될 수 있으므로 검색 엔진은 사이트 구조에서 어떤 페이지가 가장 중요한지 명확하게 이해할 수 있습니다.
에게 : 다양한 수준에서 제목 정의
모든 온라인 콘텐츠는 검색 엔진과 사용자가 내용을 이해하는 데 도움이 되는 방식으로 구성됩니다. 결과적으로 전체 텍스트는 제목을 가지며 각각 고유한 제목이 있는 논리적 의미 블록으로 나뉩니다. HTML은 특수 태그를 사용하여 페이지에서 제목과 같은 요소를 강조 표시합니다.
XNUMX개 수준의 제목이 있습니다. h1 ~ h6. 주요 제목으로 사용되며 일반적으로 텍스트 위에 배치됩니다. 모든 헤더는 계층 구조 원칙을 따라야 합니다. 태그는 대부분의 경우 페이지에서 한 번만 사용됩니다.
이것은 제목 1입니다 이것은 제목 1입니다 이것은 제목 1입니다 이것은 제목 2입니다 이것은 제목 2입니다 이것은 제목 2입니다
HTML 코드는 다음과 같습니다.
이되었습니다 확인 된 그 태그에 우선 순위가 있습니다. 아무리 많아도 최적화된 제목은 여전히 최적화된 .
SEO 이점을 얻으려면 콘텐츠에서 헤더 사용과 관련된 모범 사례를 고수하는 것이 가장 좋습니다. 하나의 h1 헤더만 사용하고 헤더 계층 구조를 유지하십시오.
참고로 과 태그는 같은 것이 아닙니다. 혼란은 둘 다 페이지의 콘텐츠를 설명하는 유사한 기능을 가지고 있다는 사실로 인해 발생할 수 있습니다. 하지만 이 두 태그의 주요 차이점은 제목이 스니펫, 소셜 미디어 및 브라우저 탭에 표시되는 반면, 태그는 페이지에 헤더로만 표시됩니다. 게다가 목적이 다르기 때문에 달라야 합니다. 제목은 SERP의 사람들을 끌어들이고 태그는 콘텐츠를 설명하여 검색자가 올바른 페이지에 도달했는지 확인합니다.
: 웹 페이지 하단에 표시하여 내비게이션 및 링크 구조를 더욱 개선합니다.
XNUMXD덴탈의 태그는 웹사이트에서 문서 또는 섹션 바닥글을 정의하도록 설계되었습니다.
이 태그는 저자, 저작권, 연락처 세부 정보에 대한 정보를 포함할 수 있습니다. 태그 내의 ), 관련 문서 및 페이지에 대한 링크, 맨 위 링크로 돌아가기, 사이트맵일 수도 있습니다. HTML 코드는 여러 개를 포함할 수 있습니다. 태그. 또한 이 태그는 HTML 전역 속성 및 HTML 이벤트 속성을 지원합니다.
다음은 HTML 코드의 예입니다.
바닥글 요소 저자: 존 애플시드[이메일 보호]">[이메일 보호]
라이브 코드는 다음 페이지를 생성합니다.
위의 예는 떠오르는 일반적인 바닥글이 아니지만 다양한 기사에서 찾을 수 있습니다. 아래에서 HTML 코드와 함께 SE Ranking 홈페이지의 링크가 포함된 바닥글을 볼 수 있습니다.
대부분의 경우 바닥글은 전체 웹 사이트에서 동일하며 사용자에게 필요할 수 있는 모든 정보를 제공합니다.
그러나 바닥글을 사용하면 SEO에 어떤 이점이 있습니까? 바닥글에는 링크가 포함되어 있습니다. 많은 링크. 그리고 SEO에서 이것은 명확한 내부 링크 구조를 제공하기 때문에 중요합니다. 따라서 검색 엔진이 볼 수 있도록 모든 중요한 페이지가 바닥글에서 연결되어 있는지 확인하십시오.
: 웹 페이지를 섹션 또는 컨테이너로 나눕니다.
XNUMXD덴탈의 태그는 HTML 코드에서 섹션을 정의하도록 설계되었습니다. 모든 유형의 HTML 요소를 포함하는 데 사용됩니다.
자세히 설명하자면, 태그는 내용의 모양을 변경하기 위해 문서의 일부를 강조 표시하기 위한 블록 요소입니다. 매번 태그의 스타일을 설명할 필요가 없도록 외부 스타일 시트에서 스타일을 선택하고 수업 or id 선택기 이름과 함께 속성.
HTML 코드는 다음과 같습니다.
.myDiv {
border: 3px outset black;
background-color: lightblue;
text-align: center;
}
div 태그
div 태그의 제목 div 태그의 텍스트.
div 태그 외부의 텍스트입니다.코드를 성공적으로 실행하면 div 요소 내의 콘텐츠가 나머지와 분리된 것을 볼 수 있습니다.
XNUMXD덴탈의 태그는 HTML 전역 속성 및 HTML 이벤트 속성도 지원합니다.
SEO 관점에서 페이지 콘텐츠를 직접적인 문제는 아니지만 HTML 문서에 불필요한 태그가 많으면 페이지 속도가 느려져 UX 문제가 발생할 수 있습니다.
: 웹 페이지 내 독립형 섹션을 정의합니다.
평범하고 단순한, 태그는 HTML 문서 섹션을 정의하도록 설계되었습니다. 그러나이 목적 외에도 뉴스 블록, 연락처 세부 정보, 콘텐츠 장 및 대화 상자 탭을 표시하는 데 사용할 수도 있습니다.
이 요소에는 일반적으로 제목이 있으며 하나의 섹션 요소를 다른 요소 안에 배치할 수 있습니다. 또한 다음을 사용하는 것이 좋은 습관으로 간주됩니다. 내의 태그 HTML 문서를 구성할 때 요소. 이를 통해 논리적 계층 구조를 설정하고 콘텐츠의 접근성과 가독성을 향상시킬 수 있습니다.
HTML 코드는 다음과 같습니다.
섹션 제목 섹션의 텍스트
일단 실행하면 시각적으로 다음과 유사하게 나타납니다. or 페이지 구조 측면에서 뚜렷한 차이가 있음에도 불구하고 요소:
아래 스크린샷에서 볼 수 있듯이 우리는 또한 홈페이지의 다른 부분 또는 섹션에 태그를 지정하기 위한 웹사이트 요소:
SEO 측면에서 요소는 별 일 없는 것처럼 보이지만 검색엔진에 더 강력한 신호를 보낸다. 연락처 세부 정보 섹션과 같이 관련 콘텐츠의 논리적 그룹이 태그 내에 래핑되어 있음을 알려줍니다.
: 자체 포함된 콘텐츠를 식별합니다.
XNUMXD덴탈의 태그는 페이지의 주요 콘텐츠를 래핑합니다. 하지만, 과는 달리 태그를 사용하면 다른 사이트처럼 한 위치에서 다른 위치로 잘라내어 붙여넣을 수 있으며 기사는 그 의미를 잃지 않습니다. 또한 이것은 몇 분 안에 완료될 수 있습니다. 이 태그는 기사 및 블로그 게시물에 자주 사용됩니다.
HTML 코드는 다음과 같습니다.
구글 크롬 Google Chrome은 2008년에 출시된 Google에서 개발한 웹 브라우저입니다. Chrome은 오늘날 세계에서 가장 인기 있는 웹 브라우저입니다!
그리고 웹사이트에서 보면 다음과 같습니다.
: 사이드바 또는 관련 콘텐츠에 대한 섹션을 만듭니다.
XNUMXD덴탈의 태그는 제목, 다른 콘텐츠에 대한 링크, 태그 및 기타 정보를 포함하는 페이지 측면의 블록을 정의하는 데 사용됩니다. 이것은 각주, 광고 또는 다른 것을 포함할 수 있지만 일반적으로 사이드바라고 합니다.
별도 요소 내에 배치된 콘텐츠는 페이지의 콘텐츠와 직접 관련되어서는 안 됩니다. 유사한 tag, side는 사이드바만 생성하고 디자인 측면은 표시하지 않습니다. 그러나 CSS를 통해 스타일을 지정할 수 있습니다. 그만큼 태그는 HTML 전역 속성 및 HTML 이벤트 속성을 지원합니다.
블로그 홈페이지의 사이드바에 대한 HTML 코드는 다음과 같습니다.
XNUMXD덴탈의 태그는 검색 엔진이 귀중한 페이지 정보를 빠르게 얻을 수 있도록 도와줍니다. 또한 이 태그를 사용하여 블로그 게시물 중 하나가 아닌 전체 페이지와 관련된 페이지에 포함된 추가 콘텐츠를 제공할 수 있습니다. 이를 통해 검색 엔진은 관련 쿼리에 대해 페이지 순위를 매기는 궁극적인 목표와 함께 페이지 주변을 분석하여 전체적이고 보다 구체적인 주제를 더 잘 이해할 수 있는 기회를 제공합니다.
또는 : 외부 콘텐츠를 포함하는 방법을 결정합니다.
대부분의 SEO 전문가가 프레임을 사용하는 사이트에 눈살을 찌푸린다는 말을 들었을 것입니다(이러한 사이트의 대부분은 90년대에 만들어졌습니다). 이러한 사이트는 최적화하기 어렵고, 인덱싱 속도가 느리고 항상 정확하지는 않으며, 이러한 사이트에는 많은 사용성 문제가 있습니다.
XNUMXD덴탈의 태그는 단일 웹사이트 프레임의 속성을 정의합니다. 그것은 내부에 배치됩니다 페이지를 여러 영역으로 분할하는 컨테이너입니다. 그 중심에는 각 영역이 별도의 웹 페이지입니다.
오늘날 이 기술은 기존 프레임이 HTML5에서 더 이상 지원되지 않기 때문에 구식으로 간주됩니다. 그러나 많은 현대 기술 SUPPORT , 페이지의 텍스트 블록에 프레임을 삽입할 수 있습니다.
XNUMXD덴탈의 태그는 인라인 프레임을 지정하는 데 사용됩니다. 본질적으로 iframe을 사용하면 대화형 지도 및 YouTube 동영상과 같은 사이트의 HTML 코드에 다른 웹사이트를 삽입할 수 있습니다.
그래서, 태그를 사용하면 다른 웹사이트의 콘텐츠를 자신의 웹사이트에 삽입할 수 있습니다. 검색 엔진은 iframe 콘텐츠가 다른 리소스에서 가져오고 있음을 이해하므로 이상적인 옵션은 아니지만 여전히 iframe보다 낫습니다. .
: 탐색 링크로 섹션을 표시합니다.
XNUMXD덴탈의 태그는 사이트 탐색에 사용되며 웹사이트의 가장 중요한 페이지를 가리킵니다.
이미 탐색 및 내부 구조 링크에 대해 논의했기 때문에 과 이 블로그 게시물의 섹션에서 이 태그가 어떻게 다른지 궁금할 수 있습니다. 글쎄, 페이지에 여러 링크 블록이 포함되어 있는 경우 다음을 사용할 수 있습니다. 우선 순위 링크를 표시합니다.
XNUMXD덴탈의 태그는 일반적으로 기본 탐색 메뉴에만 사용됩니다. 이 태그의 도움으로 스크린 리더는 콘텐츠의 초기 렌더링을 건너뛰어야 하는지 여부를 이해할 수 있습니다. 게다가, 태그는 HTML 전역 속성 및 HTML 이벤트 속성을 지원합니다.
HTML 코드는 다음과 같습니다.
탐색 요소 nav 요소는 탐색 링크 세트를 정의합니다. HTML | CSS | 자바스크립트 | 파이썬
아래에서 HTML 코드가 활성화되면 어떻게 보이는지 확인할 수 있습니다.
검색 엔진 최적화를 위해 요소는 웹 사이트에서 가장 중요하다고 생각되는 페이지와 관련하여 검색 엔진 봇에 신호를 보냅니다. 또한 이러한 웹 페이지에 빠르고 쉽게 액세스할 수 있습니다.
: Embeds or references JavaScript code
의 주요 목적 태그는 주로 스크립트를 추가하는 것입니다. 자바 스크립트, HTML 문서로. JavaScript는 사용자 작업에 반응하는 대화형 지도를 만드는 데 사용됩니다. 예를 들어 클릭 시 메뉴가 확장되고 하트 아이콘을 클릭한 후 좋아요가 추가되는 등의 작업이 있습니다.
이 요소는 외부 링크 파일에 대한 링크 또는 스크립팅 문으로 알려진 특정 코딩 언어의 텍스트를 포함할 수 있습니다. 스크립트는 외부 파일에 보관할 수 있으며 모든 HTML 문서에 연결할 수 있습니다.
XNUMXD덴탈의 태그는 HTML 문서의 헤드 또는 본문에 무제한으로 배치할 수 있습니다. 대부분의 경우 스크립트의 위치는 성능에 전혀 영향을 미치지 않습니다. 그러나 다음을 포함하는 것이 좋습니다. 닫기 직전에 스크립트 파일에 대한 링크가 있는 태그 태그를 지정하고 defer 속성을 사용합니다. 이 접근 방식을 통해 브라우저는 스크립트를 실행하기 전에 먼저 페이지의 초기 요소를 로드하고 표시할 수 있으므로 페이지 렌더링 속도가 빨라지고 사용자 경험이 향상됩니다.
다음은 HTML 코드의 예입니다.
우리가 사용의 SEO 이점에 도달하기 전에 다음은 페이지에서 외부 스크립트를 실행할 수 있는 방법과 도움이 될 수 있는 속성에 대한 이해를 제공하는 표입니다.
- 비동기: 페이지가 구문 분석되는 동안 스크립트가 실행되도록 지정합니다.
- 연기하다: 페이지가 구문 분석되면 스크립트가 실행되도록 지정합니다.
- 지원하는 언어: 스크립트가 작성된 코딩 언어를 지정합니다.
- Src: 현재 문서로 가져올 외부 스크립트 파일의 URL 주소를 지정합니다.
- 타입: 콘텐츠 유형을 지정합니다. 태그
스크립트에 async 또는 defer 속성이 없으면 브라우저가 리소스를 구문 분석하기 전에도 지연 없이 가져오고 실행됩니다.
또한 검색 엔진은 종종 JavaScript에 문제가 있음을 기억할 가치가 있습니다. 특정 콘텐츠가 사용자가 작업을 수행한 후에만 사이트에 표시되는 경우 검색 엔진은 일반적으로 콘텐츠를 발견하고 색인을 생성하지 않습니다.
지금까지 Google만이 JavaScript를 처리하는 방법을 알고 있으므로 JavaScript 콘텐츠를 모든 검색 엔진에서 볼 수 있도록 하려면 다음을 사용하는 것이 좋습니다. 동적 렌더링 또는 서버 측 렌더링.
: Highlight and display programming code
XNUMXD덴탈의 HTML의 태그는 컴퓨터 코드 또는 프로그래밍 지침을 나타내는 텍스트 섹션을 묶고 표시하는 데 사용됩니다. 주로 코드 스니펫을 표시하거나 웹 페이지에서 프로그래밍 관련 콘텐츠를 강조 표시하는 데 사용됩니다.
XNUMXD덴탈의 요소는 포함된 텍스트를 고정 폭 글꼴로 렌더링하여 코드의 서식과 들여쓰기를 유지합니다. 이는 일반 텍스트와 코드를 구별하고 가독성을 유지하는 데 도움이 됩니다.
HTML 코드에서 다음과 같이 표시됩니다.
이것은 작업 button HTML에서.
XNUMXD덴탈의 태그를 사용하면 개발자와 독자가 콘텐츠 내의 코드 세그먼트를 쉽게 식별하고 이해할 수 있습니다. 을 사용하여 태그를 사용하면 코드 스니펫을 더 명확하게 표시하고 주변 텍스트에서 눈에 띄게 만들 수 있습니다.
tag example" class="wp-image-48442" srcset="https://zephyrnet.com/wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-25.png 2048w, https://zephyrnet.com/wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-105.png 450w, https://zephyrnet.com/wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-106.png 924w, https://zephyrnet.com/wp-content/uploads/2023/07/html-tags-you-cant-do-without-in-2023-107.png 768w, https://seranking.com/blog/wp-content/uploads/2023/06/code-tag-1536x828.png 1536w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px">Additionally, the <code> tag can be combined with other elements, such as <pre> for preformatted text or <span> for additional styling, to further enhance the appearance and presentation of the code. This combination provides flexibility in applying specific styles or formatting to the code content.
From an SEO perspective, the <code> tag can also be advantageous. Search engines often recognize and treat the content within <code> tags as code, granting it special consideration in terms of indexing and relevance. This can improve the visibility of code-related content in search engine results and attract developers or individuals seeking programming information.
How to check if your tags are in order
To avoid making mistakes in your HTML tags that may affect the quality of your site’s promotion, it is necessary to run a full analysis of the site. You can easily audit your entire website with the help of SE Ranking Website Audit.
A detailed analysis of every single one of your site’s pages will show those with the noindex, hreflang, canonical and alternate tags. Moreover, the tool checks the headers and meta tags for uniqueness and compliance with length restrictions, locates all duplicates and images with empty alt tags, analyzes h1-h6 tags and so much more. Besides errors and comments, the report also includes suggestions on how to solve them. Additionally, you can manually configure how often audits should be performed based on your needs and how often you make changes to the website.
In this blog post, we only covered the tags and attributes that SEO pros are most often faced with. Having a good understanding of the importance of each of these elements, their structure and role on the page, you can identify tag usage errors, correctly develop tasks for programmers and content writers, and, perhaps even do some coding without any help.
You don’t necessarily need to love HTML tags, but knowing which ones are important for site optimization is a definite must. If you want search engines to rank your pages, help them by providing useful and relevant information in the HTML code.
33753 views
- SEO Powered Content & PR Distribution. Get Amplified Today.
- PlatoData.Network Vertical Generative Ai. Empower Yourself. Access Here.
- PlatoAiStream. Web3 Intelligence. Knowledge Amplified. Access Here.
- PlatoESG. Automotive / EVs, Carbon, CleanTech, Energy, Environment, Solar, Waste Management. Access Here.
- BlockOffsets. Modernizing Environmental Offset Ownership. Access Here.
- Source: https://seranking.com/blog/html-tags-in-seo/
Latest Intelligence
