공지사항

북마크 입니당 >

구글 브로거 링크 이미지 썸네일 가능해요?

 




대표적으로 티스토리에는 블로그 글에 링크를 걸어두면, 해당 링크의 간단한 제목과 같이 이미지가 첨부가 된다.

구글 브로거도 가능할까?

가능하다.


open graph를 이용하면 간단히 구현 할 수 있다.

Open Graph 프로토콜은 웹 페이지를 소셜 그래프의 풍부한 객체로 만들 수 있게 해주는 프로토콜입니다. 예를 들어, Facebook에서는 Open Graph를 사용하여 웹 페이지가 Facebook의 다른 객체와 동일한 기능을 갖도록 합니다. 이 프로토콜은 기존 기술과 스키마를 기반으로 하며, 개발자가 구현해야 할 하나의 요소를 제공합니다. 웹 페이지를 그래프 객체로 변환하려면 페이지의 <head>에 추가적인 <meta> 태그를 넣어 기본 메타데이터를 설정해야 합니다. 각 페이지에 필요한 네 가지 기본 속성은 다음과 같습니다:

  • og:title: 그래프 내에서 객체의 제목 (예: “The Rock”)
  • og:type: 객체의 유형 (예: “video.movie”). 지정한 유형에 따라 다른 속성도 필요할 수 있습니다.
  • og:image: 그래프 내에서 객체를 나타내는 이미지 URL
  • og:url: 그래프에서 객체의 영구 ID로 사용될 객체의 정규 URL (예: “The Rock”)

예를 들어, IMDB의 "The Rock"에 대한 Open Graph 프로토콜 마크업은 다음과 같습니다:

HTML
<html prefix="og: [OGP namespace]">
<head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock" />
    <meta property="og:type" content="video.movie" />
    <meta property="og:url" content="[IMDB URL]" />
    <meta property="og:image" content="[Image URL]" />
    <!-- ... -->
</head>
<!-- ... -->
</html>

선택적인 메타데이터도 있으며, 이는 객체에 대한 추가 정보를 제공합니다. 예를 들어 og:descriptionog:localeog:video 등이 있습니다1.


음... 이론은 위와 같고.
그럼 예시를 보여줄까?

위 링크에 마우스를 올리면, 대게가 뜨는데 바로 이것을 응용하면 된다.


다른 예시로는 이거다.

근디, 이것이 캐시를 너무 많이 써버려서,
본 게시글로 제한을 두었다.
그래야 로딩 시간도 줄어드니 말이다.



근디, 티스토리 링크 썸네일과 다른디요?
늦은 밤 급하게 짜느라, 이 정도만 구현 했다.
그래도 다른 이는 구글 브로거에 이것도 구현 안 하니...
뭐...

시간 되면 나머지도 구현 해 봐야되는데,,, 지금도 만족스럽다.


댓글

7일동안 많은 클릭!!!

캐드 글자 깨짐 해결하는 방법(세가지)

태그(카테고리) 별 버튼 글자 색깔을 바꿔보자 with chatGPT

DWG TrueView 2024 설치 오류(4000), autoCad를 설치 해 보세요... 그래도 안 되면....

태양광 공작물축조신고 기준, 무게에 따라서 공작물 축조 신고 해야 되여...

블랙박스를 CCTV로 만들자, USB 12v 부스터

무선 미라캐스트 끊김 현상을 극복하기 위해서는