댓글 검색 목록

[html] SEO CHEAT SHEET

페이지 정보

작성자 운영자 작성일 20-06-21 09:05 조회 1,759 댓글 0

SEO에 관해서는 웹 사이트를 최신 상태로 유지하기 위해 고려해야 할 많은 것들이 있습니다. 이 도구는 On-Page SEO의 기술적인 측면에서 도움을 주기 위한 것이며 모범 사례의 정렬 된 목록을 포함합니다. 그리고 나는 당신이 바쁜 사람이라는 것을 알고 있기 때문에 TL; DR 방식으로 구현하려고 했습니다.

https://9elements.com/seo-cheat-sheet/

HTML 태그

많은 장소에서 "태그"라는 용어가 100 % 정확하지는 않지만 (일부 태그는 "요소"또는 "속성"이라고 올바르게 지칭해야 함) 대부분의 사람들이 올바른 기술적 용어가 아닌 태그를 찾는 경향이 있기 때문에 이 용어를 사용합니다.

TITLE TAG

아마도 가장 과소 평가되었지만 가장 중요한 태그일 것입니다. 모든 페이지에는 고유한 제목 태그가 있어야 하며 해당 특정 사이트와 관련된 키워드가 포함되어야 합니다.

<title>
Website.com - About
</title>

<title>
Primary Keyword – Secondary Keyword | Brand Name
</title>

주문이 중요합니다. 제목의 첫 번째 단어는 마지막 단어보다 "힘"이 더 큽니다.
이 페이지와 가장 관련성이 높은 키워드는 무엇입니까?
창의력을 발휘하십시오. 실제로, 웹상에서 가장 큰 직업 검색 중 하나는 제목에 동적 날짜를 포함하여 항상 관련성을 유지합니다.
색인 페이지인 경우 주문을 다음으로 전환하십시오.

<title>
Brand Name – Relevant Keywords for your Page
</title>

메인 페이지가 브랜드 이름으로 순위를 정하기를 원하기 때문입니다.

META DESCRIPTION TAG

메타 설명은 SEO 순위에 직접적인 영향을 미치지 않습니다. 그럼에도 불구하고 검색 결과에서 우수한 클릭률을 얻으려면 매우 중요합니다.

권장 길이는 50-160 자입니다.
잠재적인 방문자를 위해 콘텐츠를 "광고"해야 하는 곳입니다. 매력적인 광고 문구를 작성하십시오.
해당 페이지와 관련된 키워드를 사용하십시오. 남용하지 마십시오.
제목 태그와 마찬가지로 모든 페이지에 대해 고유 한 설명을 생성하고 중복 된 설명 태그를 피하십시오.

HEADING TAG

제목 태그는 웹 사이트의 모든 제목에서 사용해야 하는 <h1> ~ <h6>입니다. SEO 및 유용성에 중요합니다. 사용하는 동안 명심해야 할 몇 가지 :

웹 사이트의 모든 페이지에 하나의 <h1> </ h1> 태그가 있는지 확인하십시오. 단 하나이지만 이것은 필수입니다.
페이지 내용과 관련성을 높이고 해당 페이지를 설명하는 키워드를 사용하십시오.
방문자를 위한 컨텐츠를 올바르게 구성하려면 제목 태그를 사용하십시오. 추천 스니펫에도 중요합니다.

좋은 구조 :

<h1>Main Heading</h1>
<h2>Secondary Heading 1</h2>
<h3>Sub-section of the secondary heading 1</h3>
<h2>Secondary Heading 2</h2>
<h3>Sub-section of the secondary heading 2</h3>

ALT TAG

웹 사이트의 모든 이미지에는 alt 속성이 있어야 합니다. 많은 사람들이 감독하는 경향이 있지만 실제로 이미지 SEO에는 매우 중요합니다. 올바르게 사용하면 많은 사용자가 Google의 이미지 검색을 통해 나를 찾을 수 있습니다.

누군가가 이미지를 보지 않고 대체 텍스트를 읽을 때 머리에 이미지를 그릴 수 있다면 좋은 이미지입니다.
비교적 짧지만 매우 묘사적입니다.
키워드 삽입을 피하십시오 – 2020 년입니다.
“이미지”또는“그림”을 사용하지 마십시오
마침표로 대체 텍스트를 끝냅니다. 이렇게 하면 대체 텍스트의 마지막 단어 다음에 화면 판독기가 잠시 멈추게 되어 사용자에게 보다 쾌적한 독서 환경이 만들어집니다.

man with headphones walking down escalator

Bad alt text:
<img src="escalator.jpg" alt="">

Okay alt text:
<img src="escalator.jpg" alt="man on escalator">

Better alt text:
<img src="escalator.jpg" alt="man walking on escalator">

