SEO란?

🤩 SEO란❓

 

🌱 SEO(Search Engin Optimization: 검색엔진최적화)

네이버나 구글같은 검색 엔진에 뭔가를 검색했을 때, 내가 만든 사이트가 검색 결과에 더 잘 보이게 하기 위한 과정입니다.

검색을 하면, 검색 엔진이 내 사이트 내용물(메타 태그, html 내용 ...)을 한 번 훑어가고(크롤링), 내용물에 특정한 인덱스 같은 걸 만듭니다. 그리고 이 인덱스 같은걸 검색 결과에 보여줍니다. 검색 엔진 최적화는 검색 엔진이 내 사이트를 크롤링할 때 정보를 더 잘 가져갈 수 있도록 도와주는 과정이기도 합니다. 

---

SEO에서 얘기 하는 것은 구글의 검색엔진이 찾을 수 있고, 이해할 수 있는 사이트를 만들라는 것이다. 그렇게 하기 위해서는 아래의 요건들을 체크해볼 필요가 있습니다.

 

🍄 robots.txt

 

🧑‍💻 robots.txt파일은 크롤러가 사이트에 요청할 수 있는 페이지/파일과 요청할 수 없는 페이지/파일을 검색엔진 크롤러에 알려 주는 역할을 합니다.

 

🍄 모바일 친화적인 페이지

 

🧑‍💻  반응형으로 개발을 할 때에는 모바일 퍼스트전략으로 진행을 하는 것이 좋습니다. 왜 ? 동일한 환경에서 모바일 퍼스트 전략을 사용하여 개발한 웹 사이트는 그렇지 않은 사이트보다 빨리 로드될 것입니다. (그 차이가 미미할지라도.. 물론 인터넷 속도가 매우 느린 환경에서는 이 차이가 명확하게 보이겠지만,) css는 상위에서부터 css를 읽고, 엘리먼트에 속성을 적용하고, 같은 엘리먼트에 새로운 속성을 적용하는 선택자가 나타나면 명시도 점수를 계산하여 점수가 높거나 점수가 같은 경우에는 하위에 있는 속성이 상위에 있는 속성을 덮어씁니다. 이런 경우 모바일 퍼스트 전략을 사용한 사이트는 데스크탑에서만 필요한 css는 읽지 않게 되므로 받아오는 데이터가 더 적어질 것이고 그만큼 속도가 더 빠를 것입니다. (데스크탑은 데이터 패킷 단위로 금액을 지불하는것도 아니고, 속도 자체도 모바일 환경보다 더 빠르기 때문에 이런 환경을 생각하지 않아도 된다.)

🍄 적절한 meta태그 사용 

🧑‍💻  meta 태그는 HTML 문서의 head요소 안에 들어간다. meta태그는 여러가지 정보를 제공할 수 있는데, 데이터의 성격을 정의하거나 문서를 설명하는 정보를 담고 있다.
앞선 포스팅중 HTML tags에서 meta태그에 대해서 작성한 적이 있지만, 다시 한번 설명하면 meta태그는 name과 content특성을 함께 사용해서 문서의 메타데이터를 제공할 수 있다.

• keyword : 웹페이지의 홍보수단으로 검색 키워드를 지정 가능하며 ,로 구분하여 선언한다.
• subject : 문서의 제목정보
• description : 웹페이지 요약 정보, 제작자 정보(autuor), 저작권 정보(copyright)
• author : 문서의 저작자

위의 metatag는 검색결과에 노출되는 내용을 정의하게 됩니다.

 

🍄 사이트맵 파일을 제공

 

🍄 정확한 계층구조가 포함되도록 설계

 

🍄 유효한 HTML (시멘틱 마크업)을 사용할 것

 

🧑‍💻 올바르고(시맨틱) 오류가 없도록 HTML을 작성한다. HTML과 CSS를 제대로 사용한다면 콘텐츠와 디자인이 분리되므로 페이지를 더 빠르게 렌더링 및 로드할 수 있다. (W3C에서 제공하는 유효성 검사기를 통해서 사이트를 검사하는 것을 추천한다.) 단, 시맨틱한 엘리먼트를 사용하여 HTML을 작성한다고 하여도 색인생성에 큰 영향을 미치지는 않는다고 한다.

 

🍄 이미지, 동영상, 구조화 된 데이터에 관한 권장사항을 준수

 

🧑‍💻 이미지 최적화

• 이미지 내에 중요한 텍스트 삽입하지 않는다. : 제목과 같은 중요한 요소를 디자인을 위해서 이미지로 만들경우 일부 사용자가 접근하기 어려우며, 번역도구가 작동하지 않으므로 중요한 내용은 이미지가 아닌 텍스트로 작성해야 한다.
• 구체적인 제목, 캡션, 파일 이름, 텍스트를 추가한다.
• 구체적인 대체 텍스트를 사용한다. : 대체 텍스트를 누락하거나, 유인 키워드를 반복하여 사용하는 것은 좋지 않으며, 정확하고 구체적인 대체 텍스트를 작성하는 것이 좋다.
• 구글에서는 CSS 이미지(background)는 색인을 생성하지 않으므로 이미지에 의미가 있는 마크업을 사용해야 한다.

🧑‍💻  동영상 최적화

• 기본 노출 : 썸네일 이미지와 동영상 파일의 링크가 반드시 필요하다. (또한 동영상이 사용자가 동영상을 볼 수 있는 공개 페이지에 있어야한다.)
• 고급 노출 : 동영상 미리보기, 도영상 길이, 동영상 날짜, 제공업체 정보, 사용자 국가 또는 검색기기에 따른 검색결과 제한 기능 등이 있으면 동영상과 관련된 추가 기능을 제공할 수 있다.

🍄 <title> / <alt>속성이 구체적이고 명확한지 확인

🧑‍💻 이미지보다 텍스트를 사용하여 콘텐츠를 전달한다.

 

🍄 이외

🧑‍💻 페이지 색인 생성 개선하기

• 페이지 제목은 짧고 의미있게 만든다.
• 페이지의 주제를 전달하는 페이지 제목을 사용한다.

🧑‍💻 단순한 URL 구조 유지하기

: 사이트의 URL 구조를 최대한 단순하게 유지하고, 콘텐츠를 정리하여 URL을 이해하기 쉬운 방식으로 구성하는 것이 좋다.

🧑‍💻 브라우저 호환성

가능한 많은 브라우저에서 테스트를 하고, 각 브라우저에서 동일한 사용자 경험을 얻을 수 있는지 확인해야한다.