공지사항

북마크 입니당 >

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

 




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

구글 브로거도 가능할까?

가능하다.


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일동안 많은 클릭!!!

전기공사 실적신고 방법 및 유의 할 점(동영상 첨)

3kw 가정용 태양광 차단기 배선 이게 맞나요?(차단기 연결 규칙, 단독운전방지)

햇빛소득마을로 본 태양광 수익성 분석(불확실성, 가격 기준 변경 필요, 발전량 감소, 전력판매수입 2,150만원)

테더링(핫스팟) 제한 무력화 또는 우회(DUN)하는 방법, how it's done

태양광 표준시설부담금 쉽게 계산하는 방법 그리고 산출 근거(설계조정시설부담금 이야기)

스마트폰 충전기, USB 케이블 내부 구조, 수리 하는 방법