구글 SEO 상위노출에 필요한 기술이란..

안녕하세요 애드뉴 프로젝트팀 문기만 팀장 인사드립니다. 
앞서 오늘 강의를 시작하기전 간단하게 말씀을 드리고 시작하겠습니다.
기본 기술 지식은 검색 엔진에 맞게 사이트를 최적화하고 개발자와의 신뢰를 구축하는 데 도움이됩니다.

 

이제 탄탄한 키워드 연구를 기반으로 귀중한 콘텐츠를 만들었으므로 사람뿐만 아니라 검색 엔진에서도 읽을 수 있는지 확인하는 것이 중요합니다!

이러한 개념에 대한 깊은 기술적 이해가 필요하지는 않지만 이러한 기술 자산이 무엇을하는지 파악하여 개발자와 지능적으로 이야기 할 수 있도록하는 것이 중요합니다. 일부 최적화를 수행하려면 개발자가 필요할 수 있으므로 개발자의 언어로 말하는 것이 중요합니다. 그들은 귀하의 요청을 이해하지 못하거나 그 중요성을 알 수없는 경우 귀하의 요청에 우선 순위를 두지 않을 것입니다. 개발자와의 신뢰와 신뢰를 쌓으면 중요한 작업을 수행하는 데 종종 방해가되는 빨간 테이프를 떼어 낼 수 있습니다.

 

팀 간 지원 외에도 웹 페이지가 사람과 크롤러 모두를 위해 구조화되도록하려면 SEO에 대한 기술 최적화를 이해하는 것이 중요합니다. 이를 위해이 장을 세 부분으로 나누었습니다.

1. 웹 사이트 작동 방식
2. 검색 엔진이 웹 사이트를 이해하는 방법
3. 사용자가 웹 사이트와 상호 작용하는 방법

사이트의 기술적 구조는 성능에 막대한 영향을 미칠 수 있으므로 모든 사람이 이러한 원칙을 이해하는 것이 중요합니다. 또한 사이트 구성에 관련된 모든 당사자가 같은 페이지에 있도록 가이드의이 부분을 프로그래머, 콘텐츠 작성자 및 디자이너와 공유하는 것이 좋습니다.

 

웹 사이트 작동 방식

검색 엔진 최적화가 검색을 위해 웹 사이트를 최적화하는 프로세스 인 경우 SEO는 최적화하는 것에 대한 기본적인 이해가 필요합니다!

아래에서는 도메인 이름 구매에서 브라우저에서 완전히 렌더링 된 상태까지 웹 사이트의 여정을 간략하게 설명합니다. 웹 사이트 여정의 중요한 구성 요소는 웹 사이트의 코드를 볼 수있는 페이지로 바꾸는 브라우저의 프로세스 인 중요한 렌더링 경로입니다.

웹 사이트에 대해 이것을 아는 것은 SEO가 몇 가지 이유로 이해하는 데 중요합니다.

• 이 웹 페이지 조립 프로세스의 단계는 페이지로드 시간에 영향을 미칠 수 있으며 속도는 사용자를 사이트에 유지하는 데 중요 할뿐만 아니라 Google의 순위 요소 중 하나이기도합니다.
• Google은 ' 두 번째 패스 '에서 자바 스크립트와 같은 특정 리소스를 렌더링합니다 . Google은 먼저 자바 스크립트가없는 페이지를보고 며칠에서 몇 주 후에 자바 스크립트를 렌더링합니다. 즉, 자바 스크립트를 사용하여 페이지에 추가 된 SEO에 중요한 요소의 색인이 생성되지 않을 수 있습니다.

웹 사이트 로딩 과정이 출근길이라고 상상해보세요. 집에서 준비하고 물건을 모아 사무실로 가져온 다음 집에서 직장까지 가장 빠른 경로를 택합니다. 신발 하나만 신고, 직장까지 더 긴 경로를 택하고, 사무실에 물건을 맡기고, 즉시 집으로 돌아가 다른 신발을 가져 오는 것은 어리석은 일입니다. 그것이 비효율적 인 웹 사이트가하는 일입니다. 이 장에서는 웹 사이트가 비효율적 일 수있는 부분을 진단하는 방법, 간소화를 위해 수행 할 수있는 작업, 간소화로 인해 발생할 수있는 순위 및 사용자 경험에 대한 긍정적 인 결과에 대해 설명합니다.

웹 사이트에 액세스하려면 먼저 설정해야합니다!

1. 도메인 이름을 구입했습니다. moz.com과 같은 도메인 이름은 GoDaddy 또는 HostGator와 같은 도메인 이름 등록 기관에서 구매합니다. 이러한 등록 기관은 도메인 이름 예약을 관리하는 조직 일뿐입니다.
2. 도메인 이름은 IP 주소에 연결됩니다. 인터넷은 도메인 이름 서버 (DNS)의 도움없이 "moz.com"과 같은 이름을 웹 사이트 주소로 인식하지 못합니다. 인터넷은 인터넷 프로토콜 (IP) 주소 (예 : 127.0.0.1)라는 일련의 숫자를 사용하지만 moz.com과 같은 이름은 사람이 기억하기 쉽기 때문에 사용하고 싶습니다. 사람이 읽을 수있는 이름을 기계가 읽을 수있는 숫자와 연결하려면 DNS를 사용해야합니다.

웹 사이트가 서버에서 브라우저로 이동하는 방법

1. 사용자가 도메인을 요청합니다. 이제 이름이 DNS를 통해 IP 주소에 연결되었으므로 사람들은 도메인 이름을 브라우저에 직접 입력하거나 웹 사이트 링크를 클릭하여 웹 사이트를 요청할 수 있습니다.
2. 브라우저가 요청을합니다. 웹 페이지에 대한 요청은 도메인 이름을 해당 IP 주소로 변환하기 위해 DNS 조회 요청을 작성하도록 브라우저에 프롬프트합니다. 그런 다음 브라우저는 HTML, CSS 및 JavaScript와 같이 웹 페이지를 구성하는 코드를 서버에 요청합니다.
3. 서버가 리소스를 보냅니다. 서버가 웹 사이트에 대한 요청을 받으면 검색 자의 브라우저에 조합 할 웹 사이트 파일을 보냅니다.
4. 브라우저는 웹 페이지를 조립합니다. 브라우저는 이제 서버로부터 리소스를 받았지만 사용자가 자신의 브라우저에서 볼 수 있도록 모든 리소스를 통합하고 웹 페이지를 렌더링해야합니다. 브라우저가 모든 웹 페이지의 리소스를 구문 분석하고 구성하면 DOM (문서 개체 모델)이 생성됩니다. DOM은 Chrome 브라우저의 웹 페이지에서 마우스 오른쪽 버튼을 클릭하고 '요소를 검사'하면 볼 수있는 것입니다 ( 다른 브라우저에서 요소 를 검사 하는 방법 알아보기 ).
5. 브라우저는 최종 요청을합니다. 브라우저는 페이지에 필요한 모든 코드를 다운로드, 구문 분석 및 실행 한 후에 만 ​​웹 페이지를 표시하므로이 시점에서 브라우저에 웹 사이트를 표시하기 위해 추가 코드가 필요한 경우 서버에서 추가 요청을합니다. .
6. 웹 사이트가 브라우저에 나타납니다. 아휴! 결국, 웹 사이트는 이제 코드에서 브라우저에 표시되는 것으로 변환 (렌더링)되었습니다.

이제 웹 사이트가 브라우저에 어떻게 표시되는지 알았으므로 웹 사이트가 무엇 으로 구성 되었는지 , 즉 해당 웹 페이지를 구성하는 데 사용되는 코드 (프로그래밍 언어) 에 초점을 맞출 것 입니다. 가장 일반적인 세 ​​가지는 다음과 같습니다. HTML – 웹 사이트가 말하는 것 (제목, 본문 내용 등)CSS – 웹 사이트 모양 (색상, 글꼴 등)JavaScript – 작동 방식 (대화 형, 동적 등)

HTML : 웹 사이트가 말하는 것

HTML은 하이퍼 텍스트 마크 업 언어를 의미하며 웹 사이트의 중추 역할을합니다. 제목, 단락, 목록 및 콘텐츠와 같은 요소는 모두 HTML로 정의됩니다.

다음은 웹 페이지의 예와 해당 HTML의 모습입니다.

 

HTML은 그들이 만들거나 작업하는 모든 페이지의 "내부"에 존재하기 때문에 SEO가 알아야 할 중요합니다. CMS에서 HTML로 페이지를 작성할 필요는 없지만 (예 : "하이퍼 링크"를 선택하면 "a href ="를 입력하지 않고도 링크를 만들 수 있음) 모든 내용을 수정합니다. 콘텐츠 추가, 내부 링크의 앵커 텍스트 변경 등과 같이 웹 페이지에 작업을 수행 할 때. Google은 이러한 HTML 요소를 크롤링하여 문서가 특정 검색어와 얼마나 관련이 있는지 확인합니다. 즉, HTML의 내용은 Google 자연 검색에서 웹 페이지 순위에 큰 역할을합니다!

 

CSS : 웹 사이트의 모습

CSS는 "계단식 스타일 시트"를 나타내며 웹 페이지가 특정 글꼴, 색상 및 레이아웃을 사용하도록합니다. HTML은 콘텐츠를 스타일링하는 것이 아니라 설명하기 위해 만들어 졌기 때문에 CSS가 장면에 들어 왔을 때 게임 체인저였습니다. CSS를 사용하면 모든 페이지의 HTML에 스타일을 수동으로 코딩하지 않고도 웹 페이지를 "아름답게"만들 수 있습니다. 특히 대규모 사이트에서는 번거로운 프로세스입니다.

 

특히 SEO가 관심을 가져야하는 CSS 구성 요소 :

• 스타일 지시문은 페이지의 HTML 대신 외부 스타일 시트 파일 (CSS 파일)에있을 수 있으므로 페이지의 코드 사용량이 줄어들고 파일 전송 크기가 줄어들고로드 시간이 빨라집니다.
• 브라우저는 여전히 CSS 파일과 같은 리소스를 다운로드해야하므로 압축하면 웹 페이지가 더 빨리로드 될 수 있으며 페이지 속도가 순위 요소입니다.
• 페이지에 코드가 많은 것보다 콘텐츠가 많으면 사이트 콘텐츠의 색인 생성이 향상 될 수 있습니다.
• CSS를 사용하여 링크와 콘텐츠를 숨기면 웹 사이트가 수동으로 불이익을 받고 Google 색인에서 제거 될 수 있습니다.

 

자바 스크립트 : 웹 사이트의 작동 방식

인터넷 초창기에는 웹 페이지가 HTML로 만들어졌습니다. CSS가 등장했을 때 웹 페이지 콘텐츠는 어떤 스타일을 취할 수있었습니다. 프로그래밍 언어 JavaScript가 등장했을 때 웹 사이트는 구조와 스타일을 가질 수있을뿐만 아니라 동적 일 수 있습니다 .

JavaScript는 비 정적 웹 페이지 생성을위한 많은 기회를 열었습니다. 누군가이 프로그래밍 언어로 강화 된 페이지에 액세스하려고하면 해당 사용자의 브라우저가 서버가 반환 한 정적 HTML에 대해 JavaScript를 실행하여 일종의 상호 작용이있는 웹 페이지를 생성합니다.

자바 스크립트가 실제로 작동하는 것을 확실히 보셨을 것입니다. 아마 모를 수도 있습니다! JavaScript는 페이지에 거의 모든 것을 할 수 있기 때문입니다. 예를 들어 팝업을 만들거나 페이지에 표시 할 광고와 같은 제 3 자 리소스를 요청할 수 있습니다.

클라이언트 측 렌더링과 서버 측 렌더링

하지만 검색 엔진은 인간 방문자와 같은 방식으로 JavaScript를 보지 않기 때문에 JavaScript는 SEO에 몇 가지 문제를 일으킬 수 있습니다. 이는 클라이언트 측 렌더링과 서버 측 렌더링 때문입니다. 대부분의 JavaScript는 클라이언트의 브라우저에서 실행됩니다. 반면에 서버 측 렌더링을 사용하면 파일이 서버에서 실행되고 서버는 완전히 렌더링 된 상태로 파일을 브라우저에 보냅니다.

HTML로 표시되지 않고 JavaScript로 클라이언트 측에로드되는 텍스트, 링크 및 태그와 같은 SEO에 중요한 페이지 요소는 렌더링 될 때까지 페이지 코드에서 표시되지 않습니다. 즉, 검색 엔진 크롤러는 최소한 처음에는 자바 스크립트에있는 내용을 볼 수 없습니다.

 

말할 필요도없이, 자바 스크립트는 웹 페이지 생성에 많은 가능성을 열어 주지만주의하지 않으면 SEO에 심각한 영향을 미칠 수 있습니다.

고맙게도 Google이 방문자와 동일한 내용을 보는지 확인할 수있는 방법이 있습니다. Googlebot이 페이지를 어떻게 보는지 페이지를 보려면 Google Search Console의 'URL 검사'도구를 사용하세요. 페이지의 URL을 GSC 검색 창에 붙여 넣기 만하면됩니다.

 

사용자가 웹 사이트와 상호 작용하는 방법

1 장에서 우리는 검색 엔진 최적화를위한 SEO에도 불구하고 SEO는 검색 엔진 자체만큼이나 사람에 관한 것이라고 말했습니다. 검색 엔진이 검색자를 제공하기 위해 존재하기 때문입니다. 이 목표는 Google의 알고리즘이 검색 자에게 최상의 경험을 제공하는 웹 사이트에 보상하는 이유와 강력한 백 링크 프로필과 같은 품질에도 불구하고 일부 웹 사이트가 검색에서 제대로 작동하지 않는 이유를 설명하는 데 도움이됩니다.

웹 브라우징 경험을 최적으로 만드는 요소를 이해하면 검색 성능을 극대화하기 위해 이러한 경험을 만들 수 있습니다.

 

 

모바일 우선 인덱싱

2018 년부터 Google은 웹 사이트를 모바일 우선 색인으로 전환하기 시작했습니다. 이러한 변화는 모바일 친화 성과 모바일 우선 사이에 약간의 혼란을 불러 일으켰으므로 명확하게하는 것이 도움이됩니다. 모바일 우선 색인 생성을 통해 Google은 웹 페이지의 모바일 버전을 크롤링하고 색인을 생성합니다. 웹 사이트를 모바일 화면과 호환되도록 만드는 것은 사용자와 검색 실적에 좋지만 모바일 우선 색인 생성은 모바일 친화 성과 관계없이 발생합니다.

이로 인해 모바일보기에 다른 콘텐츠, 탐색, 링크 등을 표시하는 등 모바일 버전과 데스크톱 버전간에 패리티가없는 웹 사이트에 대한 몇 가지 우려가 제기되었습니다. 예를 들어 서로 다른 링크가있는 모바일 사이트는 Googlebot (모바일)이 사이트를 크롤링하고 링크 자산을 다른 페이지로 보내는 방식을 변경합니다.

 

오늘 구글 상위노출에 필요한 SEO 기본 기술에 대하여.. 강의를 해봤습니다.

포스팅 이 외에 궁금하신점이나 문의사항이 있으시다면, 저희 홈페이지에서 문기만 팀장을 찾아주세요!

감사합니다.