Nextjs
-
[SEO] VideoObject 스키마 마크업을 통해 구글에 동영상 노출하기Nextjs 2022. 10. 2. 18:49
페이지에 영상이 있을 경우, 영상의 세부정보에 관해서 구글에게 명시적으로 알려줄 수 있는 방법이 있다. 바로 VideoObject 스키마 마크업! 이를 잘 활용할 경우 아래 그림처럼 구글 검색 결과에 동영상이 걸릴 확률이 높아진다고 한다. 물론 사용한다고 해서 확실히 검색이 된다고 할 수는 없겠지만, SEO에 조금 도움이 된다고 인식하면 좋을 듯 하다. VideoObject 속성 VideoObject의 필수 속성은 아래 네가지이다. 필수 속성을 포함하지 않으면 구글에서 동영상에 관한 정보를 인식 못할수 있다 하니 꼭 넣어주자. 각 description, name, thumbnailUrl, uploadDate로 각자 맞는 값을 넣어주면 된다. 그 외에 권장 속성으로 contentUrl, duration 등..
-
[SEO] Canonical tag(캐노니컬 태그, 대표URL)과 중복 콘텐츠 이슈Nextjs 2022. 9. 4. 23:57
예전에 SEO 작업 하면서 웹페이지에 설정하긴 했는데 뒤늦게 기록용으로 canonical tag 에 대해서 남겨본다. Canonical tag(캐노니컬 태그)란 ? 웹페이지 HTML 코드 상에 삽입되는 태그로, 검색엔진들에게 어떤 URL이 대표 URL인지 알려주는 역할을 한다. head 태그 안에 넣으며, 일반적인 형태는 아래와 같다. 캐노니컬 태그가 필요한 이유 페이지의 내용은 같지만, URL이 다른 경우 검색엔진이 같은 내용의 페이지를 여러번 인덱싱하는 문제가 생길 수 있다. 검색엔진 입장에서는 중복되는 콘텐츠가 많은 웹페이지로 인식할 수 있고, 전반적으로 웹페이지 크롤링이 적게 될 가능성이 있다. http://www.mysite.com/article/article1.html http://www.my..
-
Next.js 다이나믹 메타 태그 넣기Nextjs 2022. 7. 10. 21:36
저번 글에 이어서 SEO 작업을 계속 하고 있다. 이번주엔 다이나믹 메타 태그 작업을 했다. (메타태그 종류나, 검색최적화를 위한 추천 등의 내용은 없습니다) https://jisoo-log.tistory.com/18 Next.js 정적, 동적 사이트맵 만들기 갑작스레 전혀 모르는 프로젝트의 사이트맵을 만드는 업무를 하게 됐다. 처음에는 사이트맵이 무엇인지도 몰라서 급하게 리서치를 했다. 사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파 jisoo-log.tistory.com 메타 태그란? 웹페이지에서 element 를 열어보면 meta tag ); } 하지만 아래와 같은 방식으로 하면 메타태그가 비어있는 참사(?)가 일어난다. import Head from 'next/head'; import { m..
-
Next.js 정적, 동적 사이트맵 만들기Nextjs 2022. 6. 26. 23:57
갑작스레 전혀 모르는 프로젝트의 사이트맵을 만드는 업무를 하게 됐다. 처음에는 사이트맵이 무엇인지도 몰라서 급하게 리서치를 했다. 사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일입니다. (출처: Google 검색 센터) 검색엔진들은 사이트맵 파일을 읽고서 사이트를 크롤링하기 때문에, SEO(Search Engine Optimization, 검색최적화)를 위해 기본적으로 세팅해주어야한다고 한다. 사이트맵 파일이 없어도 검색엔진이 크롤링을 통해 사이트를 찾긴 하지만, 발견되지 않는 웹페이지가 없도록 직접 url들을 넣어주는 것이다. 아래 내용은 이 블로그를 많이 참고해서 작성했다. 덩달아 링크로 타고 들어간 이 글도 도움이 많이 되었다. (이 두 글이 없었다면 ..
-
Next.js 와의 첫 만남 (CSR vs SSR)Nextjs 2021. 9. 26. 22:15
회사에서 React Native 앱 개발을 주력으로 하고 있는데, 어느날은 Next.js로 구현된 홈페이지 리뉴얼 일감이 주어졌다. Next.js 라 하면 보통 SSR을 쉽게 구현할 수 있는 자바스크립트 프레임워크라는 설명이 따라온다. 당시 CSR과 SSR이 무엇인지도 모르는 채여서 한참 이런저런 설명을 찾았었다. CSR(Client Side Rendering) 과 SSR(Server Side Rendering)이란? 이름에서도 알 수 있지만, 결국 어디에서 화면을 랜더링 해주느냐의 방식 차이다. 우리가 보는 화면은 기본적인 html 틀과, 그 안에 들어갈 다양한 데이터들이 합쳐져서 완성된다. 첫 화면을 만드는데 필요한 내용을 서버에서 받아온 뒤, 클라이언트쪽에서 조합 후 보여주면 CSR, 서버에서 이미..