Best alt text:
<img src="escalator.jpg" alt="man with headphones walking down escalator">

CANONICAL TAG

표준 태그는 Google이 특정 페이지의 마스터 사본을 가리키도록 하는 방법입니다. 이를 올바르게 사용하면 일반적으로 "중복 컨텐츠"및 잠재적인 순위 손실과 관련된 문제를 방지 할 수 있습니다.

표준 태그는 현재 URL을 가리킬 수 있습니다. A 페이지가 마스터 사본 인 경우 A 페이지의 URL을 A 페이지의 표준 태그에 포함 시킬 수도 있습니다.
잘못된 코드는 때때로 같은 URL의 모든 버전에 대해 다른 태그와 같은 문제를 야기 할 수 있습니다. 모든 페이지를 확인하고 그렇지 않은지 확인하십시오.
문제를 방지하려면 색인 페이지에 표준 태그를 포함하십시오.

OPEN GRAPH TAG

오픈 그래프 태그는 Facebook 및 Twitter와 같은 소셜 미디어 사이트에서 올바른 출력을 위해 컨텐츠를 형식화 하는 방법입니다. 전환 요소보다 순위 요소는 아니지만 2020 년 이후에는 중요합니다.

많은 플랫폼에는 고유 한 구조가 있으며 이로 인해 짧은 시간 안에 모든 플랫폼을 나열하기가 매우 어렵습니다. 따라서 Cyrus Shepard의 이 기사를 확인하는 것이 좋습니다. 여기에는 복사 할 수 있는 훌륭한 템플릿이 포함되어 있습니다.

RESPONSIVE SITE META TAG

Google은 2018 년에 모바일 퍼스트 인덱싱을 도입한 이후 모바일 버전의 웹 사이트에서 찾은 정보를 기반으로 검색 결과를 독점적으로 평가했습니다. 따라서 모든 웹 사이트에서 모바일 친화성이 최우선 순위가 되어야 합니다.

반응형 사이트 메타 태그는 검색 엔진에 이 사이트에 반응형 디자인이 있음을 알려줍니다. 휴대 기기를 통해 검색 할 때 사이트가 노출되도록 사이트를 포함 시키십시오.
귀하의 사이트가 모바일 친화적인지 확인하려면 Google의 모바일 친화성 확인으로 이동하십시오.
모바일 친화성을 위해 이 태그를 최소한으로 포함하십시오.

ROBOTS TAG

로봇 메타 지시문은 크롤러가 웹 페이지 콘텐츠를 크롤링 하거나 색인 생성하는 방법에 대한 권장 사항을 제공하는 코드 조각입니다. 반면 robots.txt 파일 지정 문은 크롤러가 웹 사이트 페이지를 크롤링 하는 방법에 대한 권장 사항을 제공합니다.

포함 된 매개 변수는 제안일 뿐입니다. 특히 악의적인 로봇은 이러한 제안을 무시하기로 결정할 수 있습니다.
민감한 데이터 또는 개인 데이터의 경우 색인 보호를 위해 비밀번호 보호와 같은 보다 안전한 메커니즘을 사용하십시오.
페이지의 색인을 생성하지 않으려면 robots.txt 버전 대신 'noindex'와 함께 robots meta 지시문을 사용하십시오.

HREFLANG TAG

hreflang 속성을 사용하면 웹 사이트의 특정 페이지에서 사용 중인 언어를 Google에 알릴 수 있습니다. 이는 귀하의 순위에 직접적으로 영향을 미치지는 않지만 사용자에게 올바른 콘텐츠를 제공하는 검색 엔진에 도움이 됩니다.

hreflang 속성을 페이지 마크업, HTTP 헤더 또는 사이트 맵의 3 가지 위치에 배치 할 수 있습니다. 해당 위치 중 하나만 사용하십시오.
모든 hreflang 속성은 대체 참조 역할을 하는 모든 페이지 뿐만 아니라 자체 참조도 포함해야 합니다.
다음과 같은 방법으로 사용하십시오.

STRUCTURE

HTML STRUCTURE

오늘날 시맨틱 한 HTML 구조는 모든 웹 페이지에서 필수입니다. 검색 엔진이 지정된 컨텐츠를 평가하고 사용자에게 올바르게 제공하도록 도와줍니다. 다른 모든 SEO가 기반으로 하는 웹 사이트의 백본으로 참조하십시오.

이 페이지에서 언급 된 모든 HTML 태그를 올바르게 사용하고 구현하십시오.
모든 요소가 <div> 여야 하는 것은 아닙니다. <section>, <nav>, <article>, <aside> 또는 <footer>와 같이 사용 가능한 모든 섹션 요소를 사용하십시오.
HTML 기반을 올바르게 구성하면 Google 추천 스니펫에 표시되거나 전혀 표시되지 않는 차이가 발생합니다.
모든 블로그 게시물 또는 기사에 목차를 구현하십시오. 이렇게 하면 추천 스니펫을 얻는 데 도움이 됩니다.

