Nuxt 앱을 위한 간단한 SEO 설정

누군가가 우리 사이트를 구글링하려고 할 때까지 그것은 모두 재미 있고 게임입니다. 우리가 SEO를 관리하는 것을 잊었기 때문에 그들은 어디에서도 그것을 찾을 수 없습니다!

우리 사이트가 아무리 멋지고 우리가 추가한 모든 기능이 있어도 검색 엔진에서 찾을 수 없다면 소용이 없습니다. 소셜 카드를 다루지 않으면 소셜 네트워크에서 공유할 때 멋져 보이지 않을 것입니다... 그러니 소셜 미디어에서 우리 사이트를 보기 좋게 만드는 방법에 대해 바로 알아봅시다.

우리에게 행운! 코드의 조상은 몇 가지 규칙을 따르고 개발자가 이 기능을 매우 쉽고 빠르게 처리할 수 있는 프레임워크(Nuxt)를 만들었습니다. 일반적인 기본 nuxt 앱으로 시작한다고 가정해 보겠습니다. 제 경우에는 과거 기사Vue Astro를 위해 구축한 앱을 예로 사용하겠습니다.

Nuxt를 사용하여 프로젝트를 시작한 경우 다음을 찾을 수 있는 파일nuxt.config.js이 있어야 합니다.

 head: {
    title: 'vue-astro',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
],

그래서 여기에 메타 태그를 추가하여 엔진이 우리 사이트에 대해 더 많이 알 수 있도록 합니다. 예를 들어 Facebook의 경우 Open Graph protocol을 사용하여 해당 태그로 엔진에 알립니다.

그들을 추가합시다!

문서에서 명시한 대로: '오픈 그래프 프로토콜을 사용하면 모든 웹 페이지가 소셜 그래프에서 풍부한 개체가 될 수 있습니다.'

이것은 우리가 객체와 그 속성을 다룰 것임을 의미합니다.

og:유형

이 태그는 객체의 유형을 설명합니다. 여기서는 웹사이트입니다.

{ hid: 'og-type', property: 'og:type', content: 'website' },

og:제목

이것은 개체의 제목이 됩니다.

{ hid: 'og-title', property: 'og:title', content: 'Vue Astro' },

og:설명

개체에 설명을 추가할 수 있습니다.

  {
    hid: 'og-desc',
    property: 'og:description',
    content: 'Get your horoscope for today!'
  },

og:이미지

클릭을 유도하려면 이미지가 큰 도움이 됩니다.

  {
    hid: 'og-image',
    property: 'og:image',
    content: 'LINK TO YOUR IMAGE DIRECTORY'
  },

og:이미지:대체

이미지에 대체 텍스트를 넣는 것을 잊는 사람이 되고 싶지는 않을 것입니다 :)

  {
    hid: 'og-image-alt',
    property: 'og:image:alt',
    content: 'An image of the great pyramids with a cosmic flashing background'
  },

og:url

방문자가 소셜 카드를 클릭하도록 유도하는 위치.

  {
    hid: 'og-url',
    property: 'og:url',
    content: 'https://vue-astro.netlify.app/'
  },

이제 다음과 같은 파일이 있어야 합니다.

export default {
  ssr: false,
  head: {
    title: 'vue-astro',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Get your horoscope for today!' },
      { name: 'format-detection', content: 'telephone=no' },
      { hid: 'og-type', property: 'og:type', content: 'website' },
      { hid: 'og-title', property: 'og:title', content: 'Vue Astro' },
      { hid: 'og-desc', property: 'og:description', content: 'Get your horoscope for today!' },
      { hid: 'og-image', property: 'og:image', content: 'https://media4.giphy.com/media/' },
  {
    hid: 'og-image',
    property: 'og:image:alt',
    content: 'An image of the great pyramids with a cosmic flashing background'
  },
      { hid: 'og-url', property: 'og:url', content: 'https://vue-astro.netlify.app/' },
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
}...

대박! 이제 소셜 카드here를 확인할 수 있습니다.

이렇게 하면 공유할 때 소셜 카드가 어떻게 보이는지 알 수 있습니다.



이제 Open Graph는 모든 소셜 네트워크를 다루지 않으므로 Twitter 카드도 구현할 수 있습니다. 그것도 매우 쉽습니다.

우리는 twitter:card를 사용합니다

  {
    hid: 'twitter:card',
    content: 'Vue Astro. Get your horoscope for today!'
  },

또는 트위터:사이트

  { 
    hid: 'twitter:site', 
    content: 'YOUR TWITTER HANDLE HERE' 
  },

Twitter 카드에 atl 텍스트를 추가할 수도 있습니다.

  {
    hid: 'twitter:image:alt',
    content: 'An image of the great pyramids with a cosmic flashing background'
  }

트위터에서 트위터에 대한 모든 것을 배울 수 있습니다!

그들은 또한 귀하의 트위터 카드가 어떻게 보이는지 확인할 수 있는 리소스를 가지고 있습니다.

또는 metatags.io에서 올인원 접근 방식을 사용할 수 있습니다.

엄청난! 이제 우리는 트위터, 페이스북, 왓츠앱에서 좋아 보입니다... 이것은 소셜 미디어에서 우리 사이트를 위한 훌륭한 시작이며 그다지 어렵지 않았습니다.

이제 작업한 아름다운 콘텐츠를 공유할 시간입니다!

How to Setup Nuxt SEO by Özkan Yanikbas

How to Setup your Social Card by Josh Deltener

Open Graph Meta Tags by Michal Pecanek

자세한 내용은 Vue Astro Repo을 확인하십시오.