문제 해결을 위해 Chrome DevTools 사용-Semalt 프롬프트



Chrome DevTools는 대부분의 SEO 전문가에게 외계인이 아닙니다. 반면에 소양인에게는 아직 배우지 않은 것 중 하나 일 수 있습니다. 글쎄, Semalt에서 고객의 SEO 요구 사항을 제공하는 프로세스의 일부는 웹 사이트에 필요한 사항의 필요한 측면에 대해 교육하는 방식에 의존합니다.

SEO 용 Chrome 개발 도구는 문제 해결에 사용하므로 중요합니다. Semalt와 고객 간의 손쉬운 커뮤니케이션을 위해이 도구를 사용하여 웹 사이트의 SEO 문제를 해결하는 방법을 보여 드리고자합니다.

Chrome Dev Tools를 사용하면 웹 사이트의 크롤링 가능성에서 성능에 이르기까지 근본적인 SEO 문제를 찾을 수 있습니다. 이 기사에서는 고객에게 더 나은 서비스를 제공하기 위해 이러한 도구를 사용하는 세 가지 방법을 강조합니다.

Chrome DevTools 란 무엇입니까?

DevTools 또는 Chrome DevTools는 Chrome 브라우저에 직접 빌드 된 웹 개발자 지원 도구 세트입니다. 우리는 이러한 도구를 사용하여 페이지를 즉시 편집하고 문제를 즉시 진단합니다. 이는 고객을 위해 더 나은 웹 사이트를 구축하는 데 도움이되지만 우리는 더 빠른 속도로 웹 사이트를 완벽하게 만들 수 있습니다.

Google 크롬이 SEO 전문가의 무기고에서 가장 중요한 툴킷 중 하나라는 데 모두 동의 할 수 있습니다. 감사를 자동화하거나 대규모 SEO 문제를 진단하는 데 사용하는 SEO 소프트웨어에 관계없이 Chrome DevTools는 필수입니다. 즉석에서 SEO 문제를 확인하는 중요한 방법을 제공하는 기능 덕분에 Semalt를 비롯한 많은 SEO 전문가가이를 반복해서 사용했습니다.

Chrome DevTools가 전문가와 웹 개발자를 도울 수있는 다양한 방법을 논의하는 데 더 많은 시간을 할애 할 수 있지만 우리는 좀 더 구체적인 것에 관심을 기울이고 있습니다. 여기서는 문제를 파악하고 수정하기 위해 Chrome DevTools에 의존 한 몇 가지 사례를 공유하고자합니다.

다음은 Chrome DevTools를 사용하는 것이 나쁘지 않은 세 가지 상황입니다.

문제 해결을위한 Chrome DevTools 설정

Chrome DevTools를 사용해 본 적이 없을 가능성이 있습니다. 음, 액세스는 SERP의 웹 사이트를 클릭하고 검사 버튼을 클릭하는 것만 큼 간단합니다. SEO 전문가로서 우리는 그것보다 더 조심해야하지만 그것이 어떻게 사용되는지에 대한 아이디어를 가지고 있습니다. Semalt에서는 DOM을 관찰 할 수있는 Element 평면과 콘솔 드로어에서 몇 가지 다른 도구를 사용할 수있는 CSS를 모두 사용합니다.

이 도구가 SEO 문제 해결에 사용되는 방법에 대한 단계별 프로세스를 안내합니다.

시작하려면 마우스 오른쪽 버튼을 클릭 한 다음 검사를 선택해야합니다. 기본적으로 요소 패널이 표시되고 페이지를 구성하는 데 사용 된 스타일 시트의 특성과 DOM을 간략하게 볼 수 있습니다.

이 뷰를 사용하면 우리에게 많은 것을 제공합니다. 그러나 우리는 콘솔 드로어가 툴킷을 최대한 활용할 수 있도록합니다.

설정 아이콘 옆에 나타나는 점을 클릭하고 콘솔 서랍 표시 옵션이 나올 때까지 아래로 스크롤합니다. 또는 이스케이프 키를 클릭하기 만하면됩니다.

콘솔과 요소 패널이 활성화 된 상태에서 사용자는 DOM에서 렌더링 된 코드를 엿볼 수 있습니다. 사용자는 브라우저에서 코드를 그리는 데 사용 된 스타일 시트도 볼 수 있습니다. 콘솔 드로어에서 액세스 할 수있는 몇 가지 다른 도구도 있습니다.

처음 사용하는 경우 콘솔 서랍에 콘솔 자체가 표시되지 않을 수 있지만 Chrome DevTools를 잠시 사용한 후 콘솔 서랍에 콘솔 자체가 표시되기 시작합니다. 콘솔 패널에서 로깅 된 메시지를보고 자바 스크립트를 실행할 수 있습니다. 우리는 오늘 그것에 대해 다루지 않을 것입니다.

대신 다음 세 가지 추가 도구를 살펴 보겠습니다.
이러한 도구를 찾으려면 더 많은 도구를 선택하고이 세 항목을 각각 선택하여 콘솔 서랍에 탭으로 표시되도록합니다. 이 세 패널을 활성화 한 후 문제 해결을 시작할 수 있습니다.

DevTools에서 사용자 에이전트 전환

사용자 에이전트 전환은 DevTools를 사용하는 가장 간과되는 방법 중 하나입니다. 이것은 Googlebot이 사이트의 정보 기능을보고 처리하는 방법에 대한 통찰력을 제공하므로 여러 가지 문제를 발견하는 데 도움이되는 간단한 테스트입니다.

조사 SEO 전문가 팀의 경우 DevTools는 가치 있고 신뢰할 수있는 돋보기로 사용되어 웹 사이트의 문제를 확대하여 이러한 문제가 발생하는 것을 방지 할뿐만 아니라 그러한 문제의 근본 원인을 밝혀 낼 수 있습니다.

