사이트의 SEO를 망칠 수 있는 디자인 실수

많은 디자이너와 아티스트는 자신의 기술이 검색 엔진 최적화(SEO)의 모든 법칙 위에 있다고 생각합니다. 그러나 Association for Computing Machinery에서 발행한 기사에 따르면 웹 사이트에 대한 부정적인 피드백의 약95%가 디자인 문제와 관련이 있다고 합니다.디자인은 웹사이트에 대한 인식과 순위에 상당한 영향을 미칩니다.

웹사이트 디자인의 잠재된 결함

SEO, 콘텐츠 및 그래픽 디자인 의 라인이 수렴되는 시대가 왔습니다 . 한때 병렬로 작동한다고 생각되었던 세 가지 분야가 모두 이제 함께 작동합니다. 그리고 그것은 마케팅에 많은 기회를 제공하지만, 순위를 매기는 노력에 해를 끼치는 실수를 저지르는 더 많은 위험을 열어주기도 합니다. 웹 사이트에는 주의가 필요한 몇 가지 디자인 측면이 있습니다.

웹 디자인을 다시 검토하고 다음 오류를 기록해 둡니다.

모바일에 집중하지 않음

2020년 9월부터 Google은 계속해서 업데이트를 진행하고 있습니다. 이러한 변화 중 하나는 보기 좋고 모바일 화면에서 빠르게 로드되는 콘텐츠가 포함된 모바일 친화적인 웹사이트로의 전환입니다. 왜?

• 2018년에는 모바일에서 인터넷에 액세스하는 사용자 수가 다른 장치를 통해 인터넷을 사용하는 사용자를 넘어섰습니다.
• 3초 후에 페이지가 로드되면 이탈률이 32%입니다.

Kissmetrics는 모바일 사용자가 사이트에 액세스하는 동안 직면하는 몇 가지 문제를 발견했습니다.

• 방문자의 47%는 2초의 로딩 시간을 기대합니다.
• 로드하는 데 3초 이상 걸리면 40%는 그대로 둡니다.
• 방문자의 79%는 실적이 저조한 사이트를 다시 방문하지 않습니다.
• 로딩 시간이 1% 증가하면 트래픽의 16%가 손실될 가능성이 있습니다.

이러한 설문조사는 모바일 우선 인덱싱이 SEO 성공의 다음 열쇠임을 이해하기에 충분하다고 생각합니다. Google은 사용자 경험(UX) 향상에 중점을 둔 최근 페이지 경험 업데이트를 통해 이를 확인했습니다 . Page Experience는 모바일에서 실시간으로 제공되며 2022년 3월에 데스크톱 검색에 출시될 예정입니다.

이제 페이지 경험 순위 신호 및 UX 디자인 원칙을 고려하는 웹 사이트가 우위를 차지합니다. UX 디자인은 사용자가 제품을 사용한 후 상호 작용하고 느끼는 방식을 이해하는 프로세스입니다. 주로 사용 편의성을 높이기 위해 통합됩니다. 이제 Google은 웹사이트의 전반적인 사용자 친화성을 함께 측정하는 세 가지 핵심 성능 보고서에서 웹사이트 디자인을 판단합니다 .

반응형 개조를 거부하는 대형 이미지

물병을 유리잔에 부어본 적이 있습니까? 유리잔이 가득 차자 물이 넘치기 시작합니다. 웹사이트 디자인을 모바일 장치의 작은 화면에 맞추기 시작하는 경우에도 마찬가지입니다.

랜딩 페이지에 수백 개의 이미지가 있는 웹 사이트를 상상해 보십시오. 당연히 사용자가 페이지를 탐색하기 어려울 것입니다. 모바일 버전에서는 모든 것이 너무 작아지고 읽을 수 없게 됩니다.

Searchmetrics에서 실시한 연구에 따르면 검색 결과 페이지(SERP)의 상위 10개 웹사이트에는 웹사이트의 페이지당 이미지가 3개 미만인 것으로 나타났습니다. 배운 교훈은 혼란이 많을수록 검색 엔진에 더 어렵다는 것입니다.

Google의 PageSpeed ​​Insights 테스트는 디자인에서 무거운 콘텐츠 요소를 제거하는 방법에 대한 몇 가지 아이디어를 제공할 수 있습니다. 페이지를 50% 이상 SEO 친화적으로 만들기 위해 압축이 필요한 이미지를 보여줍니다.

가치를 추가하지 않는 그림에 텍스트 추가

텍스트는 웹사이트의 백엔드에서 HTML로 코딩된다는 점을 제외하면 Google에서 읽을 수 있는 것입니다. 알고리즘은 이미지를 읽거나 그 안에 쓰여진 텍스트를 읽을 수 없습니다. 따라서 웹사이트의 텍스트를 간소화하는 것은 SEO의 또 다른 중요한 측면입니다.

