search

Hah-nna / Tech_Interview

0 stars 0 forks source link

Optimization: SEO(검색 엔진 최적화, Search Engine Optimization) #51

Open Hah-nna opened 9 months ago

Hah-nna commented 9 months ago

SEO(Search Engine Optimization)

SEO란?

웹사이트와 웹페이지를 검색엔진이 쉽게 발견하고, 읽어가서(크롤링), 색인하고(인덱싱), 상위 노출(랭킹)시켜 자연 유입되는 트래픽의 양과 질을 높일 수 있도록 관련 검색 알고리즘의 특성을 고려해 웹사이트의 구조나 콘텐츠를 개선하는 일련의 작업을 말함

요약하자면 검색엔진을 통해 검색 키워드를 입력했을 때 웹사이트 혹은 웹페이지가 검색 결과 상위에 노출될 수 있도록 하는 것임

SEO를 하기 위한 방법(프론트엔드)

  1. 시맨틱 태그 사용
예시 ```
로고 이미지

SEO를 신경써야하는 3가지 이유

  • 1. blabla
  • 2. 쌸라쌸라
  • 3. 호옹이
컴퓨터를 하며 카메라 쪽을 응시하고 있는 로봇
  • 대표자명 | 레이너
  • 개인정보관리책임자 | 캐리건
```
  1. title 태그 웹 페이지의 제목을 나타냄 검색 엔진은 이 태그를 통해 웹 페이지의 주제를 파악하기도 하며, 검색 결과에 표시되는 타이틀로도 사용될 수 있음
<title>프론트엔드 정보 공유 사이트</title>

  1. 메타태그 사용

    • description, keywords, robots, canonical 등의 메타 태그들을 작성해주기
      각 태그의 역할

  2. description 웹 페이지에 대한 설명을 요약한 1~2줄의 문장 페이지별로 description은 반복적이지 않게 다른 내용의 키워드로 작성되는 것이 좋음

<meta name="description" content="front-end developer community">
  1. keywords 검색 엔진을 위한 키워드를 정의함 (keywords 태그는 요즘 구글에서 거의 무시하는 태그라지만 타 검색엔진(ex: 네이버 등)에서는 어떻게 해석할지 모르기에 써놓는게 좋음)
<meta name="keyword" content="HTML, React, FrontEnd">
  1. robots 웹 사이트의 개별 페이지 혹은 특정 콘텐츠에 대한 검색 로봇의 접근 여부를 설정할 때 활용할 수 있음 이 속성을 어떻게 정의하느냐에 따라서 크롤러가 웹페이지를 크롤링하고 색인할 수 있는 권한을 받거나 받지 못하게 할 수 있음 참고

| 크롤링 : 검색 로봇들이 웹페이지를 돌아다니면서 데이터를 수집하는 행위
색인(indexing): 크롤링한 데이터를 기반으로 검색 결과에 표시될 수 있도록 하는 것

<meta name="robots" content="noindex">
// 현재 페이지와 컨텐츠를 검색 로봇이 크롤링과 인덱싱을 하지 않게 해서 검색 결과에 표시하지 않도록 하는 것

 <meta name="robots" content="noindex,nofollow">
// 현재 페이지를 인덱싱하지 않고 링크 추척x
// 회원 전용 페이지거나 민감한 데이터 등이 있을 경우 설정함
  1. canonical 한 페이지를 가리키는 여러 개의 주소가 존재할 때 검색 로봇이 어떤 주소가 원본인지 알 수 있도록 하기 위해 사용되는 태그
예시 ``` https://www.google.com https://www.google.com/search?q=강아지 https://m.google.com ``` 검색 엔진의 검색 로봇은 주소를 수집하는데 이 중 일부분이 주소가 같은 페이지를 가리키고 있음 근데 어떤 주소가 페이지를 가리키는 대표 주소인지 모름 그래서 검색 엔진이 스스로 어떤 URL이 표준인지 판단하거나 혹은 웹페이지에 어떤 URL이 표준인지 표기하는 방법이 있음 전자는 검색엔진이 임의로 표준 URL을 설정하기 때문에 페이지의 소유주가 의도한 표준 주소가 표준 URL이 되지 않을 수도 있음 따라서 검색엔진은 이러한 문제를 해결하기 위해 웹페이지의 소유주가 원하는 URL을 표준 URL로 설정할 수 있도록 canonical 태그를 제공함 **canonical을 사용하는 방법들** 1. link 태그의 rel 프로퍼티 값을 canonical로 명시하기 ``` ``` html상에 정의하는 경우 link태그의 rel 프로퍼티 값을 canonical로 지정하고 href 프로퍼티 값으로 표준 URL을 명시함 2. http응답 헤더에 명시 ``` HTTP/1.1 200 OK Content-Type: application/pdf Link: ; rel="canonical" ... ``` 응답 헤더의 Link 필드에 표준 URL을 명시하고 세미콜론으로 구분한 뒤 rel 값을 canonical로 설정함 캐노니컬 태그를 사용해 표준 URL을 설정하면 검색 엔진은 설정된 표준 URL을 통해 어떤 페이지가 표준인지 확인할 수 있고, 해당 페이지의 URL을 표준 URL로 설정한 다른 페이지들의 수를 파악할 수 있음 또한 대부분의 사이트가 URL에 쿼리를 통해 파라미터를 전달하는데 이 경우에도 쿼리가 있는 URL과 없는 URL이 서로 다른 URL로 취급되기 때문에 페이지 주소가 확실한 웹사이트에서도 캐노니컬 태그를 설정하는 것이 좋음

웹사이트가 소셜 미디어에서 공유될 때 어떻게 노출될지를 정의해줌

  1. 이미지 태그의 alt 프로퍼티 명시하기 크롤러는 이미지만 보고 해당 이미지가 어떤 것을 의미하는지 모르기 때문에 alt 프로퍼티를 명시해서 크롤러가 해당 이미지가 어떤 이미지인지 이해할 수 있도록 만들기

  2. 모바일 친화적으로 만들기 모바일 사용자가 많아졌기 때문에 서치 랭킹에서 이를 고려한 사이트들이 점수를 더 잘 받음 구글에는 모바일 친화성 가이드까지 있을 정도임

Hah-nna commented 9 months ago

SEO를 하기 위한 방법은 이따가 추가하겠음 ㅎ

Hah-nna commented 9 months ago

https://yozm.wishket.com/magazine/detail/1420/