전체 글
-
[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..
-
[CSS] position 과 overflow를 활용한 웹 위의 모바일 화면 만들기기타 2022. 7. 24. 22:20
어느날 특이한 요구사항을 받았다. 웹페이지에 모바일 화면 크기로 스크롤되는 화면을 만들어주세요. html과 css만 사용해야 합니다. 나름 프론트엔드 개발자로 일을 하고 있었지만, 리액트와 tailwind의 편리함에 젖어 html이나 css에 대해 공부를 제대로 해본 적이 없는 것 같다. 더군다나 지금 회사는 퍼블리셔까지 있어서 게으름이 정점에 달해 있었다. 이번에 화면을 만들며 여러번 시행착오를 했었는데, 지금 적지 않으면 까먹을 것 같아 내용을 짧게 정리해보았다. 구체적인 css에 대한 설명보다는 이런식으로 구현했다 위주로 글을 썼다. 1. 상태바와 네비게이션바 고정시키기 (position) 처음에 생각한 부분은 상태바와 네비게이션바가 스크롤 할때 고정되어 있어야 한다는 점이었다. 고정은 posit..
-
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들을 넣어주는 것이다. 아래 내용은 이 블로그를 많이 참고해서 작성했다. 덩달아 링크로 타고 들어간 이 글도 도움이 많이 되었다. (이 두 글이 없었다면 ..
-
react에서 회원가입 form입력받기 (react-hook-form + yup)React 2022. 5. 29. 22:23
개인 프로젝트를 할때든, 실제 앱/웹 서비스를 만들든 꼭 처음에 만들게 되는 화면이있다. 바로 로그인/회원가입 화면! 물론 요즘에는 소셜 로그인이 생기면서 입력할게 점점 줄어들고 있긴 하지만, 아직 이메일로 회원가입 하는 창도 있어야하는건 마찬가지다. useState Hook 사용하기 보통 처음에 react에 입문할때는 useState hook 을 이용해서 입력값을 받아오는 법을 배운다. function App() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = (e) => { e.preventDefault(); console.log(`submit! ${ema..
-
글또 7기를 시작하며..회고 2022. 5. 15. 14:08
2022년 1월, 글또 6기가 끝났다. https://jisoo-log.tistory.com/14 글또 기간 내내 데드라인날 급하게 꾸역꾸역 글을 쓰며 후회를 많이 했었다. '다음주는 좀 더 일찍 시작해야지. 준비해서 좀 더 그럴듯한 글을 써야지.' 하고. 물론 지켜지지 못할 약속이었고. 같은 실수는 반복됐다. 때론 괜히 신청했나 하는 순간도 있었다. 하지만 결국 끝은 다가왔다. 블로그엔 적지만 10여 개의 글이 남았다. 몇 년 동안 말로만 시도하던 '개발블로그 만들기'는 글또 덕분에 스타트를 끊을 수 있었다. 물론 글또가 끝나고 나니 참여 이전처럼 글을 하나도 쓰지 않게 되었다. 그래서 다시 고통 받을 것(?)을 알면서도 7기에 참여했다. 글또에 참여하는 목적 1. 일단 쓰자 나는 하고싶은게 많으면서도..
-
video src의 썸네일을 추출할 때 canvas의 CORS 이슈(SecurityError) 우회하는 방법기타 2022. 4. 20. 21:13
(코드는 맨 밑에 있으니 코드만 확인하실 분은 맨 밑으로 내리시면 됩니다) React 웹에서 고객이 업로드할 영상을 골랐을 때, 썸네일 파일을 자동으로 생성하는 코드를 작성할 일이 있었다. 원래 React Native에선 라이브러리를 통해 뚝딱 해결했던 일이라 마찬가지로 React 라이브러리를 찾아보려했는데 생각외로 쉽지 않았다. 일단 구글링으로 알아낸 로직은 다음과 같았다. 이미지 파일 추출 로직 특정한 가 존재한다. 에 그 의 src를 그린다. canvas.toDataURL() 을 통해 이미지 데이터를 얻는다. 얻은 이미지 데이터로 파일을 생성한다. 첫번째 문제 : SecurityError 방법을 알고 신나게 시도를 해보았으나.. 아래와 같이 canvas.toDataURL() 부분에서 Security..