이미지가 아닌 페이지 디자인의 코드에 텍스트를 추가하는 것이 좋습니다. 이를 통해 알고리즘은 키워드를 읽고 식별하며 그에 따라 순위를 매길 수 있습니다. 이미지에 텍스트를 추가해도 확대하면 흐려집니다.

또한 웹 사이트에 텍스트를 추가하면 대부분의 디자이너가 놓치는 이점이 있습니다. 다른 언어로 된 방문자가 정보를 필요로 하는 경우 인코딩된 텍스트는 변경할 수 있지만 이미지는 변경할 수 없습니다.

작업을 진행하려면 다음과 같은 특정 측면에서 작업해야 합니다.

이미지에 Alt 태그 추가

alt 태그는 백엔드에서 HTML로 코딩된 이미지에 대한 설명입니다. 검색 엔진은 이 코드를 읽어 이미지와 순위 쿼리의 관련성을 이해합니다. 너무 많은 그래픽은 좋은 것보다 더 많은 해를 끼칠 것입니다. 이미지의 이름을 중요한 SEO 도구로 사용해야 합니다. 참고로 Google은 파일 이름을 읽을 수 있습니다. 따라서 12345.jpg를 사용하는 대신 파일을 설명하는 키워드를 사용할 수 있으며, 이는 스파이더가 인덱싱하는 데 도움이 됩니다.

적절한 색상 조합 사용

적절한 색상 조합으로 선명한 이미지를 선택해야 합니다. 모든 웹사이트의 40% 이상이 디자인에 파란색을 사용하고 그 다음으로 녹색을 사용한다는 연구 결과가 있습니다.

특정 정보를 포함하지 않음

연락처 정보나 유용한 정보를 이미지에 제공하지 마세요. 미묘하지만 눈에 띄는 방식으로 바닥글에서 정보를 공유합니다. 알고리즘이 인덱싱할 수 있도록 바닥글에 중요한 웹사이트 링크를 추가하는 것도 고려할 수 있습니다.

리디렉션 중… OOPS 404 오류

끊어진 링크 페이지를 디자인하는 것은 너무 사소해서 대부분의 SEO 전문가가 놓치고 있습니다. 사람들은 종종 잘못된 URL을 입력하거나 더 이상 사용할 수 없는 페이지를 찾습니다.

여기 웹사이트 디자이너가 사용자의 관심을 끄는 무언가를 만들 수 있는 기회가 있습니다. 오류 페이지를 방문할 때 사용자는 뒤로 이동하고 잊어버리는 경향이 있습니다. 여기서 할 수 있는 일은 고객 서비스를 강조하는 것입니다.

오류 페이지로 리디렉션되었을 때 무언가를 찾고 있을 수 있습니다. 귀하의 웹사이트 홈페이지와 관련된 링크 또는 귀하의 서비스에 대한 여러 링크를 추가할 수 있습니다. 방문자의 경험에 관심이 있음을 보여줍니다.

일부 브랜드는 이를 마케팅 기회로 전환하고 긍정적인 온라인 평판을 구축했습니다. 예를 들어 사용자가 활용할 수 있는 무료 바우처 또는 eBook에 대한 링크를 추가했을 수 있습니다.

오류 페이지에 링크를 추가하면 추가된 링크가 기존 URL로 인덱싱되어 트래픽 및 순위가 증가하므로 방문자 손실을 방지할 수 있습니다.

이 아이디어는 다시 시작하는 웹사이트의 게임 체인저입니다. 이전 URL은 404 오류 페이지를 제공합니다. 따라서 사용자가 찾으려는 URL이나 찾는 정보를 언급할 수 있도록 각 오류 페이지에 피드백 양식을 첨부할 수 있습니다. 테스트를 거쳤으며 이를 수행한 웹마스터는 실제 URL을 찾는 사람들로부터 이메일을 받았습니다.

팝업 완전히 닫기

Ethan Zuckerman은 20년 전에 JavaScript와 서버 측 Perl을 통해 팝업 광고를 만든 것에 대해 여전히 미안함을 느낍니다. 성가신만큼 판매를 촉진합니다.

사용자의 70%가 팝업을 "무관하다"고 생각하는 설문 조사와 달리 많은 기업이 팝업을 통해 실질적인 이익을 얻었습니다. 심지어 Entrepreneur는 제한된 제안과 판매를 번쩍임으로써 팝업을 통해 사용자의 참여를 유도하여 매출이 162% 증가했다는 사실을 발견했습니다. Chrome에 내장된 차단 메커니즘이 있을 정도로 싫어하는 기능에 대한 놀라운 결과입니다.

팝업이 본질적으로 나쁜 것은 아닙니다. 그래서 우리는 무엇을 잘못하고 있습니까? Google의 웹마스터 블로그에 모든 내용이 나와 있습니다.

