-
[SEO] VideoObject 스키마 마크업을 통해 구글에 동영상 노출하기Nextjs 2022. 10. 2. 18:49
페이지에 영상이 있을 경우, 영상의 세부정보에 관해서 구글에게 명시적으로 알려줄 수 있는 방법이 있다.
바로 VideoObject 스키마 마크업! 이를 잘 활용할 경우 아래 그림처럼 구글 검색 결과에 동영상이 걸릴 확률이 높아진다고 한다.
물론 사용한다고 해서 확실히 검색이 된다고 할 수는 없겠지만, SEO에 조금 도움이 된다고 인식하면 좋을 듯 하다.
출처 : 구글 검색 센터 VideoObject 속성
VideoObject의 필수 속성은 아래 네가지이다. 필수 속성을 포함하지 않으면 구글에서 동영상에 관한 정보를 인식 못할수 있다 하니 꼭 넣어주자. 각 description, name, thumbnailUrl, uploadDate로 각자 맞는 값을 넣어주면 된다.
그 외에 권장 속성으로 contentUrl, duration 등 몇가지가 더 있다. 넣을 수 있는 정보라면 최대한 넣어주는 것이 좋다. 특히 contentUrl(혹은 embedUrl)까진 필수라고 생각하면 좋을 것 같다. 링크에서 다른 속성들을 확인할 수 있다. 해당이 안돼서 넣진 않았지만, 속성을 통해 실시간 배지나 동영상 세그먼트 정보(특정 시간 지점으로 이동)를 넣을 수 있는 점이 흥미로웠다.
VideoObject 스키마 마크업 예시
아래 예시는 구글 검색센터에서 제공하는 JSON-LD 형태를 그대로 가져왔다.
<html> <head> <title>Introducing the self-driving bicycle in the Netherlands</title> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "VideoObject", "name": "Introducing the self-driving bicycle in the Netherlands", "description": "This spring, Google is introducing the self-driving bicycle in Amsterdam, the world's premier cycling city. The Dutch cycle more than any other nation in the world, almost 900 kilometres per year per person, amounting to over 15 billion kilometres annually. The self-driving bicycle enables safe navigation through the city for Amsterdam residents, and furthers Google's ambition to improve urban mobility with technology. Google Netherlands takes enormous pride in the fact that a Dutch team worked on this innovation that will have great impact in their home country.", "thumbnailUrl": [ "https://example.com/photos/1x1/photo.jpg", "https://example.com/photos/4x3/photo.jpg", "https://example.com/photos/16x9/photo.jpg" ], "uploadDate": "2016-03-31T08:00:00+08:00", "duration": "PT1M54S", "contentUrl": "https://www.example.com/video/123/file.mp4", "embedUrl": "https://www.example.com/embed/123", "interactionStatistic": { "@type": "InteractionCounter", "interactionType": { "@type": "WatchAction" }, "userInteractionCount": 5647018 }, "regionsAllowed": "US,NL" } </script> </head> <body> </body> </html>실제 적용 코드
Next.js를 사용하고 있어서 next/head 를 사용했다.
페이지 내 description을 따로 만들어서 사용하고 있어서 video 와 description 내용을 받아서 object를 만들었다. 썸네일 같은 경우는 현재 페이지가 유튜브 영상을 가져오고 있어서 유튜브쪽 썸네일을 활용했다.
<Head> <script key="video-object" type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify( getVideoObjectScheme(initialVideo, description) ), }} /> </Head>export const getVideoObjectScheme = ( video, description ) => { return { '@context': 'https://schema.org', '@type': 'VideoObject', name: video.videoTitle, description: description, thumbnailUrl: `https://img.youtube.com/vi/${video.videoUrl.replace( /https:\/\/.*\//g, '' )}/mqdefault.jpg`, uploadDate: video.createdAt, embedUrl: video.videoUrl, }; };적용 결과
리치 검색결과 테스트 사이트에서 잘 적용이 되었는지 확인이 가능하다. url을 넣고 아래 URL 테스트 버튼을 누르면 된다.
실제로 코드를 적용한 이후에 링크를 넣어보니 아래와 같은 결과가 나왔다.
여기서 '동영상' 부분이 코드를 통해 업데이트 된 부분이다. 동영상의 오른쪽의 화살표를 누르면 상세 정보를 확인할 수 있다.
그러면 아래와 같은 속성들이 인식됐다는 것을 확인할 수 있다.
마치며
이렇게 적용하고 드라마틱하게 '검색결과에 동영상이 걸렸습니다!! 짠!' 하고 끝났으면 참 좋았겠지만..
여전히 비디오가 들어간 페이지는 잘 인식이 안되고 있다. 유튜브 영상을 가져다 사용해서 그런건지 의문이다.
이 이후에 비디오 사이트맵 작업도 해뒀으니 시간을 두고 좀 더 지켜봐야겠다. SEO 영역은 파도파도 끝이 없는 것 같다.
참고
https://developers.google.com/search/docs/appearance/structured-data/video
'Nextjs' 카테고리의 다른 글
[SEO] Canonical tag(캐노니컬 태그, 대표URL)과 중복 콘텐츠 이슈 (0) 2022.09.04 Next.js 다이나믹 메타 태그 넣기 (0) 2022.07.10 Next.js 정적, 동적 사이트맵 만들기 (0) 2022.06.26 Next.js 와의 첫 만남 (CSR vs SSR) (0) 2021.09.26