공중에 색종이를 던지고 친구들과 공유하고 싶게 만드는 멋진 대화형 웹사이트를 방문한 적이 있다면 JavaScript로 구축되었을 가능성이 높습니다.

실제로 Google Analytics(및 기타 추적 도구)를 사용하거나 대화형 요소 또는 웹 애플리케이션을 갖춘 모든 사이트는 또한 거의 어디에나 존재하는 코딩 언어인 JavaScript를 사용합니다. 가능성은 무한합니다.

단점은? 잘못하면 SEO가 중단될 수 있습니다. 그렇다면 어떻게 JavaScript SEO를 활용하여 검색 성능을 높일 수 있을까요? 뛰어 들어 봅시다.

JavaScript SEO 란 무엇입니까?

JavaScript를 SEO 친화적으로 만드는 방법

JavaScript SEO 모범 사례

사용해보기

JavaScript SEO 란 무엇입니까?

JavaScript SEO를 정의하기 전에 — JavaScript의 가장 일반적인 사용 사례에 대해 이야기해 보겠습니다. 웹사이트 개발 외에도 자바 스크립트 게임, 컴퓨터 프로그램 등에 대한 탁월한 옵션입니다.

웹 개발에서는 주로 대화형 웹사이트, 웹 및 모바일 앱, 동적 콘텐츠에 사용됩니다.

프로그래밍 언어가 어떻게 사용되는지 알게 되면 JavaScript SEO는 검색 엔진이 JavaScript로 구축된 모든 사이트를 쉽게 찾을 수 있도록 하는 것입니다.

SEO에 대한 이해가 주로 키워드 최적화에만 국한되어 있다면 여러분은 결코 혼자가 아닙니다. 궁극적으로 SEO에는 온페이지, 오프페이지, 기술의 세 가지 유형이 있습니다.

페이지 내 SEO는 사이트에 있는 콘텐츠(키워드 최적화)에 중점을 둡니다. 오프 페이지 SEO는 사이트의 평판, 인기, 유용성과 관련이 있으며 주로 통제할 수 없습니다.

JavaScript SEO는 세 번째 범주에 속합니다. 기술 서구 — 사람들이 귀하가 제공하는 정보를 검색할 수 있도록 귀하의 사이트를 검색, 색인 생성 및 크롤링할 수 있도록 하는 데 중점을 둡니다. 그것을 찾을 수 있습니다.

페이지 및 기술 SEO에 대해 더 자세히 알고 싶으십니까? 여기에서 무료 튜토리얼을 받아보세요!

JavaScript를 SEO 친화적으로 만드는 방법

웹사이트에서 사용되는 대부분의 JavaScript는 당신을 포함하여 광산, SEO에 큰 영향을 미치지 않습니다. 가장 큰 문제는 개발자가 JavaScript를 사용하여 중요한 정보가 많은 섹션이나 전체 페이지를 구축할 때 발생합니다.

그 이유는 간단합니다. JavaScript로 인해 검색 엔진이 귀하의 사이트를 읽기가 더 어려워지기 때문입니다.

1. 해결 방법으로 동적 렌더링(드물게)을 사용하십시오.

JavaScript SEO 및 색인 생성과 관련된 가장 중요한 문제 중 하나는 코드가 렌더링되는 방식 또는 Google이 사이트를 색인화하는(또는 색인을 생성하지 않는) 방식과 관련됩니다.

즉, 서버측 렌더링, 클라이언트측 렌더링, 동적 렌더링 등 사이트가 렌더링되는 방식을 이해해야 합니다.

서버 측 렌더링 (SSR)

무엇이다 : JavaScript가 브라우저나 Google 크롤러에 표시되기 전에 서버에서 렌더링되는 경우입니다.

SEO에 미치는 영향: 페이지의 가장 중요한 콘텐츠의 로드 시간을 줄여 SEO 성능을 향상시킵니다.

SSR의 단점: SSR은 사용자 입력이 필요한 경우 소요 시간을 대폭 늘릴 수 있습니다.

클라이언트측 렌더링(CSR)

무엇이다 : CSR은 HTML의 기본 버전만으로 브라우저에서 JavaScript가 렌더링되고 나머지 콘텐츠는 JavaScript를 통해 전달되는 경우입니다.

SEO에 미치는 영향: 대부분의 콘텐츠가 JavaScript를 통해 전달되므로 색인 생성 가능성이 줄어듭니다.

CSR의 단점: 렌더링은 더 빠르지만 검색 성능은 훨씬 낮으므로 Google이 콘텐츠의 색인을 적절하게 생성할 수 있도록 최대한 많은 정보를 Google에 제공하는 데 집중해야 합니다.

