1.<title> 태그를 통해 정확한 페이지 제목 정하기
<title> 태그는 검색 엔진에 페이지의 주제가 무엇인지 알려줍니다. <title> 태그를 HTML 문서의 <head> 요소 내에 만들어서 페이지의 고유한 제목을 달아줍니다.<html> <head> <title>에어비앤비: 휴가용 임대 숙소, 통나무집, 비치 하우스, 독특한 숙소 및 체험</title> </head> <body> ...
1)
<title> 의 내용은 검색결과의 첫 번째 줄에 보여질 수 있습니다. 
<title>에는 웹사이트 혹은 비즈니스의 이름을 명시할 수 있으며 회사가 실제로 위치한 장소나 주로 다루는 항목, 주요 품목 등 중요한 정보를 포함할 수도 있습니다. 이때 페이지 내용과 주제를 효과적으로 전달할 수 있는 제목을 고민해보고 적용합니다. 2) 각 페이지에 사용할 고유한 제목을 사용합니다.
한 가지 사이트에 소속되어 있다고 해서 단일한 내용으로 페이지 제목을 통일하면 안됩니다. 페이지 마다 고유한 제목을 사용하면 검색 엔진은 각각의 페이지가 서로 어떻게 쓰임이 다른지 파악 할 수 있습니다.
3) 짧고 간결한 제목을 사용합니다.
짧고 적절한 제목을 사용합니다. 제목이 너무 길거나 관련성이 낮은 것으로 판단되면 검색엔진은 검색 결과에 제목의 일부만 표시하거나 자동으로 생성된 다른 제목을 표시할 수도 있습니다. 또한 사용자가 사용한 검색어나 사용기기에 따라 서로 다른 제목을 표시하는 경우도 있습니다. 너무 길거나 불필요한 내용을 넣지 않도록 하는게 좋습니다.
2. description 메타 태그를 사용합니다
description 메타 태그는 페이지가 담고 있는 내용을 요약하여 서술합니다. 페이지 제목은 단어 몇 개나 문구로 이뤄질 수 있지만 페이지의 description 메타 태그는 한두 문장 또는 짧은 단락 정도로 길어질 수 있습니다. <title> 태그와 마찬가지로 description 메타 태그도 HTML 문서의 <head> 요소 내에 있습니다.<html> <head> <meta name="description" content="에어비앤비에서 세계 곳곳의 휴가용 임대 숙소, 통나무집, 비치 하우스, 독특한 숙소 및 체험을 찾아보세요. 호스트 분들이 있기에 가능합니다."> </head> <body> ...
1) description 메타 태그를 사용해야 하는 이유
description 메타 태그에 쓰여진 내용을 페이지의 스니펫으로 사용할 수 있습니다. 하지만 경우에 따라 Google에서 페이지에 표시되는 텍스트 중에 사용자의 검색어와 잘 어울리는 텍스트가 있는 경우 이를 스니펫으로 선택할 수도 있습니다. 때문에 description의 내용이 100% 스니펫에 사용되는 것은 아니지만, Google에서 스니펫으로 사용할 텍스트를 찾지 못하는 경우도 있기 때문에 description 메타 태그를 각 페이지에 추가하는 것은 항상 권장됩니다.
description이 스니펫으로 사용된 예시2) 페이지 콘텐츠를 정확하게 요약하기
사용자의 흥미를 유발할 수 있는 설명을 작성하세요.
description 메타 태그의 길이에 제한은 없지만 스니펫으로 사용하기 알맞은 정도의 길이가 좋습니다. 되도록 사용자가 자신에게 유용하며 관련된 정보가 있는지 판단하는 데 필요한 모든 관련성 있는 텍스트를 담고 있는 것이 좋습니다. 페이지 내용과 관련이 없는 내용 혹은 '여행에 관한 페이지'와 같은 일반적인 설명을 사용하는 경우도 피해주세요.3) 각 페이지마다 중복 없이 고유한 설명을 사용합니다.
각 페이지에 서로 다른
description 메타 태그가 있으면 site: 연산자를 사용한 검색 (사이트 내에서 해당 키워드를 검색합니다.) 등 사용자가 특정 사이트 안에서 여러 개의 페이지를 가져올 수 있는 검색에 도움이 됩니다. 사이트의 모든 페이지 또는 여러 페이지에 단일한 description 메타 태그를 사용하는 경우는 피하세요.
site: 연산자를 통해 검색된 화면 예시 <구글에서 사용 가능한 유용한 검색 연산자>
1. OR : 검색어 조합. (ex. 물고기 OR 쇼핑)
2. @sns : 소셜미디어 검색 (ex. 강아지 @youtube, @instagram ... )
3. related: :관련 사이트 검색 (ex. related:daum.net)
4. - : 검색어에서 단어 제외 (ex. 애완동물 -고양이)
3. 제목 태그(h1 ~ h6)를 사용하여 중요한 텍스트 강조하기
의미 있는 제목을 사용하여 중요한 주제를 표시하고 콘텐츠의 계층 구조를 만들어 사용자가 쉽게 문서를 탐색할 수 있도록 합니다.
1) 개요를 작성한다는 가정하에 제목을 정합니다.
페이지 내용 중 중요한 부분과 덜 중요한 부분이 무엇인지 생각해보고 제목 태그를 어디에 사용하는 것이 적절할지 결정해야 합니다. 이때 콘텐츠의 구획을 나타내는 위치가 아님에도 제목 태그를 굳이 사용하는 경우 혹은 <h3> 로 제목을 작성한 구획 안에 <h2> 로 소제목이 들어가 있는 것처럼 중요도를 생각하지 않고 무질서하게 섞어 쓰는 경우는 지양해야 합니다.
2) 꼭 필요한 부분에만 제목 태그를 사용합니다.
구획의 제목을 나타내야하는 경우에만 제목 태그를 사용하세요. 페이지에 제목 태그가 너무 많으면 사용자가 내용을 살펴볼 때 하나의 주제가 어디에서 시작되어 어디에서 끝나는지 결정하기 어려워집니다. 이때 제목 태그를 단순히 스타일링을 하기 위한 요소로 사용해서는 안되며, 제목의 내용이 너무 길어지지 않게 작성해야 합니다.
4. 의미있는 링크 텍스트 작성하기
링크 텍스트는
<a> 태그 내부의 콘텐츠 영역에 위치한 텍스트로, 사용자와 Google에 지금 들어가려는 페이지가 어떤 페이지인지에 대한 설명을 제공합니다. 적절한 앵커 텍스트를 사용하면 사용자와 검색엔진이 연결된 페이지의 내용을 쉽게 이해할 수 있습니다.
1) 텍스트를 통한 설명 제공
연결된 페이지의 기본적인 내용을 파악할 수 있는 텍스트를 작성합니다.
'웹사이트', '쇼핑몰', '여기를 클릭하세요' 등 그 의미를 짐작하기 어려운 텍스트, 연결된 페이지와 아무런 관련이 없는 텍스트를 사용하는 경우, 텍스트의 내용이 연결된 url 주소 그 자체일 경우는 피하도록 작성해야 합니다.
2) 텍스트는 간결하고 한 눈에 들어오도록 작성합니다.
짧으면서도 충분한 설명을 제공하는 텍스트를 작성하세요. 단어 몇 개 또는 짧은 문구가 좋습니다. 지나치게 긴 문장이나 짧은 단락을 이룰 정도로 앵커 텍스트를 길게 작성하는 것은 지양해야 합니다.
3) 링크를 쉽게 발견할 수 있도록 스타일을 설정합니다.
사용자가 일반 텍스트와 링크 텍스트를 쉽게 구분할 수 있게 스타일을 작성합니다. 사용자가 링크를 못 보고 지나치거나 실수로 클릭하게 되면 사용자의 사용 경험을 저해하고 링크의 유용성이 떨어집니다. 링크를 일반 텍스트처럼 보이게 하는 CSS는 지양합니다.
4) 웹 페이지 내부에서 사용 가능한 링크 텍스트를 사용해 봅시다.
일반적으로 링크를 작성할 때 외부 웹사이트와의 링크만 고려하기 쉽습니다. 하지만 내부 링크용으로 앵커 텍스트를 사용하는 것을 고려해본다면 사용자 및 Google이 사이트를 탐색하기 더욱 쉬워집니다. 이때 사용자를 생각하기 보다는 검색 엔진만을 고려하여 키워드로만 잔뜩 채워져 있거나 지나치게 긴 앵커 텍스트를 사용하는 경우는 지양하고, 사용자가 사이트 탐색에 도움이 되는 링크인지 고려해 봅니다.
5. SEO를 고려한 HTML <img>
<img> HTML 마크업을 사용하면 크롤러가 이미지를 찾고 처리할 수 있습니다. 또한 이미지에 loading="lazy" 속성을 사용하면 브라우저는 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않고 렌더링 성능을 향상할 수 있습니다.
1) alt 속성을 사용합니다.
파일 이름을 짓거나 alt 속성 값을 사용할 때, 이미지와 관련된 설명을 제공해야 합니다.
alt 속성을 사용하면 어떤 이유로 이미지를 표시할 수 없을 때 아래 이미지처럼 대신 표시할 텍스트를 지정할 수 있습니다. 또한 alt 속성의 내용은 사용자가 스크린 리더와 같은 보조 기술을 사용하여 사이트를 보고 있을 때 그림에 관한 정보를 제공합니다.
이미지를 링크로 사용하는 경우, 해당 이미지의 대체 텍스트가 텍스트 링크의 앵커 텍스트와 비슷하게 취급됩니다. 즉, alt 속성이 적절한 설명을 제공한다면 앵커 텍스트는 생략해도 좋습니다. 마지막으로 이미지의 파일 이름과 대체 텍스트를 최적화하면 Google 이미지와 같은 이미지 검색 프로젝트에서 이미지를 더욱 쉽게 이해할 수 있습니다.
2) 간단하지만 설명이 담긴 파일 이름과 alt 값을 사용합니다.
파일 이름과 대체 텍스트는 짧으면서도 정확한 설명을 제공하는 것이 가장 좋습니다.
image1.jpg, pic.gif, 1.jpg와 같은 일반적인 파일 이름을 사용하는 경우, 매우 긴 파일 이름을 작성하는 경우, 대체 텍스트를 키워드로 채워 넣거나 전체 문장을 복사하여 붙여넣는 경우는 지양하도록 합니다.3) 이미지를 링크로 활용하고자 할때 대체 텍스트를 제공합니다.
이미지를 링크로 사용하기로 결정한 경우 대체 텍스트를 작성하면 Google에서 링크하려는 페이지에 대해 더 잘 이해할 수 있습니다. 텍스트 링크의 앵커 텍스트를 작성한다고 생각해 보세요.