Posicionamiento para Vue 응용 프로그램 - Cap.1: 메타 DATO

9560 단어 vueseospaposicionamientoweb

Primero que nada？Quéson los meta datos y para Quésirven las etiquetas meta？


Las etiquetas meta son parte 불가 또는 부족한delárea de posicionamiento 웹.데마넬라 장군podemos decir que por medio De estas etiquetas es que los mecanismos De b úsqueda De los navegadores posicionar án nuestrositio.
Las principales etiquetas que se requieren son:

제목


Esta etiqueta contiene el título principal de la página actual.el t í tulo que vemos en la etiqueta del navegador와 es lo que vemos en las b ú squedas có mo t í tulo también을 포함합니다.
권장 사항: 70자
Ejempo:<title>Noemi León | Welcome to my portfolio</title>

원 설명


이것은 파지나에 대한 묘사다.manera'humana'el contenido de la página evitando la sobrecarga de keywords를 설명하는 것을 권장합니다.
추천: más de 155자 없음<meta name="description" content="Hello! Welcome to my Professional Website, I'm Noemi Leon and I'm a Software Developer passionate about frontend development, and Vue :)">Las 2 etiquetas anteriores(제목 y 설명)además de ayudar a posicionar Las páginas, también proveen información al-usuario cuando encuentra tusitio en el-buscador:

En la imagen superior puedes observatar un titulo y descripción.Si no agregas las etiquetas,el motor trataráde encontrar y colocar título y descripción pero puede no ser execramente lo que necesitamos,sino simplemente textos que estaban En el cuerpo de nuestra página.

메타 키워드


Esta etiqueta es bastante controvertida.Algunos dicen que ya no es utilizada por los algoritmos de clasificación de resultados de búsqueda de Google,pero lo cierto es que nadie lo sabe a ciencia cierta,asíque no estáde más ponerla.
Cómo dato adicional,el gigante del comercio en línea“Amazon”sigue usando esta etiqueta.

Etiquetas og y 트위터


Estas etiquetas nos permiten mostrar el contenido que indicamos cada vez que se compare un enlace de nuestro sito web en una red social:Open Graph para Facebook y twitter cómo te imaginarás para twitter.Puede parecer de poca importancia pero recuerda que hoy en día las redes sociales son importantes fuentes de visitas y potentials compradors,por lo que mostrar un contenido estético y ordenado Puede ser una ventaja.
Para ser más claros en cuanto a la ventaja de agregar estas etiquetas,observa la siguiente imagen:

Si는 페이스북/트위터와 el Siio al que pertenece el enlace tiene Correctmente las etiquetas, verás algo as í를 비교했다.칸비오에서 나는 어떻게 해야 할지 모르겠다.
Hay diversas formas de mostrar estas tarjetas y herramientas de validación,pero eso lo veremos en la parte 2 deéste post.
Hay diversas Recommendaciones para establecer correctante el contenido de las etiquetas pero esa es una historia larga que te platicaré enotro post. 관련 내용을 수정할 것을 권장합니다.Por ahora el punto 교장 es entender la necesidad de éstas etiquetas y saber c ó mo agregarlas en una aplicación con Vue.

Cuando trabajamos en un sitio web con archivos。html


Por Ejempo si usamos Vue.js cómo librer ía,es decir,cuando importamos como 스크립트:<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>Ponemos las etiquetas meta dentro de la etiqueta de cada uno de nuestros archivos.Por Ejempo, en-mi archivo 인덱스.html tendría algo así:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Noemi León | Welcome to my portfolio</title>
    <meta name="description" content="Hello! Welcome to my Professional Website, I'm Noemi Leon and I'm a Software Developer passionate about frontend development, and Vue :)">
    <meta name="keywords" content="professional Portfolio, professional website, software developer portfolio">
    ...
  </head>
  <body>
    <h1>Hello! </h1>
    <p>My name is Noemi León.</p>
    ...
  </body>
</html>
Y asísería para cada página:contácto,faq,etc,cambiando unicamente el contenido de las etiquetas.마치sencilloesagregarlasetiquetasmetaenéstoscasos,pero...

？Quépasa cuando se trata de una SPA？


Cuando tenemos una SPA,en realidad solo tenemos un index.html,y si ponemos las etiquetas meta solo en ese archivo,no estaríamos haciendo el posicionamiento correcemente,ya que no estaríamos specificando etiquetas para cada página.
환경? Cómo hacemos para agregar las etiquetas correspondentes a cada vista en una SPA?
librer íasque te pueden ayudar, dependiendo del framework con el que est és trabajando에 존재합니다.Enéste post especiamente te contarécómo hacerlo con Vue.js.