전문가 팁 : 크리스티나 아자렌코최고의 기술 SEO 전문가인 은 다음과 같이 말합니다. “클라이언트 측 렌더링을 사용하면 Googlebot이 어떤 콘텐츠에도 액세스할 수 없습니다.

훨씬 더 좋고 성공적인 접근 방식은 서버 측 렌더링을 사용하는 것이므로 Googlebot은 서버의 콘텐츠도 제공합니다."

동적 렌더링

무엇이다 : 동적 렌더링은 JavaScript를 렌더링할 수 없는 봇을 식별하고 SSR 버전을 제공합니다.

SEO에 미치는 영향: 봇이 콘텐츠 버전을 색인화하여 검색 가능성을 높일 수 있습니다.

동적 렌더링의 단점: 궁극적으로 동적 렌더링은 "추가적인 복잡성과 리소스 요구 사항을 발생시키기" 때문에 장기적인 솔루션이 되어서는 안 된다고 Google이 말하는 해결 방법입니다.

동적 렌더링은 콘텐츠가 빠르게 변경되거나 브라우저와 호환되지 않는 JavaScript를 사용하는 콘텐츠가 있는 사이트에서 사용할 수 있습니다. 대부분의 사이트에 가장 적합한 것은 아니며 모든 사이트 페이지에서 사용할 필요는 없습니다.

2. 고유하고 설명이 포함된 메타 콘텐츠를 사용하세요.

Google이 다음을 사용하여 각 페이지에 포함된 내용을 쉽게 찾을 수 있는지 확인하세요. 메타 콘텐츠, 페이지 제목 및 메타 설명. 여기에는 다음이 포함됩니다

• 제목 태그.
• 메타 설명.
• 이미지의 대체 텍스트 및 속성.

메타 콘텐츠를 추가하면 Google에서 귀하의 사이트나 페이지가 무엇에 관한 것인지 파악하여 사이트와 페이지의 색인을 더욱 간단하고 정확하게 생성할 수 있습니다.

3. 지연 로딩을 구현합니다.

게으른로드 필요할 때만 콘텐츠를 제공하거나 곧 읽을 예정이므로 페이지 로딩 속도를 높입니다. 많은 리소스가 필요한 대용량 이미지나 콘텐츠를 로드하는 데 특히 유용합니다.

이미지와 리소스가 많은 콘텐츠 및 요소는 페이지 상단 콘텐츠의 나머지 부분과 함께 로드되지 않지만 사용자가 콘텐츠를 읽으면 로드됩니다.

그리고 사용자가 페이지 하단까지 읽지 않으면 불필요한 이미지가 로드되지 않습니다.

단점은 빠르게 스크롤하는 사람이 있으면 이미지가 로드될 때까지 기다리게 될 수 있다는 것입니다. 또한 Google이 귀하의 웹페이지를 보는 방식에도 영향을 미칠 수 있습니다. 따라서 이 방법을 따르는 경우에는 주의 깊게 수행하십시오.

4. JavaScript가 Google과 호환되는지 확인하세요.

너에게 들어가라. 검색 콘솔 특정 페이지의 URL을 URL 검사 Google이 어떻게 렌더링하는지 확인할 수 있는 도구입니다.

테스트할 다른 ​​도구를 원하시나요? Google 리치 결과 테스트 및 Google 모바일 친화성 테스트를 사용하여 렌더링된 HTML을 확인할 수도 있습니다.

전문가 팁 : 데이비드 짐머만 Reliable Acorn은 Google 스파이더가 보는 것을 보여주기 때문에 Google 모바일 친화성 테스트와 같은 도구를 사용할 것을 권장합니다.

Zimmerman은 "개발자가 Google이 JavaScript를 읽을 수 있는 '어딘가를 읽었다'고 해서 그들이 SEO 친화적인 JavaScript 웹사이트를 작성하는 방법을 이해하고 있다는 의미는 아닙니다."라고 덧붙였습니다.

여기서 결론은? 최신 상황을 파악하는 것이 좋습니다..

5. 검색 관련 오류를 수정합니다.

Google이 페이지의 색인을 생성했음을 확인한 후 테스트된 페이지를 미리 볼 수 있습니다. Google은 볼 수 있는 콘텐츠만 렌더링하므로 테스트한 페이지가 올바르게 표시되지 않으면 Google은 해당 페이지의 색인을 생성할 수 없습니다.

무엇보다도, 현재 상황과 이유를 파악하고 문제 해결을 위한 조치를 취할 수 있습니다.

6. 수정하고 다시 테스트하세요.