Chrome DevTools에서 사용자 에이전트를 어떻게 전환 할 수 있습니까?

Chrome에서 사용자 에이전트를 전환 할 때 콘솔 서랍의 네트워크 조건 탭을 사용해야합니다. 이를 위해 자동 선택을 선택 취소하면 Googlebot 스마트 폰, Bingbot 또는 여러 다른 사용자 에이전트를 사용하여 콘텐츠를 볼 수 있으며 콘텐츠가 어떻게 전달되는지 확인할 수 있습니다.

Google이 SERP에 업데이트 된 제목 태그 또는 메타 설명을 표시하지 않는 경우 의심 할 여지없이 해당 웹 사이트의 소유자가 걱정할 것입니다. Google이 완전히 다른 제목 태그를 사용하기로 선택했거나 태그를 업데이트하지 못한 이유를 이해하는 것은 변경 사항이 구현되었는지 확인하는 데 중요합니다.

모바일 대체 사이트의 경우 Chrom DevTool 사용

비슷한 경우에 사용자 에이전트를 Googlebot 스마트 폰으로 전환 한 후에도 사이트가 여전히 Googlebot에 대한 대체 모바일 사이트를 제공하고 있음을 발견했습니다. 그러나 Google은 이미 모바일 우선 색인화로 전환했기 때문에 모바일 사이트에서 변경 사항을 처리하고 색인을 생성했지만 도메인의 데스크톱 버전에 적용된 업데이트를 포착하지 못했습니다.

모바일 사이트가 유물이라고 생각할 수 있지만 실제로는 여전히 존재합니다.

과도한 서버 보호를 발견하기 위해 Chrome DevTools 사용

웹에는 악의적 인 의도를 가진 많은 사람들이 있습니다. 많은 해커와 악의적 인 악의가 인터넷 사이트에 Google을 사용하려고합니다. 이러한 이유로 일부 서버 스택 CDN 및 기타 호스팅 제공 업체는 실제 의도가 스팸 크롤러가 사이트에 액세스하지 못하도록 차단하려는 경우 Googlebot 스푸핑을 차단하는 특정 내장 기능을 제공 할 수 있습니다. 과도한 노력으로 이러한 사이트는 Googlebot이 사이트에 액세스하지 못하도록 차단할 수 있습니다. 때때로 사용자에게 "승인되지 않은 요청이 차단됨"이라는 메시지가 표시됩니다.

Google의 SERP에서 이러한 메시지를 발견하면 브라우저가 문제없이 콘텐츠를로드하더라도 파울이 발생했음을 즉시 알 수 있습니다.

User-Agent 전환 기능을 사용하면 User-Agent를 Googlebot 스마트 폰으로 설정하자마자 사이트에서 해당 메시지를 제공하고 있음을 알 수 있습니다.

DevTools에서 핵심 웹 핵심 요소 진단

성능 탭은 DevTools의 가장 중요한 기능 중 하나입니다. 페이지 속도와 성능에 영향을 미치는 문제를 해결하기위한 훌륭한 게이트웨이 역할을합니다. 일반적으로 DevTools는 핵심 웹 필수 요소와 관련하여 실행 가능한 정보를 제공 할 수 있습니다.

Google의 Core Web Vitals를 구성하는 측정 항목은 한동안 페이지 속도 및 성능 보고서의 일부였습니다. SEO 전문가는 이러한 문제를 분석하는 방법에 대해 잘 알고 있어야합니다. 웹 마스터로서 우리는 검색 효율성을위한 핵심 웹 필수 요소의 중요성을 더욱 잘 인식하게되었습니다.

DevTools의 성능 탭을 사용할 때 중요한 웹 메트릭을 더 잘 이해하는 데 한 걸음 더 가까워집니다.

HTTP 헤더를 다시 확인하고 사용하지 않는 코드를 검토하십시오.

SEO 감사에서 소프트 404에 대해 들어 본 적이 있습니까? 소프트 404는 브라우저가 404 페이지를 표시 할 수 있지만 200 OK 응답 코드를 반환하는 경우입니다.
경우에 따라 콘텐츠가 브라우저에서 예상대로 정확하게로드 될 수 있습니다. 그러나 HTTP 응답 코드에 404 또는 302 오류가 표시 될 수 있습니다. 일반적으로 정확하지 않거나 예상 한 내용이 아닐 수도 있습니다. 어느 쪽이든 모든 페이지 및 리소스에 대한 HTTP 응답 코드를 보는 것이 좋습니다.

DevTools를 사용하여 응답 코드에 대한 귀중한 정보를 제공하는 놀라운 Chrome 확장 프로그램이 많이 있지만이 정보를 직접 확인할 수 있습니다.

이 시점에서 DevTools는 페이지를 컴파일하기 위해 호출되는 모든 개별 리소스를 보여줍니다. 여기에는 해당 상태 코드와 폭포 시각화가 포함됩니다.

결론

Chrome DevTools를 사용하면 웹 사이트가 진정한 잠재력에 도달하지 못하게하는 근본적인 문제를 찾아 해결할 수 있습니다. DevTools는 특히 기술 감사에 유용합니다. 이 외에도 DevTools를 사용할 때 속도도 즐길 수 있습니다. 웹 브라우저를 떠나지 않고도 Semalt 팀은 웹 사이트 크롤링에서 성능에 이르기까지 검사 문제를 파악할 수있는 권한을 가질 수 있습니다.

Semalt 귀하의 웹 사이트에서 최상의 결과를 이끌어 낼 수 있도록 도와 드리며 저희 팀과 연락해 주시기 바랍니다. 여러분의 의견을 기다리겠습니다.