Etiquetas meta en una SPA con Vue。회사 명


Para trabajar con Vue.js te recomiendo usar el plugin vue meta,éste es incluso el que utilizan frameworks cómo gridsome y nuxt.Puedes Encontralloaquiy también Puedes consultar ladocumentación.
Pasamos a la acción:
  • Instalamos
    • npm install vue-meta --save
  • Luego,importar.Si es con npm:
    • import VueMeta from 'vue-meta' Vue.use(VueMeta);
  • 실시: 하나의 연속.

    • 원 표기est áticos


    metaInfo: {
  title: 'Noemi León | Welcome to my portfolio',
  meta: [
    { name: 'description', 
      content: 'Hello! Welcome to my Professional Website, I'm 
Noemi Leon and I'm a Software Developer passionate about frontend development, and Vue :)' 
    },
    { name: 'keywords', 
      content: 'software developer portfolio, software developer courses' 
    },
    ..
  ]
}

    원 표기


    물음: 디나미코스 식당에서 밥 먹고 싶으세요?por ejemplo el caso de un blog o una tienda,si queremos mostrar el título o nombre del producto y descripción de forma dinámica podemos usar datos del data o de propiedades computadas.
    Para hacerlo,ponemos metaInfo cómo función y podemos usar los datos cómo this.원 1제목 o.원 1설명, 포함 podemos usar interpolaci ón si lo Requeriemos:
    metaInfo() {
    return {
      title: 'this.meta.title',
      meta: [
        { name: 'description', 
          content: `${postTitle}: Learn SEO techniques for your websites.` },
      ...
      ]
    }
},
data() {
  return {
    meta: {
      title: "SEO for Vue apps.",
      ...
    },
  }
},
computed: {
  postTitle(){
    // Do what you need and return post title.
  }
}
    경고: Aunque se dice que los crawlers de Google son capaces de detectar JavaScript, lamentablemente no estamos 100%seguros de su capacidad, tampoco de la de otros buscadores.Por lo tanto se recomiendan dos té cnicas para asegurarnos de que nuestras pá ginas sean detectadas indexadas correcemente 건의:
  • 서버 쪽 렌더링: Por ejempo con Nuxt.js
  • 사전 렌더링: Enéste post hablaré de esta té cnica

    • con Vue를 미리 렌더링합니다.회사 명


    Cuando nuestro sitio no estápreparado para server side rendering,yéste además relatimente pequeño(el caso de mi portafolio es el perfecto ejempo)se recommineda usar pre renderizado.
    Hay diversos plugins para lograrlo,el que puedo recomendarte en este caso esvue-cli-plugin-prerender-spa
    fácilmente y loúnico que debes hacer es indicar las optciones que se preguntarán durante la instalación,por ejempo:
  • que rutas pre renderizar?las que quieres posicionar
  • solo pre renderizar para builds de producción?이것은 나의 건의이며, 내가 타르다도 칸도(tardado cuando Sepre renderiza)를 건설하는 과정이다.
  • Entre otras..
    Por supuesto,te recomiendo leer la documentación para asegurarte de entenderlo y hacer las configuraciones necesarias.
    • Al ejecutar el build en tu proyecto,por Ejempo npm run build,npm run build production o cómo tengas configurado el comando,podrás observar que en la carpeta/los archivos 지역.html,que indicate como ruta para pre renderizar.Como sabes,el contenido deésta carpeta es lo que subirás a tu servidor una vez queéstes listo para estar en producción y listo!!ahorasi deben poder leer가tus meta datos los motores de b úsqueda를 수정했습니다.

    에티크타스 아카데미


    Recuerda que el hecho de que veamos las etiquetas incluso en el navegador,no garantiza queéstas sean“visibles”para los robots o mecanismos de posicionamiento.Por tal motivo,podemos는herramientas de análisis cómo Moz,o 구글 검색 컨트롤러를 재현했습니다.Una indicación de buen functionamiento,al menos del title y description es como aparece tu sitio en la búsqueda.caso tu sitio ya est á indexado,verifica que el t í tulo y descripción coincidan con lo que pusiste En las etiquetas.
    Quéhay de los og y 트위터 태그?Eso lo veremos más a detalle en la parte 2 de este post.
    Por el momento me Skidedo y espero que te haya servido la información.Recuerda que para cualquier duda puedes contactarme vía twitter o vía mi sitio web:noemileon.dev
    알고리즘 분석 및 실례 해석(一)-분치법
    UVA ~ 699 ~ The Falling Leaves(이차수의 DFS)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage