모든 웹 디자이너가 알아야 할 7가지 SEO 필수 사항

웹 디자이너와 SEO 전문가는 머리를 맞대는 경향이 있습니다.

왜요?

이 두 요소는 모든 웹사이트에 절대적으로 필수적이지만 때로는 서로 반대 방향으로 작동하기 때문입니다.

디자이너는 사용자에게 뛰어난 시각적 경험을 제공하는 데 중점을 두고 있지만 SEO 전문가는 검색 엔진에 사이트에 대한 사실적인 뷰를 제공하는 데 관심이 있습니다.

디자인이 없으면 웹 사이트는 과소 평가됩니다. 그러나 SEO 없이는 훌륭하게 디자인된 웹사이트라도 독자들은 결코 찾지 못할 것입니다.

갈등을 수습할 방법이 없을까요?

이 기사에서는 디자이너가 모든 웹사이트에서 검색 엔진 최적화 프로세스를 도울 수 있는 7가지 방법에 대해 알아보겠습니다. SEO에 중요한 디자인 요소와 웹 디자이너와 SEO 전문가 모두가 최종 결과에 만족할 수 있는 몇 가지 흥미로운 팁을 배우게 됩니다.

1. 검색 엔진이 이미지를 "읽게" 합니다.

웹 디자인의 가장 큰 부분 중 하나는 이미지를 추가하여 텍스트를 나누는 것입니다. 그러나 Google은 사람들이 보는 것과 같은 방식으로 이러한 이미지를 보지 않습니다.

HTML <img> 태그는 검색 엔진에 이미지가 있음을 알려줍니다. 그러나 이미지의 실제 내용은 검색 엔진 봇이 읽을 수 없습니다.

그렇다면 검색 엔진이 해당 이미지를 "읽도록" 하려면 어떻게 해야 할까요?

WordPress Media Manager는 우리가 사용하는 모든 이미지의 제목과 대체 텍스트를 변경할 수 있는 기능을 제공합니다.

미디어 관리자를 클릭하고 최적화하려는 이미지를 선택한 다음 제목 과 대체 텍스트 를 추가하기만 하면 됩니다. 이렇게 하면 HTML 코드가 변경되어 검색 엔진 봇이 읽을 수 있는 단어가 추가됩니다.

예를 들어 파리에 대한 게시물에 에펠탑 사진을 추가했다고 가정해 보겠습니다. 대체 텍스트의 경우 "파리의 에펠탑"을 추가할 수 있습니다. 이제 검색 엔진은 이미지가 있을 뿐만 아니라 이미지가 무엇에 관한 것인지도 압니다.

이는 해당 페이지의 SEO에 도움이 되며 이미지가 추가 검색 유형인 이미지 검색에 표시되도록 합니다.

2. 모바일 액세스에 최적화되어 있는지 확인

작년에 모바일 웹 사용이 실제로 데스크톱 웹 사용을 능가했습니다. 즉, 점점 더 많은 사람들이 스마트폰과 태블릿을 사용하여 인터넷을 검색하고 있습니다. 결과적으로 검색 엔진은 모바일 사용에 적응하는 웹사이트에서 더 호의적으로 보입니다.

웹 디자이너로서 디자인을 모바일 친화적으로 만드는 방법을 아는 것이 그 어느 때보다 중요합니다.

Google에 따르면 웹사이트를 모바일 친화적으로 만드는 방법에는 반응형 웹 디자인과 동적 제공의 두 가지가 있습니다. 이 두 가지 모두 URL을 동일하게 유지하면서 사이트가 사용자의 모바일 브라우저에 자동으로 적응하도록 합니다.

모바일 친화성을 유지하려면 사이트의 주요 콘텐츠에 Flash 비디오를 사용하지 않는 것도 중요합니다. 우리 모두는 Flash가 유행을 타지 않는다는 것을 알고 있지만 모바일 사용에 최적화할 때 이 죽어가는 형태의 비디오를 피하는 것이 더욱 중요합니다.

3. 웹 글꼴과 HTML을 사용하여 크롤링 가능한 디자인 만들기

이전에 alt 태그를 사용하는 것이 검색 엔진이 이미지를 "읽을" 수 있도록 하는 좋은 방법이지만 이미지에 텍스트가 있는 경우에는 어떻게 될까요? 그리고 그 텍스트가 alt 태그에 비해 너무 크면 어떻게 될까요?

웹폰트가 구출됩니다! Fonts.com이나 Google과 같은 웹사이트의 웹폰트를 포함하여 텍스트가 있는 배너나 이미지를 디자인하는 경우 검색 엔진 봇이 디자인을 읽을 수 있도록 허용합니다.

또한 이러한 웹 글꼴을 HTML과 결합하여 디자인의 텍스트가 진정한 "라이브"인지 확인할 수 있습니다. H1 또는 H2 제목, 굵은 텍스트 등과 같은 HTML 요소를 포함함으로써 크롤링 봇은 여전히 ​​그래픽 내용을 볼 수 있습니다. 그러면 이 텍스트 내의 모든 키워드를 읽을 수 있으며 이는 온페이지 SEO에 도움이 됩니다.

4. 확장 가능한 div를 삽입하여 미니멀한 디자인과 최적화된 콘텐츠를 결합합니다.

