Cloudinary를 사용하여 기사 제목이 포함된 OGP 이미지를 만드는 방법

Qiita의 OGP가 너무 귀엽고, 자신의 블로그에도 도입하고 싶다! 생각,Cloudinary를 사용하여 기사 제목이 포함 된 OGP를 만들었습니다.

▼ twitter에 기사를 투고하면, 이런 느낌.

Cloudinary란?

이미지 처리에 탁월한 클라우드 서비스.
API를 사용하여 이미지의 변형, 전달 등을 할 수 있습니다.

요금 플랜

기본적으로는 무료로 사용할 수 있습니다만, 상한이 있습니다.
요금 플랜에 관해서는, 아래의 기사가 알기 쉬웠습니다.

참조 기사 : Cloudinary의 새로운 계획을 살펴 보았습니다.

SDK가 제공되는 언어 및 플랫폼

서비스 개발의 언어는 거의 다루고 있습니다.
지원되지 않는 언어로 사용하고 싶은 경우에도 URL에 매개변수를 전달하여 이미지를 변형할 수 있습니다.


참고 : h tps : // c ぉ うぢ ry. 코 m / 도쿠 멘 타치 온

무엇을 할 수 있는가

아래의 기사가 알기 쉬웠습니다.

참조 기사 : Cloudinary를 사용하여 이미지 변환을 시도합니다.

OGP를 만들어 보자.

내 블로그는 nuxt.js로 만들고 있지만 이번에는 component에서는 사용하지 않기 때문에,vue 의 SDK 대신 JavaScript 의 SDK를 사용했습니다.

그 외 언어에서도 공식 문서를 참고하면 OGP를 작성할 수 있다고 생각합니다.

0. OGP 배경 이미지를 cloudinary에 업로드

cloudinary에 등록하고 Media Library에 OGP 배경 이미지를 업로드하십시오.



그러면 아래와 같은 URL이 생성됩니다.

https://res.cloudinary.com/ワークスペース名/image/upload/バージョン/画像名

에 업로드 이후 URL을 변경하여 이미지를 변형할 수도 있습니다.

1. 설치

SDK를 설치합니다.

yarn add cloudinary-core

2. cloudinary 설정

아래 페이지를 참고하여 cloudinary의 공통 설정을 실시합니다.

공식 문서 : h tps : // c ぉ うぢ ry. 코 m / 도쿠 멘 타치 온 / 그럼 sc pt_

plugin/cloudinary.js

import cloudinary from 'cloudinary-core';

export default new cloudinary.Cloudinary({
  cloud_name: 'cheezblog', // Cloudinaryアカウントの名前
  secure: true, // httpsで配信するオプション
});

기타 옵션은 아래 페이지 참고로 설정할 수 있습니다.

공식 문서 : h tps : // c ぉ うぢ ry. 코 m / 도쿠 멘 타치 온 / c ぉ ぢ ry_sdks # 곤푸 쿠라 치온_ 파라 메 rs

3. cloudinary로 지정한 이미지에 텍스트 배치

공식 문서의 「adding_text_captions」를 참고로, 문자를 레이아웃 해 갑니다.

공식 문서 : h tps : // c ぉ うぢ ry. 코 m / 도쿠 멘 타치 온 / 메이 게 _ t 란 s 펑 마치 온 s # 아 앙 g_ XT_ 또는 p 치온 s

plugin/generateArticleOgp.js

import cloudinary from '~/plugins/cloudinary';

export default ogpText => {
  const encodeText = encodeURI(ogpText);

  // 第一引数は画像名、第二引数はオプション
  return cloudinary.url('ogp_ut3n8b.png', {
    // URLのバージョンの部分
    version: '1598892930',
    transformation: [
      {
        // 文字を重ねる設定
        overlay: {
          // フォントの設定(アップロードしたフォントも使えます！)
          font_family: 'notosansjp-bold.otf',
          // フォントのサイズ
          font_size: 40,
          // 文字を中央寄せ
          text_align: 'center',
          // 表示するテキスト
          text: encodeText,
        },
        // 文字の領域
        width: '600',
        // 文字の色
        color: '#333',
        // 画像を領域いっぱいに表示させる設定
        crop: 'fit',
      },
    ],
  });
}

crop:fit 참고: h tps : // c ぉ うぢ ry. 코 m / 도쿠 멘 타치 온 / 메지 _ t ran s fu r 마치 온 s # fu t

위의 설정을 사용하면 제목 텍스트를 전달하여 새 URL을 생성할 수 있습니다.

4. ogp로 설정

방금 만든 generateArticleOgp를 가져오고 생성한 URL을 metaタグ로 설정합니다.
내 블로그는 Nuxt.js로 만들었으므로 아래와 같이 설정했습니다.

import generateArticleOgp from '~/plugins/generateArticleOgp';

computed: {
  ogpImage() {
    const ogpText = this.articleContent.fields.title || 'cheezBlog';
    return generateArticleOgp(ogpText);
  }
},
head() {
  // その他設定は省略
  { hid: 'og:image', property: 'og:image', content: this.ogpImage },
  { property: 'article:publisher', content: 'FacebookURL' },
  { property: 'fb:app_id', content: 'FacebookAppID' },
  { name: 'twitter:card', content: 'summary_large_image' },
  { name: 'twitter:site', content: '@Twitter' },
}