STRUCTURED DATA

구조화 된 데이터는 검색 엔진이 검색 결과에서 웹 사이트를 나타내는 방식을 개선하는 데 도움이 되는 필드 라이브러리입니다. 귀하의 페이지에 이것을 구현하는 것이 좋습니다.

구조화 된 데이터에는 JSON-LD 형식을 사용하는 것이 좋습니다. 구조화 된 데이터 코드를 페이지의 <head> </ head> 요소 안에 넣으십시오.
이 생성기를 사용하여 사이트에 대한 구조화 된 데이터를 생성하십시오.
이 도구를 사용하여 올바르게 구현했는지 확인하십시오.
구조화 된 데이터에 대한 자세한 내용은 Google 설명서를 참조하십시오.

Example: <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Corporation", "name": "9elements", "url": "https://9elements.com/", "logo": "https://9elements.com/img/logo.png", "sameAs": [ "https://www.facebook.com/9elements/", "https://twitter.com/9elements", "https://www.instagram.com/9elements/", "https://www.linkedin.com/company/3848376/" ] } </script>

URL STRUCTURE

URL은 사람이 읽을 수 있는 IP 주소 버전이며 검색 엔진은 이를 사용하여 특정 페이지와 검색 쿼리의 관련성을 결정합니다. 따라서 SEO에는 매우 중요합니다.

짧고 관련성 있고 설득력 있게 유지하십시오. 가능하면 단어 만 사용하십시오.
사용자 (또는 검색 엔진)가 읽을 때 해당 사이트에서 무엇을 기대해야 하는지 알아야 합니다.
하이픈 만 사용하여 단어를 구분하십시오.
문제를 방지하려면 소문자 만 사용하십시오.
최대한 짧게 유지하십시오. 조사에 따르면 검색 순위에 도움이 될 수 있습니다.

Bad URL:
https://www.myhomepage.com/title/2379118/?ref_=ttep_ep1

Good URL:
https://www.myhomepage.com/blog/technical-seo-for-beginners/

REDIRECTION

때로는 URL이 변경되거나 더 이상 존재하지 않습니다. 리디렉션은 하나의 URL을 다른 URL로 전달하는 프로세스입니다. 이를 올바르게 수행하면 웹 사이트의 전반적인 건강에 도움이 될 수 있습니다.

이전 링크 자산의 최대 99 %를 계속 통과하면서 URL을 리디렉션 하려면 301 "영구적으로 이동 한"HTTP 상태 코드를 사용하십시오.
302“일시적으로 이동”과 같은 다른 상태 코드가 있더라도 301을 대신 사용하는 것이 가장 좋습니다.

INTERNAL LINKING

내부 연결은 검색 엔진 크롤러 작업을 훨씬 쉽게 수행 할 수 있는 중요한 방법입니다. 또한 웹 사이트의 모든 하위 페이지를 찾는 데 도움이 될 뿐만 아니라 사이트의 모든 콘텐츠에 대해 순위를 매길 수 있도록 합니다.

링크가 링크 값 (랭킹 강도)을 전달한다는 것을 이해하십시오. 대부분 색인 페이지가 가장 중요하며 여기에서 다른 페이지로 연결하는 경우 카테고리 페이지에서 연결하는 경우 이러한 페이지의 순위가 더 높아집니다.
내부 링크를 통해 액세스 되는 페이지를 숨기지 마십시오. 그것은 그들이 더 나은 순위를 하는 데 도움이 됩니다.
실수로 숨길 수 있습니다. 일반적인 실수는 다음과 같습니다.
1. 링크는 구문 분석 할 수 없는 JavaScript를 통해 생성됩니다
사이트의 모든 링크가 결국 표준 HTML 링크인지 확인하십시오.
2. 링크는 검색을 통해서만 액세스 할 수 있습니다.
크롤러는 귀하의 웹 사이트에서 검색을 사용하려고 시도하지 않습니다. 검색 뒤에 페이지를 숨기면 순위가 매겨지지 않을 수 있습니다.
3. 많은 링크로
사이트에 많은 링크가 필요한 경우 크롤러가 계속 작동하지 않으므로 페이지 당 150 개의 링크를 유지하는 것이 좋습니다.
robots.txt 또는 robots 메타 태그에 의해 크롤링 되지 않도록 차단 된 페이지에 연결하지 않아야 합니다.

XML SITEMAPS

XML Sitemap은 검색 엔진에 사이트의 어느 페이지에서 색인을 생성 할 수 있는 페이지를 알려주고 모든 파일을 단일 파일에 포함 시켜 Google Search Console에 업로드 할 수 있는 방법입니다. 사이트 맵에는 몇 가지 장단점이 있으며 다음을 권장합니다.