미니멀한 디자인에 관심이 있지만 페이지에 SEO용 텍스트를 포함하는 방법을 잘 모르겠다면 잘 들어보세요!

웹 페이지에 제품 이미지 패널이 있다고 가정해 보겠습니다. 훌륭한 미니멀리스트 디자인은 이미지로 남겨두고 alt 태그를 사용하여 검색 엔진 봇에게 이미지가 무엇인지 알려주는 것입니다.

맞춰보세요: 귀하의 SEO 전문가는 여전히 만족하지 않습니다.

alt 태그를 사용하여 중요한 텍스트를 삽입하는 대신 각 이미지에 확장 가능한 div를 배치해 보세요. 그렇게 하면 이미지를 클릭할 때 하단에 <div>가 확장되어 사용자와 검색 엔진 모두를 만족시킬 매력적인 SEO가 풍부한 콘텐츠를 위한 공간을 제공합니다(SEO 전문가는 말할 것도 없습니다!).

이 텍스트는 검색 엔진에서 완전히 크롤링할 수 있습니다. 그러나 클릭할 때까지 표시되지 않으므로 미니멀한 디자인을 유지할 수 있습니다.

5. 고급 사이트 기능을 위한 HTML5 및 CSS3 코드

HTML5와 CSS3를 사용하면 다양한 이점이 있습니다. 오늘의 주제에 대해 좀 더 구체적으로 말하자면, 이 두 가지 개선된 마크업 언어는 웹 페이지의 SEO에 확실한 영향을 미칠 수 있습니다.

디자인하는 웹 페이지가 제대로 구성되지 않은 경우 SEO를 위한 다른 모든 노력은 기본적으로 창 밖으로 던져질 수 있습니다. HTML5를 사용하면 웹 페이지가 잘 구조화되고 의미적으로 정확하여 검색 엔진 순위가 향상됩니다.

뿐만 아니라 HTML5는 무시무시한 플래시를 대체할 수 있는 환상적인 도구입니다! 또한 각 웹 페이지의 코드 양을 줄여 봇이 크롤링하기 쉽게 만들 수 있습니다.

6. 빠른 응답을 위한 설계 최적화

2010년에 Google은 순위 알고리즘의 일부로 사이트 속도를 포함할 것이라고 발표했습니다. 그 이후로 사이트 속도는 SEO에서 그 어느 때보다 중요해졌습니다.

그렇다면 디자인을 통해 웹사이트를 빠르게 실행하려면 어떻게 해야 할까요?

핵심은 이미지 품질과 파일 크기 사이의 균형을 찾는 데 있습니다. 물론 파일이 크면 로드하는 데 시간이 오래 걸리므로 이미지를 더 작게 만들려는 것은 모두 알고 있습니다. 그러나 품질을 손상시키지 않는지 확인하십시오.

빠른 응답을 위해 이미지를 최적화하는 데 도움이 되는 한 가지 팁: HTML로 크기를 줄이지 않도록 하십시오. 더 큰 이미지를 로드하고 더 작은 해상도로 표시하도록 HTML을 변경하는 대신 업로드하기 전에 이미지의 크기를 줄이십시오. 이렇게 하면 대역폭이 절약되고 응답 시간이 빨라집니다.

(참고 사항: HTML5 및 CSS3 사용의 또 다른 장점은 웹사이트 응답 시간을 단축하는 데 도움이 된다는 것입니다. SEO에 좋은 또 하나의 이유입니다!)

7. 훌륭한 콘텐츠 제작자와 팀을 이루어

아직 하지 않았다면 이것은 SEO 친화적인 디자인을 만들기 위한 최고의 팁 중 하나입니다. 콘텐츠와 디자인은 함께 진행됩니다. SEO 콘텐츠 제작자와 협력하면 다른 사람들에게는 없는 이점이 있습니다. 콘텐츠 작성자는 키워드 연구를 수행하고 웹 페이지에 대한 콘텐츠를 최적화하고 디자인에 포함할 텍스트에 대한 팁을 제공하여 도움을 줄 수 있습니다.

수년 동안 인터넷은 콘텐츠 우선 디자인의 이점을 선전해 왔으며 콘텐츠 제작자와 디자이너가 한 팀으로 일할 때 가장 잘 달성됩니다.

결론

웹 디자이너: 실제로 SEO 전문가와 어울릴 준비가 되셨습니까? 이 기사를 읽고 나면 모든 사람을 만족시킬 수 있는 SEO 친화적인 아이디어를 디자인에 제공할 수 있습니다.

그러나 SEO에 대한 이러한 팁은 SEO 전문가와 함께 하는 것 이상으로 유용합니다. 디자인으로 페이지 SEO를 개선할 수 있다는 것은 디자이너로서 당신을 더욱 가치 있게 만들 것입니다.

웹 디자인에 이 SEO 팁을 사용하면 그 어느 때보다 더 나은 결과를 얻을 수 있습니다!

새로운 것을 배울 준비가 되셨습니까? 다음 기사를 확인하세요.

• 관리형 WordPress 호스팅이 비즈니스에 완벽한 3가지 이유
• 여러 워드프레스 사이트 관리의 핵심
• WordPress의 기본 SEO 및 콘텐츠 작성에 대한 초보자 가이드