2021/03 2

OpenGraph로 검색엔진 노출, SNS공유 최적화

검색엔진의 로봇의 경우 사이트에 메타데이터가 설정되어 있지 않으면 웹사이트의 내용을 크롤링하여 보여준다. 대체적으로 이상하게 노출된다고 생각하면 된다. 위와 마찬가지로 웹사이트의 내용을 그대로 긁어 보여주기 때문에 사이트의 정체성을 나타내기가 힘들다, 그럼 로봇이 수집할 수 있게 뭐를 설정해야 한단 말인가? html의 기본 메타태그인 title, description은 기본적으로 잡아주는게 좋다. 많은 로봇들이 해당 데이터를 기본정보로 크롤링한다. (네이버-콘텐츠 마크업) 그렇다면 SNS 공유, 메신저 공유(라인, 페이스북, 카카오톡)의 경우는 어떤식으로 노출되는 걸까? 이에 대한 방법중 대중적인 방법이 페이스북의 OpenGraph 프로토콜이다. (Open Graph) OpenGraph란? HTML 문서..

IT Tip 2021.03.09

Vuetify - select에 검색기능을 추가하려면? autocomplete

개인서비스의 select 컴포넌트에 데이터가 많아져서 조회기능을 넣으면 좋지 않을까 하여 개선해보았다. vuetify의 기존 select 컴포넌트는 다음과 같은데 ... ... 위와 같은 모습으로 나오게 된다. 항목이 적을 경우는 편리하긴한데 조회기능이 없어서 많아지면 불편하다. 이를 Autocomplete 컴포넌트가 해결할 수 있다. ... ... v-select 를 v-autocomplete로만 변경해주면 완료 위와 같이 검색도 되는 select 컴포넌트로 개선 가능하다. 여담 직접 만들기 전에 제공되는 api, 컴포넌트를 조회 후, 라이브러리를 찾아보고, 그리고 없으면 구현하는게 좋다. 거인의 어깨는 서비스 개발 속도에 아주 큰 도움이 되니까..

Vue.js 2021.03.03