Nuxt Content ile Sosyal Paylaşım Görselleri

Nuxt Content ile blog yazılarınız için sosyal paylaşım kartları

Giriş

Blog içeriğini veya makalelerinizi sosyal medyada paylaşırken öne çıkmak önemlidir. Sosyal medya gönderilerinizde, blog önizlemesi yeterince dikkat çekici değilse, kullanıcılar üzerinde çalıştığınız bir makaleye bakmayabilirler.

Bu yazıda size Nuxt Content ile blog yazılarınız için paylaşım kartlarını nasıl oluşturacağınızı gösterceğim. Bu nedenle, Jason Lengstorf'un Cloundinary API'sine ait blog yazısında görsellerin nasıl oluşturulacağını ayrıntılarıyla anlattığı içeriği kullanacak, ancak bunu Nuxt Content ile gerçekleştirmeye daha fazla odaklanacağım.

Devam etmeden önce bu yazıyı okumanızı tavsiye ederim. Çünkü Cloundinary'den kendi şablonunuzu ayarlamanız ve şablonunuz için kullanmak istediğiniz özel yazı tiplerini yüklemeniz gerekmektedir.

Kurulum

Bu yazıda, sıfırdan bir Nuxt Content blogu kurma konusunda çok fazla ayrıntıya girmeyeceğim, ancak paketin şu şekilde @nuxt/content kurulu olduğundan ve nuxt.config.js üzerinde modülün eklendiğinden emin olun.

modules: [
  '@nuxt/content',
],

Dinamik sosyal medya kartları oluşturmaya başlamak için ayrıca Jason Lengstorf'un paketini de kurmamız gerekecek @jlengstorf/get-share-image.

# install using npm 
npm install --save @jlengstorf/get-share-image
 
# install using yarn 
yarn add @jlengstorf/get-share-image

Her şeyi yükledikten ve şablonunuzu Cloudinary üzerinde ayarladıktan sonra görsellerinizi oluşturmaya başlamanın zamanı geldi.

Blog Yazısı ve Resim Oluşturma

Dinamik sayfa bileşeni içerisinde (blog sayfalarımız/blog/_slug.vue içerisindedir), Head metoduna gitmemiz gerekecektir. Open Graph ve Twitter meta verilerini ayarlamak için ise asyncData ile Nuxt hook kullanacağız.

(blog sayfalarımız/blog/_slug.vue) kısmını Nuxt Content yazımda bulabilirsiniz. Öncelikle bu yazımı da okumanızı tavsiye ederim

'@jlengstorf/get-share-image' adresinden getShareImageı içe aktaracağız ve ardından istediğimiz sayfamız için blog yazısını getirdikten sonra asyncData içinden bu fonksiyonu çağıracağız.

<script>
import getShareImage from '@jlengstorf/get-share-image';

export default {
  async asyncData({ $content, params }) {
    const article = await $content('blogs', params.slug).fetch()

    const socialImage = getShareImage({
        title: article.title,
        tagline:  article.subtitle,
        cloudName: 'YOUR_CLOUDINARY_NAME',
        imagePublicID: 'YOUR_TEMPLATE_NAME.png',
        titleFont: 'unienueueitalic.otf',
        titleExtraConfig: '_line_spacing_-10',
        taglineFont: 'unienueueitalic.otf',
        titleFontSize: '72',
        taglineFontSize: '48',
        titleColor: 'fff',
        taglineColor: '6CE3D4',
        textLeftOffset: '100',
        titleBottomOffset: '350',
        taglineTopOffset: '380'
      });

    return { article, socialImage }
  }
}
</script>

getShareImage fonksiyonu, belirtilen metni, dönüşümleri, renkleri ve yazı tiplerini kullanarak Cloudinary aracılığıyla URL oluşturacaktır. Örneğin, bu gönderinin URL'si:

https://res.cloudinary.com/dv2lerhnv/image/upload/w_1280,h_669,c_fill,q_auto,f_auto/w_760,c_fit,co_rgb:fff,g_south_west,x_100,y_350,l_text:unineueitalic.otf_72_line_spacing_-10:Nuxt%20Content%20ile%20Sosyal%20Payla%C5%9F%C4%B1m%20G%C3%B6rselleri/w_760,c_fit,co_rgb:6CE3D4,g_north_west,x_100,y_380,l_text:unineueitalic.otf_48:Nuxt%20Content%20bloglar%C4%B1n%C4%B1z%20i%C3%A7in%20sosyal%20payla%C5%9F%C4%B1m%20kartlar%C4%B1/template.png

Kendi şablonumu oluşturduğum ve kendi yazı tipimi eklediğim için, örneğin 'textLeftOffset'i veya başka herhangi bir uzaklığı ayarladım. Sizin oluşturacağnız ayarlar farklı olabilir. Ayarlayabileceğiniz özelliklerin tam listesi paketin Github sayfasında mevcuttur.

Sizde isterseniz, Jason Lengstorf'un Figma şablonunu inceleyebilir ve beğeninize göre özelleştirebilirsiniz.

Meta Etiketleri Ayarlama

Tamam, şimdi imajımızı dinamik Nuxt Content yazısı aracılığıyla oluşturalım.

Peki sosyal medya kullanıcılarının görselimizi ve meta verilerimizi görebilmesi için bu değişkenleri blog sayfalarımızın 'Head' kısmına nasıl entegre edeceğiz?

Bunu yapmak için, Open Graph ve Twitter meta etiketlerini ayarlamamıza izin veren Nuxt.js'in yerleşik head yöntemini kullanacağız. Ayrıca, blog yazımızın yayınlanma zamanı ve son düzenlenme zamanı gibi bazı faydalı bilgileri de ekleyeceğiz. Bunları, Nuxt Content'in otomatik olarak entegre ettiği createdAt ve updatedAt özellikleri ile alacağız.

<script>
import getShareImage from '@jlengstorf/get-share-image';
import getSiteMeta from "~/utils/getSiteMeta.js";

export default {
  async asyncData({ $content, params }) {
    const article = await $content('blogs', params.slug).fetch()

    const socialImage = getShareImage({
        title: article.title,
        tagline:  article.subtitle,
        cloudName: 'YOUR_CLOUDINARY_NAME',
        imagePublicID: 'YOUR_TEMPLATE_NAME.png',
        titleFont: 'unienueueitalic.otf',
        titleExtraConfig: '_line_spacing_-10',
        taglineFont: 'unienueueitalic.otf',
        titleFontSize: '72',
        taglineFontSize: '48',
        titleColor: 'fff',
        taglineColor: '6CE3D4',
        textLeftOffset: '100',
        titleBottomOffset: '350',
        taglineTopOffset: '380'
      });

    return { article, socialImage }
  },
  computed: {
    meta() {
      const metaData = {
        type: "article",
        title: this.article.title,
        description: this.article.description,
        url: `https://gurkansozumcetin.com/blog/${this.$route.params.slug}`,
        mainImage: this.socialImage,
      };
      return getSiteMeta(metaData);
    }
  },
  head() {
    return {
      title: this.article.title,
      meta: [
        ...this.meta,
        {
          property: "article:published_time",
          content: this.article.createdAt,
        },
        {
          property: "article:modified_time",
          content: this.article.updatedAt,
        },
        {
          property: "article:tag",
          content: this.article.tags ? this.article.tags.toString() : "",
        },
        { name: "twitter:label1", content: "Written by" },
        { name: "twitter:data1", content: "Gürkan Sözümçetin" },
        { name: "twitter:label2", content: "Filed under" },
        {
          name: "twitter:data2",
          content: this.article.tags ? this.article.tags.toString() : "",
        },
      ],
      link: [
        {
          hid: "canonical",
          rel: "canonical",
          href: `https://gurkansozumcetin.com/blog/${this.$route.params.slug}`,
        },
      ],
    };
  }
}
</script>

Yukarıda fark etmiş olabilirsiniz ki "~/utils/getSiteMeta.js" dosyasından getSiteMeta'yı içe aktarıyorum. Bu, varsayılan meta etiketlerini değiştirmek için kullandığımız yardımcı bir fonksiyondur. Eğer belirli bir şekilde sağlanmışlarsa, bu dosyada ayarladığım varsayılan meta data değerlerini geçersiz kılmak için hesaplanmış bir özellik kullanacağız. Bu, Nuxt Content Markdown dosyamızdaki değişkenlerin, sayfanın başında eklendiğine emin olmamızı sağlar. Dosya şu şekildedir:

const type = "website";
const url = "https://gurkansozumcetin.com";
const title = "Gürkan Sözümçetin";
const description = "Gürkan Sözümçetin is a Senior Software Developer from Bursa, Türkiye. This blog will focus on everything and more!";
const mainImage = "https://gurkansozumcetincom.s3.amazonaws.com/site-meta-image.png";
const twitterSite = "@gurkan_dll";
const twitterCard = "summary_large_image"
export default (meta) => {
  return [
    {
      hid: "description",
      name: "description",
      content: (meta && meta.description) || description,
    },
    {
      hid: "og:type",
      property: "og:type",
      content: (meta && meta.type) || type,
    },
    {
      hid: "og:url",
      property: "og:url",
      content: (meta && meta.url) || url,
    },
    {
      hid: "og:title",
      property: "og:title",
      content: (meta && meta.title) || title,
    },
    {
      hid: "og:description",
      property: "og:description",
      content: (meta && meta.description) || description,
    },
    {
      hid: "og:image",
      property: "og:image",
      content: (meta && meta.mainImage) || mainImage,
    },
    {
      hid: "twitter:url",
      name: "twitter:url",
      content: (meta && meta.url) || url,
    },
    {
      hid: "twitter:title",
      name: "twitter:title",
      content: (meta && meta.title) || title,
    },
    {
      hid: "twitter:description",
      name: "twitter:description",
      content: (meta && meta.description) || description,
    },
    {
      hid: "twitter:image",
      name: "twitter:image",
      content: (meta && meta.mainImage) || mainImage,
    },
    { 
      hid: "twitter:site",
      name: "twitter:site", 
      content: (meta && meta.twitterSite) || twitterSite,
    },
    { 
      hid: "twitter:card",
      name: "twitter:card", 
      content: (meta && meta.twitterCard) || twitterCard,
    }
  ];
};

Açıkça geçersiz kılmayı sağlamadığımız sürece, bu dosyanın başında tanımladığım değerleri kullanılacaktır. Meta tags ayarlamayı unuttuğunuz durumlardan kaçınmak istiyorsak bu uygulanabilir bir durum.

İşlenen meta özelliği daha sonra bir spread operatörü ...this.meta aracılığıyla head yöntemiyle birleştiriliyor. Bu, tüm varsayılan değerlerin geçersiz kılınmasını ve blog başlığının, açıklamanın ve resimlerin sayfanın başlığına düzgün şekilde yerleştirilmesini sağlayacaktır.

Facebook ve Twitter Araçlarıyla Test Etme

Her şey yolunda giderse, artık bu meta etiketlerini DOM'da görmelisiniz.😎

Sitenizin bir sonraki paylaşımında, artık Twitter, Facebook, Linkedin veya başka herhangi bir yerde paylaşırken bir paylaşım resmi görmelisiniz. Twitter'ın Card Debugger'ı ve Facebook'un Open Graph Debugger'ı gibi araçları kullanmak, bunları beğeninize göre ayarlamak ve olası eksik etiketlerde hata ayıklamak için çok önemli olacaktır.

Son Cümleler

Bu yaklaşımın güzel yanı, gelecekte bir noktada bloglarınız için şablonunuzu güncellemeye veya değiştirmeye karar verirseniz, bunların hepsinin önizleme görselini güncelleyecek olmasıdır. Ayrıca, Figma'daki her bir blog veya seçtiğiniz bir tasarım aracı için benzersiz önizleme görselleri oluşturma zahmetinden ve zamandan tasarruf etmenizi sağlar. Sadece ayarla ve unut!

Buraya kadar tüm işlemleri, tüm adımları eksiksiz uyguladıysanız, Tebrikler. Güzel paylaşım kartlarına sahip harika Nuxt Content blogları görmeyi çok isterim. Okuduğunuz için teşekkürler. 👍

Pile enerji vermeyi unutmayın !!! ⚡⚡⚡

Son Güncelleme

9 Mayıs 2024
0