자바스크립트 렌더링 및 호환성과 관련된 오류를 수정한 후에는 URL 검사 도구를 사용하여 자바스크립트가 라이브 모드에서 올바르게 작동하는지 확인하고 Google에 업데이트된 코드의 색인을 생성하도록 요청할 수 있습니다.

JavaScript SEO 모범 사례

저는 여러 JavaScript SEO 전문가를 만나 그들의 모범 사례에 대해 알아보았습니다. 잠시 후에 이에 대해 알아보겠습니다. 그러나 무엇보다도 최신 정보를 바탕으로 작업하고 있는지 확인하세요.

1. JavaScript SEO 입문서를 받으세요.

JavaScript SEO에는 많은 내용이 들어가며 브라우저가 정기적으로 업데이트되므로 한동안 JavaScript SEO를 수행하지 않았다면 입문서가 필요할 수 있습니다.

JavaScript와 관련하여 검색 엔진이 무엇을 찾고 있는지 다시 확인해야 하거나 무엇을 수정해야 하는지, 어떻게 수정해야 하는지에 대한 자세한 지침을 얻으려면 Google에서 사용자가 알아야 할 모든 것을 분석합니다. Google 검색 센터.

이 책은 귀하의 웹사이트를 SEO 친화적으로 만드는 방법을 정확하게 알려주고 JavaScript 전용 섹션 전체를 포함하고 있기 때문에 웹사이트를 운영하는 모든 사람의 비밀 무기입니다.

2. 중요한 내용을 모두 소스코드에 넣습니다.

Google은 볼 수 있는 것만 색인을 생성할 수 있다고 제가 언급한 것을 기억하시나요? 사이트의 색인 생성이 가능하도록 하려면 다음을 따르세요. 아자렌코의 조언과 "JavaScript 문제로 인해 SEO 노력이 중단되지 않도록 하세요."

그녀는 “가장 중요한 콘텐츠를 소스 코드에서 사용할 수 있도록 보장할 것을 권장합니다(예: JavaScript가 실행되기 전). 이를 통해 Google은 JavaScript에 의존하지 않고 귀하의 정보를 '읽을' 수 있습니다.

모든 메타데이터(제목, 메타 로봇, 표준 태그 등), 본문 문구, 구조화된 데이터를 포함하세요.”

3. 사이트의 JavaScript SEO 친화성을 정기적으로 테스트하세요.

JavaScript 코드나 콘텐츠를 조금만 수정해도 Google에서 사이트를 보는 방식이 바뀔 수 있습니다. 그리고 이것은 JavaScript에만 국한되지 않습니다. Google Search Console과 같은 도구를 사용하여 페이지 성능을 모니터링하면 사이트가 검색 결과의 상위에 머물 수 있도록 도울 수 있습니다.

전문가 팁 : 트리스탄 해리스 Google PageSpeed ​​Insights 및 Lighthouse와 같은 도구를 사용하여 SEO 성능을 테스트하고 개선 영역을 식별할 것을 권장합니다.

모범 사례 #4. Google의 가이드라인을 항상 숙지하세요.

Google은 정기적으로 알고리즘을 업데이트하므로 모범 사례도 업데이트됩니다. 이를 염두에 두고 Google의 업데이트 페이지에 주의를 기울이는 것이 좋습니다.

짐머만 따라잡기 위해 Hexomatic과 같은 페이지 모니터를 사용할 것을 권장합니다. JavaScript SEO에 대한 Google의 가이드라인, "페이지 모니터에 Google이 업데이트를 했다고 표시되면 어떤 식으로든 내 프로세스를 변경해야 하는지 확인합니다."

모범 사례 #5. 최고의 페이지 SEO 관행을 따르세요.

물론, 여기서는 특히 JavaScript SEO에 초점을 맞추고 있지만 SEO의 핵심 원칙 아직도 적용됩니다. JavaScript는 검색 엔진이 보는 콘텐츠의 양을 줄일 수 있지만, 콘텐츠가 최상의 SEO 관행에 맞게 최적화되도록 하는 것은 여전히 ​​중요합니다.

전문가 팁: 데이브 버 미어 JavaScript를 비활성화하는 것이 좋습니다.

“다양한 더 큰 문제를 식별하는 가장 빠른 방법입니다. 사이트의 페이지를 방문할 때 페이지가 로드되기 전에 렌더링되지 않거나 일부 링크가 작동하지 않는 경우 콘텐츠 누락과 같은 위험 신호를 발견할 수 있습니다." Ver Meer는 말합니다.

사용해보기

상대적으로 (읽기:완전히) 안전한 환경에서 새로운 기술을 테스트하기 위해 때로는 친구이자 때로는 적이기도 한 ChatGPT를 사용했습니다.