일반적으로 색인이 생성되지 않은 사이트는 사이트 맵에 포함하면 색인이 생성 될 수 있습니다. 웹 사이트의 구조적 문제를 숨길 수 있으므로주의하십시오.
새로운 웹 사이트에는 권장하지 않습니다. 사용하지 않으면 구조적 문제가 있을 수 있습니다.
robots.txt에서 사이트를 차단하면 사이트 맵에 사이트를 포함 시키지 않습니다.
사이트에 많은 페이지가 있는 경우 동적 사이트 맵을 사용하십시오.

NAP

NAP는 이름, 주소 및 전화 번호를 나타냅니다. 지역 상점이나 사업장이 있습니까? 그러면 NAP가 중요합니다. Google은 지역 타겟팅 검색과 관련하여 이 데이터를 고려합니다.

NAP 데이터를 웹 사이트에 구현해야 합니다. 바닥 글에 쓰면 좋습니다.
검색 결과에서 잘못된 정보를 방지하기 위해 데이터가 항상 최신 상태인지 확인하십시오.
Google 마이 비즈니스 목록을 요청하고 올바른 NAP 데이터로 업데이트하십시오.
또한 structured data 코드에 NAP를 포함 시키십시오.

EXTRA

PAGE SPEED

2018 년 Google은 공식적으로 페이지 속도를 순위 요소 중 하나로 설정했습니다. 주의를 얻기가 어렵고 유지하기가 더 어려운 세상에서는 매 초가 중요합니다. 페이지 속도에 중점을 두어 앞으로 몇 년 동안 사이트를 갖추어야 합니다.

페이지 속도와 관련된 가장 큰 문제 중 하나는 최적화되지 않은 이미지로 인해 발생합니다. 모든 이미지가 파일 크기에 최적화되어 있는지 확인하고 TinyPNG와 같은 도구를 사용하십시오.
가능하면 페이지 설정에 지연 로딩을 구현하십시오. 이렇게 하면 이미지 (및 기타 내용)가 필요한 경우에만 로드 됩니다.
CSS, JavaScript 및 HTML을 축소하십시오. 코드 최적화는 놀라운 일이 될 수 있습니다.
브라우저 캐싱을 활용하십시오. 효과적인 캐싱 전략은 페이지 속도를 크게 향상 시킬 수 있습니다.
CDN (Content Delivery Network)을 사용하여 사용자의 위치에 따라 사이트를 더 빨리 제공하십시오.
페이지 속도를 향상 시키는 방법에는 여러 가지가 있지만 위의 방법이 가장 일반적인 방법입니다.

FEATURED SNIPPETS

추천 스니펫은 웹 사이트를 방문하지 않고도 검색 결과에 검색어에 대한 답변을 직접 표시하는 Google의 방법입니다. 매우 눈길을 끌고 있으며 한 가지 결과 만 추천 스니펫을 얻을 수 있습니다.

추천 스니펫은 음성 검색과 관련하여 특히 흥미롭습니다. 음성으로 검색하면 스니펫 위치 만 평가되므로 향후 몇 년 동안 관련성이 높아집니다.
유감스럽게도 Google만이 추천 스니펫에 적합한 페이지를 결정합니다.
이 페이지의 모든 권장 사항을 따르면 추천 스니펫도 얻을 수 있습니다.
가장 중요한 부분은 질문에 매우 짧고 정확하며 구조화 된 방식으로 답변하는 것입니다.
현재 텍스트, 비디오 및 표의 세 가지 유형의 스니펫이 있습니다.

텍스트 스니펫 :

Google featured text snippet

Video Snippet:

Google featured video snippet

List Snippet:

Google featured list snippet

JAVASCRIPT FRAMEWORKS

오늘날 많은 사이트는 React, Angular 또는 Vue와 같은 최신 JavaScript 프레임 워크가 제공해야 하는 가능성과 편의성을 활용합니다. 이러한 프레임 워크를 사용하여 사이트를 구축하는 것은 SEO의 주요 문제 중 하나입니다. 검색 크롤러가 사이트를 올바르게 읽으려면 "일반적인"HTML 구조를 렌더링 하지 않습니다.

이러한 문제를 처리하는 방법에는 여러 가지가 있습니다. 여기서는 표면 만 긁을 것입니다.
SEO와 관련하여 항상 SSR (Server Side Rendering)로 이동하십시오. 이를 통해 Google은 초기 크롤링에서 SEO 최적화 된 페이지를 볼 수 있습니다.
SEO 및 JavaScript 프레임 워크 주제에 대해 자세히 알아 보려면 Jan-Willem Bobbink의이 기사를 참조하십시오.

유용한 도구