Open Graph 미리보기 링크 만들기

| Intro

티스토리에서는 주소만 입력해도 자동으로 썸네일과 설명이 딱 뜨잖아요?

그런데 블로그스팟(Blogger)을 쓰다 보면, 단순한 링크 텍스트만 보이니까 뭔가 허전하고 밋밋합니다.

저도 이게 답답해서 한참 찾아봤는데, 드디어 직접 링크 미리보기 카드를 만드는 방법을 알게 되었어요 😊

이제는 URL만 넣으면 이미지 + 제목 + 설명이 함께 들어간 카드형 링크를 블로그스팟에서도 만들 수 있습니다. 오늘은 그 방법을 차근차근 알려드릴게요!

| Intro (English)

On Tistory, when you paste a link, it automatically shows a thumbnail and description. But on Blogger, it only displays a plain text link, which feels incomplete. I felt the same frustration, so I searched and finally found a way to create link preview cards manually. Now, just by entering a URL, you can display a card with image, title, and description right inside Blogger posts. In this guide, I’ll walk you through the simple steps!

LINK Maker - 블로그스팟 미리보기 생성기

블로그스팟 본문에 사용할 링크 미리보기 HTML 코드를 생성하세요.

LINK Maker - 블로그스팟 미리보기 생성기

블로그스팟 본문에 사용할 링크 미리보기 HTML 코드를 생성하세요.

링크 URL

제목 (자동입력)

설명 (자동입력)

썸네일 URL (자동/수동)

Open Graph 미리보기 링크 만들기

블로그스팟 링크 카드 미리보기 생성기 / Blogger link preview card generator

lognplus.com

📑 목차 | 탭하여 펼쳐보기

🇺🇸 English

| 왜 자동 미리보기가 안 될까?

티스토리나 카카오톡 같은 플랫폼은 OG(Open Graph) 태그를 자동으로 읽어서 미리보기를 만들어 줍니다.

쉽게 말해, 글 주소(URL)에 숨어 있는 <meta property="og:title">, <meta property="og:description">, <meta property="og:image"> 정보를 꺼내 보여주는 거예요.

하지만 블로그스팟(Blogger)은 이런 기능을 기본 제공하지 않습니다.

단순히 텍스트 링크만 붙여 넣기 때문에, 썸네일이나 설명이 뜨지 않아 밋밋하게 보이는 거죠. 즉, 자동 미리보기 엔진이 없는 구조라고 이해하시면 됩니다.

그래서 우리가 직접 HTML+CSS+JS 코드를 이용해, 링크를 입력하면 해당 사이트의 제목·설명·이미지를 읽어와 카드형 박스로 만들어주는 방식을 쓰는 겁니다.

이렇게 하면 티스토리처럼 자동은 아니지만, 거의 동일한 카드 미리보기를 블로그스팟에서도 구현할 수 있습니다 🎯

| Why Blogger doesn’t show previews (English)

Platforms like Tistory or KakaoTalk use Open Graph (OG) tags to generate link previews. For example: <meta property="og:title">, <meta property="og:description">, and <meta property="og:image">. These tags let the system show the title, description, and thumbnail automatically.

However, Blogger does not have a built-in preview engine. When you paste a link, it only shows plain text without images or descriptions. That’s why Blogger links look simple and less attractive by default.

To solve this, we use a small HTML+CSS+JS code snippet that fetches the link’s title, description, and image and displays them as a stylish card. It’s not fully automatic like Tistory, but it looks and works almost the same 🚀

| 테마에 넣을 코드

먼저 블로그 전체에 카드형 링크 스타일을 적용하기 위해 CSS 코드를 추가해야 합니다.

이 코드는 블로그스팟 테마의 <head> ... </head> 안,  주석 바로 위에 넣어주세요.

👉 이렇게 한 번만 넣어두면, 이후 글 본문에서 카드 구조를 불러올 때마다 자동으로 같은 디자인이 적용됩니다.