• 방문자가 SERP를 통해 페이지를 탐색한 직후 또는 정보를 찾는 동안 침입하는 팝업 광고
• 콘텐츠의 전체 페이지를 덮는 광고
• 접은 부분 위에 레이아웃 팝업을 추가하여 웹사이트의 주요 콘텐츠를 사용자의 작업 라인에서 멀리 떨어뜨립니다.

올바르게 수행하면 팝업이 그렇게 나쁠 수 없습니다. 실제로 WebMeUp은 팝업을 포함할 것을 강력히 제안합니다. 왜? 몇 달 만에 가입자의 95%를 확보할 수 있었기 때문입니다. 그렇다면 디자이너가 놓치고 있는 것은 무엇일까요?

다음은 방문자에게 유용하도록 디자인할 수 있는 몇 가지 아이디어입니다.

팝업은 이미 이루어진 판매 수를 과시하거나 웹사이트에 도움이 될 수 있는 통계를 보여주는 좋은 방법입니다.

• 팝업을 통해 판매, 할인, 인센티브 및 공짜 물건을 제공하는 것은 사용자 참여를 유도하는 좋은 아이디어입니다.
• 깜박이는 시간은 이상적으로 5초로 설정됩니다. 일반 방문자의 경우 매분마다 팝업이 나타나는 시간이 이상적인 것으로 나타났습니다.
• 이메일 제출을 위한 CTA(Call to Action)로 빨간색을 사용하여 최대 제출 수를 얻었습니다.

H1이 누락된 홈페이지

스파이더는 메타 설명, 제목 태그, 대체 태그, H1, H2 및 HTML 코드와 같은 요소를 읽어 쿼리와의 관련성을 찾습니다. 요소 중 하나라도 제대로 최적화되지 않으면 주요 순위 기회를 놓칠 수 있습니다. 이러한 요소 중 하나는 H1입니다.

사람들은 H1을 SERP에서 볼 수 있는 제목 태그와 동일시하는 경향이 있습니다. 제목 태그는 주로 웹 페이지로 이동하는 링크입니다. 쿼리에 대한 설명으로 웹 페이지에 표시되는 것을 헤더 또는 H1이라고 합니다. 헤더는 쿼리 결과가 표시되는 동안 나타나지 않지만 스파이더가 웹사이트의 주제를 식별하는 데 도움이 됩니다.

H1, H2 등이 될 수 있는 헤더는 SEO에서 결정적인 요소입니다. 그들은 스파이더가 읽는 HTML 코드의 일부를 형성하고 크롤러가 집중할 수 있도록 특정 단어를 눈에 띄게 만듭니다.

따라서 H1을 포함하는 것은 웹마스터를 위한 프로 팁입니다. 다음을 기억하십시오.

• H1은 웹페이지의 기본 키워드를 포함해야 합니다.
• H1은 접은 부분 위에 위치해야 합니다. 전체 페이지 팝업이나 스크롤 없이 볼 수 있는 광고로 인해 흐려져서는 안 됩니다.
• 방문자에게 깊은 인상을 남길 수 있는 시간은 약 5초임을 기억하십시오. H1이 매력적인지 확인하세요.

Google이 좋은 스크롤러라고 생각하기

사용자는 아래로 스크롤하여 즉시 관련 정보를 검색할 수 있지만 거미는 그렇게 할 수 없습니다. 적합하고 귀하의 사이트 순위를 매길 수 있는 추가 콘텐츠 및 페이지를 고려하지 않습니다.

온라인 컨퍼런스에서 Google의 Martin Splitt는 이 문제에 상당히 공감했습니다. 그는 거미가 눈앞에 보이는 모든 것을 읽고 인덱싱한다고 지적했습니다. 지연 로드 문제를 해결하려면 웹마스터가 Google 검색 센터를 참조해야 합니다. 검색 엔진 거인은 몇 가지 수정 사항을 언급합니다.

• Chrome 76을 사용하면 웹사이트 디자이너가 JavaScript에서 지연 로딩을 위한 라이브러리를 코딩하지 않고도 로딩 속성을 사용할 수 있습니다.
• JavaScript 라이브러리를 사용하면 뷰포트에 들어가는 동안 데이터를 로드할 수 있습니다.
• 페이지가 매겨진 스크롤을 통해 사용자는 콘텐츠의 원하는 섹션으로 이동하는 링크를 클릭할 수 있습니다.

웹 사이트에 많은 투자를 했을 수 있습니다. 그러나 이러한 실수는 역효과를 낳을 수 있습니다. 이러한 사항을 인지하고 필요한 단계와 업데이트를 수행하여 SEO 및 콘텐츠 게임에서 우위를 점하고 있는지 확인하십시오.