내 프롬프트: “리드를 수집하기 위해 Javascript 코드 양식을 만들고 싶습니다. 이름, 이메일, 예산, 메시지에 재미있는 자리 표시자를 사용하세요.”

GPT의 답변: “물론이죠! 다음은 리드를 수집하는 JavaScript 양식의 간단한 예입니다. 이 양식에는 이름, 이메일, 예산 및 메시지에 대한 필드가 포함되어 있습니다. 요청하신 대로 재미있는 자리 표시자를 추가했습니다.

양식에는 이름, 이메일 및 메시지 필드가 비어 있지 않은지 확인하는 기본 유효성 검사도 포함되어 있습니다.

다음은 양식의 HTML입니다.

재미있는 자리 표시자는요? 음, GPT는 아이언맨이 재미있을 거라고 생각했어요. HTML의 전체 코드는 다음과 같습니다.

JavaScript는 다음과 같습니다.

물론 ChatGPT에는 다음과 같은 면책조항이 있었습니다.

이제 재미있는 부분입니다. ChatGPT가 SEO를 위해 이 JavaScript를 어떻게 최적화하는지 살펴보겠습니다.

당연히 HTML 버전의 코드가 훨씬 더 강력했습니다. 차이점을 비교해 보실 수 있도록 두 부분으로 나누었습니다. (아래에 자세히 설명하겠습니다.)

본문은 가상의 리드 생성 페이지 콘텐츠와 관련된 대부분의 변경 사항을 제외하고 매우 유사해 보입니다.

이제 업데이트된 JavaScript를 살펴보겠습니다.

친숙해 보이죠? 코드를 나란히 비교해 보겠습니다.

그들은 동일합니다. 놀란?

이유가 여기 있습니다.

나의 새로운 JavaScript 코드는 나의 새로운 리드 생성 양식의 기능을 담당합니다.

그리고 기능만.

구조나 "페이지" 내용에 대해서는 책임을 지지 않습니다. HTML이 등장하는 곳이 바로 여기입니다. 그리고 SEO 최적화에 대한 권장 사항이 적용되는 곳이기도 합니다.

ChatGPT를 사용하여 JavaScript SEO를 최적화하는 방법

JavaScript SEO를 최적화하기 위해 ChatGPT가 권장하는 구체적인 변경 사항이 궁금하십니까?

1를 변경합니다. 페이지 제목 및 메타 설명을 추가합니다.

2를 변경합니다. 제목 태그를 사용하세요.

3를 변경합니다. SEO 및 접근성을 위한 라벨 양식 필드.

4를 변경합니다. 이미지에 대체 텍스트를 추가합니다.

5를 변경합니다. 반응형 디자인을 사용하여 페이지를 모바일 친화적으로 만듭니다.

6를 변경합니다. 검색 엔진이 페이지의 콘텐츠를 이해할 수 있도록 스키마 마크업을 추가하세요.

JavaScript SEO의 결론

웹 사이트에서 JavaScript를 사용하기로 결정하려면 SEO에 대한 의미를 이해하고 그에 따라 사이트가 SEO 친화적으로 유지되거나 검색 엔진에서 검색, 크롤링 및 색인 생성이 가능하도록 계획해야 합니다.

이는 JavaScript에 대해 경고하려는 의미가 아닙니다. 반대로, 대화형 기능을 최대한 활용하려면 JavaScript와 SEO를 이해하고 눈에 띄는 데 도움을 줄 수 있는 개발자를 찾고 고용하는 것이 필요합니다.

가장 큰 테이크 아웃은 무엇입니까? JavaScript를 SEO 친화적으로 만들기 위해 할 수 있는 가장 중요한 일은 그것이 올바르게 렌더링되는지 확인하고 페이지 HTML이 페이지 콘텐츠에 대해 가능한 한 많은 정보를 제공하도록 구성되는 것입니다.

아마도 놀랍게도(아마도 아닐 수도 있지만) 페이지 내 SEO의 규칙이 JavaScript SEO에 적용됩니다. 핵심은 검색 엔진이 귀하의 콘텐츠를 "볼" 수 있도록 보장하는 것입니다.

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• PlatoData.Network 수직 생성 Ai. 자신에게 권한을 부여하십시오. 여기에서 액세스하십시오.
• PlatoAiStream. 웹3 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 플라톤ESG. 탄소, 클린테크, 에너지, 환경, 태양광, 폐기물 관리. 여기에서 액세스하십시오.
• PlatoHealth. 생명 공학 및 임상 시험 인텔리전스. 여기에서 액세스하십시오.
• 출처: https://blog.hubspot.com/marketing/javascript-seo