<!-- 링크 메이커 스타일 코드 -->
<style>
.generated-link-card {
  display:flex;flex-direction:column;width:100%;max-width:600px;margin:15px auto;
  border:1px solid #e0e0e0;border-radius:12px;overflow:hidden;text-decoration:none;color:#333;
  box-shadow:0 4px 8px rgba(0,0,0,.05)
}
.generated-link-card .thumbnail{width:100%;height:auto}
.generated-link-card .thumbnail img{width:100%;height:auto;display:block;object-fit:cover}
.generated-link-card .content{padding:15px}
.generated-link-card .title{
  font-size:16px;font-weight:700;color:#333;margin:0 0 5px;line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical
}
.generated-link-card .description{
  font-size:13px;color:#777;margin:0 0 10px;line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical
}
.generated-link-card .domain{font-size:12px;color:#777;font-weight:500}
@media (min-width:481px){
  .generated-link-card{flex-direction:row;align-items:center}
  .generated-link-card .thumbnail{width:150px;height:150px;flex-shrink:0}
  .generated-link-card .thumbnail img{width:100%;height:100%;object-fit:cover}
  .generated-link-card .content{padding:15px;flex-grow:1}
}
</style>

| Code for Theme (English)

To apply the card link design site-wide, paste this CSS snippet into your Blogger theme. Go to Theme → Edit HTML and insert it inside <head> ... </head>, just above the  comment. Once added, all future posts that use the card structure will automatically adopt this style.

| 본문에 넣는 코드

테마에 CSS를 넣었다면, 이제 글 본문에 카드 구조 HTML을 삽입할 차례입니다.

아래 코드를 새글-연필그림- 'Html 보기'에 원하는 위치에 그대로 붙여넣으면 됩니다.

.html

#outputContainer {
    margin-top: 20px;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 8px;
    display: none;
    overflow-x: auto;
  }
  #outputCode {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 13px;
    color: var(--text-color);
  }
  #previewContainer {
    display: none;
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
  }
  
  /* --- Final Output Card Styling --- */
  .preview-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }
  .preview-thumbnail {
    width: 100%;
    height: auto;
  }
  .preview-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  .preview-content {
    padding: 15px;
  }
  .preview-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    margin: 0 0 5px 0;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .preview-description {
    font-size: 13px;
    color: var(--sub-text-color);
    margin: 0 0 10px 0;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .preview-domain {
    font-size: 12px;
    color: var(--sub-text-color);
    font-weight: 500;
  }

@media (min-width: 481px) {
    .preview-card {
      flex-direction: row;
      align-items: center;
    }
    .preview-thumbnail {
      width: 150px;
      height: 150px;
      flex-shrink: 0;
    }
    .preview-thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .preview-content {
      padding: 15px;
      flex-grow: 1;
    }
  }
</style>

<div class="preview-generator-container">
  <h3>LINK Maker - 블로그스팟 미리보기 생성기</h3>
  <p>블로그스팟 본문에 사용할 링크 미리보기 HTML 코드를 생성하세요.</p>
  <div class="input-group">
    <label>링크 URL</label>
    <input id="urlInput" placeholder="https://www.example.com" type="text" />
  </div>
  <div class="input-group">
    <label>제목 (자동입력)</label>
    <input id="titleInput" placeholder="링크 제목이 자동으로 입력됩니다." type="text" />
  </div>
  <div class="input-group">
    <label>설명 (자동입력)</label>
    <input id="descriptionInput" placeholder="링크 설명이 자동으로 입력됩니다." type="text" />
  </div>
  <div class="input-group">
    <label>썸네일 URL (자동/수동)</label>
    <input id="imageInput" placeholder="썸네일 URL이 자동으로 입력되지만, 직접 입력할 수도 있습니다." type="text" />
  </div>
  <div class="button-group">
    <button id="generateButton">코드 생성</button>
    <button id="copyButton">HTML 코드 복사</button>
    <button id="resetButton">초기화</button>
  </div>
  
  <div id="previewContainer">
    <a class="preview-card" href="#" id="finalPreview">
      <div class="preview-thumbnail">
        <img id="previewImage" src="" />
      </div>
      <div class="preview-content">
        <p class="preview-title" id="previewTitle"></p>
        <p class="preview-description" id="previewDescription"></p>
        <span class="preview-domain" id="previewDomain"></span>
      </div>
    </a>
  </div>

let fetchedData = {
    title: '',
    description: '',
    image: ''
  };

urlInput.addEventListener('input', async () => {
    const url = urlInput.value.trim();
    if (url === '' || !url.startsWith('http')) {
      titleInput.value = '';
      descriptionInput.value = '';
      imageInput.value = '';
      return;
    }
    try {
      const response = await fetch(proxyUrl + encodeURIComponent(url));
      const text = await response.text();
      const parser = new DOMParser();
      const doc = parser.parseFromString(text, 'text/html');

const getMeta = (name, property) => doc.querySelector(\`meta[name="\${name}"]\`)?.content || doc.querySelector(\`meta[property="\${property}"]\`)?.content || '';

fetchedData.title = doc.querySelector('title')?.innerText || getMeta('og:title', 'og:title') || '제목을 가져올 수 없습니다.';
      fetchedData.description = getMeta('description', 'og:description') || '설명을 가져올 수 없습니다.';
      fetchedData.image = getMeta('og:image', 'og:image') || '';

titleInput.value = fetchedData.title;
      descriptionInput.value = fetchedData.description;
      imageInput.value = fetchedData.image;

// 미리보기 업데이트
      previewTitle.textContent = fetchedData.title;
      previewDescription.textContent = fetchedData.description;
      previewImage.src = fetchedData.image;
      
      previewContainer.style.display = 'block';

} catch (error) {
      console.error('Error fetching URL:', error);
      titleInput.value = '정보를 가져오지 못했습니다.';
      descriptionInput.value = '';
      imageInput.value = '';
      previewContainer.style.display = 'none';
    }
  });

// 사용자가 썸네일 주소를 직접 입력할 경우 미리보기를 즉시 업데이트
  imageInput.addEventListener('input', () => {
      previewImage.src = imageInput.value.trim() || fetchedData.image;
  });

generateButton.addEventListener('click', () => {
    const url = urlInput.value.trim();
    const title = titleInput.value.trim();
    const description = descriptionInput.value.trim();
    
    // 사용자가 입력한 썸네일 주소가 있으면 사용, 없으면 자동으로 가져온 값 사용
    const image = imageInput.value.trim() || fetchedData.image;
    
    const domain = new URL(url).hostname.replace('www.', '');

const generatedCode = \`
<a href="\${url}" target="_blank" class="generated-link-card">
  <img src="\${image}" alt="\${title}" class="thumbnail">
  <div class="content">
    <p class="title">\${title}</p>
    <p class="description">\${description}</p>
    <span class="domain">\${domain}</span>
  </div>
</a>
\`;

outputCode.textContent = generatedCode.trim();
    outputContainer.style.display = 'block';
    copyButton.style.display = 'inline-block';
    resetButton.style.display = 'inline-block';
    
    // 최종 미리보기 업데이트
    finalPreview.href = url;
    previewImage.src = image;
    previewTitle.textContent = title;
    previewDescription.textContent = description;
    previewDomain.textContent = domain;
    previewContainer.style.display = 'block';
  });

copyButton.addEventListener('click', () => {
    navigator.clipboard.writeText(outputCode.textContent).then(() => {
      copyButton.textContent = '복사 완료!';
      setTimeout(() => {
        copyButton.textContent = 'HTML 코드 복사';
      }, 2000);
    });
  });

resetButton.addEventListener('click', () => {
    urlInput.value = '';
    titleInput.value = '';
    descriptionInput.value = '';
    imageInput.value = '';
    outputContainer.style.display = 'none';
    copyButton.style.display = 'none';
    resetButton.style.display = 'none';
    previewContainer.style.display = 'none';
    
    // 상태 초기화
    fetchedData = {
        title: '',
        description: '',
        image: ''
    };
  });
</script>

| Code for Post Body (English)

Once the CSS is in your theme, you can insert this HTML block into any post. Just replace the href, image URL, title, description, and domain with your own values. This will render a neat card-style link inside your post.

| 단계별 사용 방법

블로거 관리자 접속
블로거 대시보드 → 테마 → HTML 편집 버튼을 클릭합니다.
(좌측 메뉴에서 테마 선택 후, 오른쪽 ▼ 버튼에서 HTML 편집을 고르면 됩니다.)
CSS 코드 추가
열린 코드 화면에서  부분을 찾습니다.
그 위쪽에 링크 미리보기 카드 CSS 코드를 붙여넣으세요.
→ 블로그 전체에 카드 디자인을 적용하기 위한 단계입니다.
본문에 카드 구조 넣기
글쓰기 화면에서 HTML 모드로 전환합니다.
원하는 위치에 본문용 HTML 코드를 붙여넣으세요.
→ 링크 주소, 썸네일, 제목, 설명을 원하는 내용으로 교체합니다.
저장 & 확인
글을 저장하고 미리보기를 눌러 보세요.
→ 단순 텍스트 링크 대신 이미지+제목+설명이 들어간 카드형 박스가 표시됩니다.
활용 팁
카드형 링크는 뉴스 기사, 정부 정책 자료, 외부 사이트 안내 글에 활용하면 가독성과 신뢰도가 크게 올라갑니다.
모바일 환경에서도 깔끔하게 표시되며, SEO에도 긍정적인 효과가 있습니다.

| Step-by-step Guide (English)

Open Blogger Dashboard → Go to Theme → Edit HTML.
Find  and paste the CSS code above it.
Switch to HTML mode in your post editor, then paste the post body HTML structure where you want the card.
Replace the link, image, title, description, and domain with your own values.
Save and preview your post → You’ll now see a card-style link instead of a plain text link.

| 활용 팁 & FAQ

뉴스·정책 자료 인용할 때
단순한 파란색 텍스트 링크 대신 카드형 링크로 바꾸면 전문성과 가독성이 크게 올라갑니다.
SEO 효과
썸네일 이미지와 설명 문구가 함께 들어가 검색 엔진이 더 많은 정보를 인식하게 되므로, 클릭률(CTR) 개선에도 도움 됩니다.
모바일 최적화
CSS가 반응형으로 구성되어 있어, 스마트폰 화면에서도 보기 좋게 자동 정렬됩니다.

❓ Q1. 왜 자동으로 티스토리처럼 미리보기가 안 뜨나요?

블로그스팟은 Open Graph(OG) 태그를 읽어주는 엔진이 없기 때문입니다. 그래서 단순 링크만 붙여넣으면 텍스트로만 보여집니다.

❓ Q2. 이미지가 꼭 있어야 하나요?

기본 이미지 URL을 넣지 않으면 플레이스홀더 이미지가 표시됩니다. 하지만 가능하다면 1200×800px 크기의 실제 썸네일을 넣는 것이 가장 깔끔합니다.

❓ Q3. 여러 개의 링크 카드를 한 글에 넣을 수 있나요?

네, 가능합니다. 본문 HTML에 카드 구조를 원하는 만큼 복사해 붙여넣으면 됩니다. CSS는 테마에 한 번만 넣으면 여러 개 카드가 동일한 스타일로 적용됩니다.

| Tips & FAQ (English)

Use for citations: News, policies, or external resources look more professional with card previews.
SEO boost: Having a thumbnail + description increases CTR in search results.
Mobile-friendly: The responsive CSS ensures neat layout even on small screens.

Q1. Why doesn’t Blogger show previews automatically?
Because Blogger doesn’t have a built-in Open Graph reader engine. It only shows plain links.

Q2. Is an image required?
If no image URL is provided, a placeholder image will appear. For best results, use a 1200×800px thumbnail.

Q3. Can I add multiple cards in one post?
Yes. Just copy-paste the card HTML block multiple times. The CSS applies globally.

| 마무리

이제 블로그스팟에서도 티스토리처럼 세련된 링크 미리보기 카드를 만들 수 있게 되었어요 ✨
단순한 텍스트 링크가 아닌, 이미지 + 제목 + 설명이 함께 들어간 카드형 링크는 방문자들의 눈길을 끌고 체류시간까지 늘려줍니다.

오늘 소개해드린 방법은 테마에 CSS 한 번 추가하고, 글 본문에서 HTML 코드만 간단히 붙여넣기 하면 끝납니다. 앞으로 작성하시는 글이 훨씬 더 깔끔하고 신뢰감 있게 보일 거예요.

혹시 이 글이 도움이 되셨다면 공유와 즐겨찾기 부탁드립니다 🙏

여러분의 응원이 더 좋은 팁을 준비하는 큰 힘이 됩니다.

🐝 오늘도 부지런히 돈 정보 모으는 중이에요!

Money-hunting Busy Bee, always buzzing for smart money tips! 📊🍯

※ 본 글은 일반 정보 제공을 위한 콘텐츠이며,
법률 및 세무 관련 사항은 반드시 전문가의 상담을 권장드립니다.
This post is for general informational purposes only.
Please consult with a qualified professional for legal and tax matters.

궁금한 내용을 검색해보세요

MoneyLog｜부동산·경제 인사이트

부동산 전자계약, 어렵지 않아요! 중개사가 알려주는 A to Z