<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Noemi Leon</title>
    <description>The latest articles on DEV Community by Noemi Leon (@noeleo25).</description>
    <link>https://dev.to/noeleo25</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F151415%2F79e1ff2e-a164-497f-a59e-311642553417.jpg</url>
      <title>DEV Community: Noemi Leon</title>
      <link>https://dev.to/noeleo25</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/noeleo25"/>
    <language>en</language>
    <item>
      <title>Posicionamiento para Vue Apps - Cap. 2: Meta datos para redes sociales</title>
      <dc:creator>Noemi Leon</dc:creator>
      <pubDate>Wed, 13 Jan 2021 02:28:28 +0000</pubDate>
      <link>https://dev.to/noeleo25/posicionamiento-para-vue-apps-cap-2-meta-datos-para-redes-sociales-33b4</link>
      <guid>https://dev.to/noeleo25/posicionamiento-para-vue-apps-cap-2-meta-datos-para-redes-sociales-33b4</guid>
      <description>&lt;p&gt;En la &lt;a href="https://dev.to/noeleo25/posicionamiento-para-vue-apps-cap-1-meta-datos-3o11"&gt;Parte 1&lt;/a&gt; de esta serie vimos conceptos generales de posicionamiento, su importancia y cómo agregar etiquetas meta a nuestra app. También, mencioné las etiquetas open graph y twitter que en esta segunda parte veremos mas a detalle.&lt;br&gt;
Si te perdiste la parte 1 te recomiendo la consultes antes de ésta. En cualquier caso te dejo una breve introducción:&lt;/p&gt;

&lt;p&gt;Las etiquetas og y twitter nos permiten mostrar el contenido que indicamos cada vez que se comparte un enlace de nuestro sitio web en una red social:  open graph para Facebook y twitter cómo te imaginarás, para Twitter. &lt;br&gt;
Si no especificamos el contenido que queremos se comparta por medio de estas etiquetas, se tomaran las etiquetas disponibles, cómo por ejemplo el titulo de la pagina (title) y la descripción, pero hay ciertos contenidos que seguramente necesitarás hacer más específicos mediante etiquetas . Por ejemplo, si tienes una tienda de disfraces para mascotas sería bastante útil que el usuario pueda compartir un producto en especifico.. esto solamente es posible si agregamos correctamente las etiquetas.&lt;/p&gt;

&lt;p&gt;Puede parecer de poca importancia pero recuerda que hoy en día las redes sociales son importantes fuentes de visitas y potenciales compradores, por lo que mostrar un contenido completo, estético y ordenado puede ser una gran ventaja. Está comprobado que hacer correctamente el etiquetado en nuestro sitio web puede incrementar la conversión y el porcentaje de visitas considerablemente.&lt;br&gt;
Dicho esto vamos a ver una breve introducción para conocer detalles de las etiquetas twitter y open graph:&lt;/p&gt;
&lt;h3&gt;
  
  
  Twitter
&lt;/h3&gt;

&lt;p&gt;Por medio de las etiquetas meta de twitter podemos lograr mostrar contenido específico cuando se comparte algo de nuestro sitio web en twitter, este contenido se conoce en twitter cómo “Card” o tarjeta y se ven masomenos así&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Hjp6z6SO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/8d4wbc9wh4cy69k9dcx5.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Hjp6z6SO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/8d4wbc9wh4cy69k9dcx5.PNG" alt="Twitter card" width="520" height="418"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Y el contenido es personalizable, por lo que podemos agregar también contenido multimedia como en el ejemplo inferior, donde tenemos un video de YouTube&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Pud0dn_q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/lwaeuevtm6pn6xraq1ro.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Pud0dn_q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/lwaeuevtm6pn6xraq1ro.PNG" alt="Twitter card multimedia" width="654" height="390"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Las etiquetas dependen del tipo de tarjeta que quieras mostrar: summary card (tarjeta de resumen), summary with large image card (resumen con imagen grande), player card (reproductor) o app card (aplicación).&lt;br&gt;
La más común es la summary card, por lo tanto esta veremos en el ejemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;meta name="twitter:card" content="summary" /&amp;gt;
&amp;lt;meta name="twitter:site" content="@mascotaShop" /&amp;gt;
&amp;lt;meta name="twitter:title" content="Disfraz de Batman para perro" /&amp;gt;
&amp;lt;meta name="twitter:description" content="Talla mediana, ajustable. Color negro" /&amp;gt;
&amp;lt;meta name="twitter:image" content="https://mascotashop.com/dogs/item-51.jpg" /&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/"&gt;Aquí&lt;/a&gt; puedes encontrar la documentación oficial de estas etiquetas y de los diferentes tipos de tarjetas que puedes definir dependiendo del contenido.&lt;/p&gt;

&lt;h3&gt;
  
  
  Open Graph
&lt;/h3&gt;

&lt;p&gt;Las etiquetas open graph son bastante similares a las de twitter con algunas excepciones. Aqui tenemos los metadatos requeridos: cómo titulo, tipo, imagen y url&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;meta property="og:title" content="Disfraz de Batman para perro" /&amp;gt;
&amp;lt;meta property="og:type" content="article" /&amp;gt;
&amp;lt;meta property="og:url" content="https://mascotashop.com/dogs/disfraz-batman" /&amp;gt;
&amp;lt;meta property="og:image" content="https://mascotashop.com/dogs/item-51.jpg" /&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;El tipo de objeto puede ser va desde musica, video, articulo, libro, perfil, entre otros junto con ciertas variantes para algunos. Por ejemplo video puede ser video.movie o video.episode o vide.tv_show.&lt;br&gt;
Para saber más acerca de los tipos ve a: &lt;a href="https://ogp.me/#types"&gt;ogp.me&lt;/a&gt;. Aqui también puedes encontrar más detalles de open graph.&lt;br&gt;
El resultado de los metadatos requeridos sería algo como esto:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Gd-eS-Cs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/pdg2g8m7lhggp5fuvn21.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Gd-eS-Cs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/pdg2g8m7lhggp5fuvn21.PNG" alt="Facebook Card" width="563" height="406"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Los metadatos opcionales de opengraph son: description, determiner, locale, site_name, entre otros.&lt;/p&gt;
&lt;h2&gt;
  
  
  La parte técnica: implementación con Vue meta
&lt;/h2&gt;

&lt;p&gt;En la parte uno de este post, vimos las implicaciones de implementar etiquetas de posicionamiento y metadatos en SPA. Si no lo has visto te recomiendo lo consultes, ahí explico detalles que es indispensable que conozcas e introduzco también la herramienta que recomiendo para agregar meta datos en estas aplicaciones, ya que no lo haremos cómo se hace en en multi page applications.&lt;/p&gt;

&lt;p&gt;Partiendo entonces de lo que ya vimos anteriormente.. ¿Cómo implementar estas etiquetas twitter y open graph con vue meta?&lt;/p&gt;

&lt;p&gt;En tu vista .vue, por ejemplo la del producto, agrega metaInfo en lo que exporta tu componente (vista). ¿En qué casos requiero datos dinámicos? Si la página que estas “etiquetando” tiene datos estáticos no es necesario, pero lo más común es que los datos sean dinámicos, el ejemplo claro es una página de producto. El contenido de esta página varía de acuerdo a un producto que seguramente estamos consultando por medio de un servicio, por lo tanto los metadatos deben ser dinámicos en éste caso: el titulo del producto, la descripción del producto, etc.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Product.vue (view)&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export default{
 metaInfo() {
   return {
     title: this.meta.title,
       htmlAttrs: {
         lang: 'es',
       },
       meta: [
        { name: 'description', 
          content: this.meta.description },
        },
        { name: 'twitter:card', content: 'summary_large_image'},
        { name: 'twitter:site', content: this.meta.twitterUser },
        { name: 'twitter:title', content: this.meta.title },
        { name: 'twitter:description', 
          content: this.meta.description },
        { name: 'twitter:image',
          content: this.meta.productSocialImg },
        { name: 'twitter:image:alt', content: this.meta.title },

        { property: 'og:title', content: this.meta.title },
        { property: 'og:description',
          content: this.meta.description },
        { property: 'og:type', content: 'website' },
        { property: 'og:site_name',
          content: 'Mascota Shop: Todo para tu mascota' },
        { property: 'og:url', content: document.location.href },
        { property: 'og:image',
          content: this.meta.productSocialImg },
      ]
     }
   },
 }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;this.meta&lt;/strong&gt; debe ser una propiedad computada:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;computed: {
 meta() {
   return {
     title: `${this.product.name} - Mascota Shop`,
       description: this.product.shortDescription,
       productSocialImg: this.product.socialImgSrc,
       ...
   }
 }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Las pruebas (herramientas de validación)
&lt;/h2&gt;

&lt;p&gt;Twitter y facebook cuentan con herramientas para probar el correcto funcionamiento del etiquetado.&lt;br&gt;
&lt;a href="https://developers.facebook.com/tools/debug/"&gt;Facebook&lt;/a&gt;&lt;br&gt;
&lt;a href="https://cards-dev.twitter.com/validator"&gt;Twitter&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Son muy fáciles de usar, básicamente solo ingresas la url a probar y te regresan tanto el preview como detalles a revisar o errores si es el caso.&lt;/p&gt;

&lt;p&gt;Para verificar que todo esté funcionando correctamente:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Asegúrate de que al probar tu sitio esté en la web (no localhost)&lt;/li&gt;
&lt;li&gt;Espera algunas horas para ver el resultado final en las herramientas de validación&lt;/li&gt;
&lt;li&gt;Si tu sitio web está protegido con contraseña configurado en el servidor, no se podrá compartir tu contenido ni en las herramientas de validación ni en redes sociales&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Por último, preguntas frecuentes
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;¿Cuándo debe aparecer una tarjeta en redes sociales?&lt;/strong&gt;&lt;br&gt;
Cuando creas una publicación en facebook/twitter y pones el link de la página que quieres compartir, por ejemplo en este caso el link del producto&lt;br&gt;
&lt;a href="https://mascotashop.com/dogs/disfraz-batman"&gt;https://mascotashop.com/dogs/disfraz-batman&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;También puedes agregar botones en tu sitio web para compartir directamente en redes sociales. En otro post compartiré cómo hacerlo.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;¿Cuánto tiempo debo esperar para ver el resultado desde mi sitio web/validadores?&lt;/strong&gt;&lt;br&gt;
Regularmente no más de 24 horas&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;¿Qué debo hacer si no logro hacer que se vean las tarjetas al compartir?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Primero te recomiendo revisar bien los errores que arrojan las herramientas de testing/validacion que he compartido. &lt;/li&gt;
&lt;li&gt;Luego espera un máximo de 72 horas. &lt;/li&gt;
&lt;li&gt;Si aún no obtienes resultados puede ser alguna configuración de tu servidor. &lt;/li&gt;
&lt;li&gt;En caso de que hayas seguido todos los pasos anteriores sin éxito, puedes contactarme por éste medio o en twitter y con gusto te apoyo en la revisión&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;¿Qué pasa si estoy trabajando con Nuxt o gridsome?&lt;/strong&gt;&lt;br&gt;
Ésta amigos es otra historia, no tiene mayor complicación al menos con Nuxt. De cualquier forma estaré agregándolo en otras partes de ésta serie. &lt;/p&gt;

&lt;p&gt;¿Alguna duda que se me haya escapado? &lt;strong&gt;Escríbeme!! :)&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>seo</category>
      <category>posicionamientoweb</category>
      <category>spa</category>
      <category>vue</category>
    </item>
    <item>
      <title>Posicionamiento para Vue Apps - Cap. 1: Meta datos</title>
      <dc:creator>Noemi Leon</dc:creator>
      <pubDate>Fri, 30 Oct 2020 22:30:56 +0000</pubDate>
      <link>https://dev.to/noeleo25/posicionamiento-para-vue-apps-cap-1-meta-datos-3o11</link>
      <guid>https://dev.to/noeleo25/posicionamiento-para-vue-apps-cap-1-meta-datos-3o11</guid>
      <description>&lt;h2&gt;
  
  
  Primero que nada ¿Qué son los meta datos y para qué sirven las etiquetas meta?
&lt;/h2&gt;

&lt;p&gt;Las etiquetas meta son parte indispensable del área de posicionamiento web. De manera general podemos decir que por medio de estas etiquetas es que los mecanismos de búsqueda de los navegadores posicionarán nuestro sitio.&lt;br&gt;
Las principales etiquetas que se requieren son:&lt;/p&gt;
&lt;h3&gt;
  
  
  title
&lt;/h3&gt;

&lt;p&gt;Esta etiqueta contiene el título principal de la página actual. Incluso es el título que vemos en la etiqueta del navegador y es lo que vemos en las búsquedas cómo título también.&lt;br&gt;
Recomendación: No más de 70 caracteres&lt;br&gt;
Ejemplo:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;title&amp;gt;Noemi León | Welcome to my portfolio&amp;lt;/title&amp;gt;&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  meta-description
&lt;/h3&gt;

&lt;p&gt;En esta etiqueta describimos la página. Se recomienda describa de manera “humana” el contenido de la página evitando la sobrecarga de keywords.&lt;br&gt;
Recomendación: No más de 155 caracteres&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;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 :)"&amp;gt;&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;Las 2 etiquetas anteriores (title y description) además de ayudar a posicionar las páginas, también proveen información al usuario cuando encuentra tu sitio en el buscador:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fbqw65sg3aa3doqyv7aze.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fbqw65sg3aa3doqyv7aze.PNG" alt="Búsqueda con meta datos"&gt;&lt;/a&gt;&lt;br&gt;
En la imagen superior puedes observar 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 exactamente lo que necesitamos, sino simplemente textos que estaban en el cuerpo de nuestra página.&lt;/p&gt;
&lt;h3&gt;
  
  
  meta-keywords
&lt;/h3&gt;

&lt;p&gt;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. &lt;br&gt;
Cómo dato adicional, el gigante del comercio en línea “Amazon” sigue usando esta etiqueta.&lt;/p&gt;
&lt;h3&gt;
  
  
  Etiquetas og y twitter
&lt;/h3&gt;

&lt;p&gt;Estas etiquetas nos permiten mostrar el contenido que indicamos cada vez que se comparte un enlace de nuestro sitio 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 potenciales compradores, por lo que mostrar un contenido estético y ordenado puede ser una ventaja.&lt;br&gt;
Para ser más claros en cuanto a la ventaja de agregar estas etiquetas, observa la siguiente imagen:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Foevs65rkw8301ud04a61.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Foevs65rkw8301ud04a61.PNG" alt="Share de una página con og tags correctamente"&gt;&lt;/a&gt;&lt;br&gt;
Si compartes un enlace en facebook/twitter y el sitio al que pertenece el enlace tiene correctamente las etiquetas, verás algo así. En cambio, si no lo haces seguramente solo verás un enlace sin nada más adicional.&lt;br&gt;
Hay diversas formas de mostrar estas tarjetas y herramientas de validación, pero eso lo veremos en la parte 2 de éste post.&lt;/p&gt;

&lt;p&gt;Hay diversas recomendaciones para establecer correctamente el contenido de las etiquetas pero esa es una historia larga que te platicaré en otro post. Por ahora el punto principal es entender la necesidad de éstas etiquetas y saber cómo agregarlas en una aplicación con Vue.&lt;/p&gt;
&lt;h2&gt;
  
  
  Cuando trabajamos en un sitio web con archivos .html
&lt;/h2&gt;

&lt;p&gt;Por ejemplo si usamos Vue.js cómo librería, es decir, cuando importamos como script:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"&amp;gt;&amp;lt;/script&amp;gt;&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;Ponemos las etiquetas meta dentro de la etiqueta &lt;/p&gt; de cada uno de nuestros archivos. Por ejemplo, en mi archivo index.html tendría algo así:&lt;br&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;
  &amp;lt;head&amp;gt;
    &amp;lt;title&amp;gt;Noemi León | Welcome to my portfolio&amp;lt;/title&amp;gt;
    &amp;lt;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 :)"&amp;gt;
    &amp;lt;meta name="keywords" content="professional Portfolio, professional website, software developer portfolio"&amp;gt;
    ...
  &amp;lt;/head&amp;gt;
  &amp;lt;body&amp;gt;
    &amp;lt;h1&amp;gt;Hello! &amp;lt;/h1&amp;gt;
    &amp;lt;p&amp;gt;My name is Noemi León.&amp;lt;/p&amp;gt;
    ...
  &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Y así sería para cada página: contácto, faq, etc, cambiando unicamente el contenido de las etiquetas. Así de sencillo es agregar las etiquetas meta en éstos casos, pero..&lt;/p&gt;
&lt;h2&gt;
  
  
  ¿Qué pasa cuando se trata de una SPA?
&lt;/h2&gt;

&lt;p&gt;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 correctamente, ya que no estaríamos especificando etiquetas para cada página.&lt;br&gt;
Entonces ¿Cómo hacemos para agregar las etiquetas correspondientes a cada vista en una SPA?&lt;br&gt;
Existen diversas librerías que te pueden ayudar, dependiendo del framework con el que estés trabajando. En éste post específicamente te contaré cómo hacerlo con Vue.js.&lt;/p&gt;
&lt;h3&gt;
  
  
  Etiquetas meta en una SPA con Vue.js
&lt;/h3&gt;

&lt;p&gt;Para trabajar con Vue.js te recomiendo usar el plugin &lt;strong&gt;vue-meta&lt;/strong&gt;, éste es incluso el que utilizan frameworks cómo gridsome y nuxt. Puedes encontrarlo &lt;a href="https://www.npmjs.com/package/vue-meta" rel="noopener noreferrer"&gt;aqui&lt;/a&gt; y también puedes consultar la &lt;a href="https://vue-meta.nuxtjs.org/" rel="noopener noreferrer"&gt;documentación&lt;/a&gt;.&lt;br&gt;
Pasamos a la acción:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Instalamos
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;code&gt;npm install vue-meta --save&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Luego, importar. Si es con npm:
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;code&gt;import VueMeta from 'vue-meta'&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;



&lt;p&gt;&lt;code&gt;Vue.use(VueMeta);&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Implementación: A continuación..&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Meta tags estáticos
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;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' 
    },
    ..
  ]
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Meta tags dinámicos
&lt;/h3&gt;

&lt;p&gt;Seguramente ya te quedaste pensando: ¿Qué pasa si quiero poner datos dinámicos? 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.&lt;br&gt;
Para hacerlo, ponemos metaInfo cómo función y podemos usar los datos cómo this.meta.title o this.meta.description, e incluso podemos usar interpolación si lo requerimos:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;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.
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;WARNING:&lt;/strong&gt; 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 correctamente:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Server-side Rendering: Por ejemplo con Nuxt.js&lt;/li&gt;
&lt;li&gt;Prerendering: En éste post hablaré de esta técnica&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Prerendering con Vue.js
&lt;/h3&gt;

&lt;p&gt;Cuando nuestro sitio no está preparado para server side rendering, y éste además es relativamente pequeño (el caso de mi portafolio es el perfecto ejemplo) se recomineda usar pre-renderizado.&lt;br&gt;
Hay diversos plugins para lograrlo, el que puedo recomendarte en este caso es &lt;a href="https://www.npmjs.com/package/vue-cli-plugin-prerender-spa" rel="noopener noreferrer"&gt;vue-cli-plugin-prerender-spa&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;fácilmente y lo único que debes hacer es indicar las opciones que se preguntarán durante la instalación, por ejemplo:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;que rutas pre-renderizar? las que quieres posicionar&lt;/li&gt;
&lt;li&gt;solo pre-renderizar para builds de producción? Se recomienda que Si, ya que el proceso de build es más tardado cuando se pre-renderiza. &lt;/li&gt;
&lt;li&gt;Entre otras..
Por supuesto, te recomiendo leer la documentación para asegurarte de entenderlo y hacer las configuraciones necesarias.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Al ejecutar el build en tu proyecto, por ejemplo npm run build, npm run build-production o cómo tengas configurado el comando, podrás observar que en la carpeta ./dist se generan los archivos .html, que indicaste 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 &lt;strong&gt;LISTO!!&lt;/strong&gt; ahora si deben poder leer correctamente tus meta datos los motores de búsqueda.&lt;/p&gt;

&lt;h3&gt;
  
  
  Comprobar lectura correcta de etiquetas
&lt;/h3&gt;

&lt;p&gt;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 recurrir a herramientas de análisis cómo Moz, o Google Search Console. Una indicación de buen funcionamiento, al menos del title y description es como aparece tu sitio en la búsqueda. En este caso tu sitio ya está indexado, verifica que el título y descripción coincidan con lo que pusiste en las etiquetas.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;¿Qué hay de los og y twitter tags?&lt;/strong&gt; Eso lo veremos más a detalle en la parte 2 de este post.&lt;/p&gt;

&lt;p&gt;Por el momento me despido 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: &lt;a href="https://noemileon.dev/" rel="noopener noreferrer"&gt;noemileon.dev&lt;/a&gt;&lt;/p&gt;

</description>
      <category>seo</category>
      <category>posicionamientoweb</category>
      <category>spa</category>
      <category>vue</category>
    </item>
    <item>
      <title>Dónde encontrar trabajo remoto y aspectos a considerar en las vacantes</title>
      <dc:creator>Noemi Leon</dc:creator>
      <pubDate>Mon, 29 Jun 2020 23:16:39 +0000</pubDate>
      <link>https://dev.to/noeleo25/donde-encontrar-trabajo-remoto-y-aspectos-a-considerar-en-las-vacantes-3ofk</link>
      <guid>https://dev.to/noeleo25/donde-encontrar-trabajo-remoto-y-aspectos-a-considerar-en-las-vacantes-3ofk</guid>
      <description>&lt;p&gt;Como parte de la serie de publicaciones acerca del trabajo remoto, en este post encontrarás algunos datos de los más solicitados cómo ¿dónde encontrar los trabajos? y ¿qué debo considerar en una vacante remota?&lt;br&gt;
Es importante mencionar que todo lo incluido en este post es ideal para cualquier perfil en TI, desde diseñadores, desarrolladores project managers, SEO y social media e incluso otro tipo de perfiles como por ejemplo ventas y business management.&lt;/p&gt;

&lt;h2&gt;
  
  
  Primero lo primero.. ¿Qué debo considerar en las vacantes?
&lt;/h2&gt;

&lt;p&gt;Antes de que te pierda con la emoción de dónde encontrar el trabajo, y antes de que te vayas directamente a las plataformas y te olvides de este post, te comento que sí hay muchas variaciones y muchos aspectos a considerar a la hora de buscar (y aplicar) a un trabajo remoto.&lt;br&gt;
Además de lo que consideramos regularmente en un trabajo, hay otras cosas en el trabajo remoto que pueden ser de suma importancia y, por lo tanto, es mejor conocer ésto antes de buscar vacantes ya que te ahorrará tiempo en el filtrado y evitarás aplicar a vacantes que realmente no puedes cubrir, ya sea por criterios personales o de la empresa.&lt;/p&gt;

&lt;h3&gt;
  
  
  Restricciones de locación
&lt;/h3&gt;

&lt;p&gt;Algunas vacantes indican que solo aplica para residentes de “x” país. Esto sucede principalmente por cuestiones legales o de visado. Te recomiendo verificar bien este aspecto, si la vacante no indica alguna restricción lo más probable es que no exista, en éste caso puedes aplicar pero recuerda preguntar en el primer contacto que tengas con la empresa directamente.&lt;/p&gt;

&lt;p&gt;Nota: Si la vacante dice “international” regularmente aplica para cualquier lugar del mundo donde te encuentres.&lt;/p&gt;

&lt;p&gt;Algunas vacantes indican que existe la posibilidad de cambio de residencia. Considera si estás dispuesto o si te gustaría hacerlo antes de aplicar. Te recomiendo preguntar más detalles durante la entrevista. Por ejemplo quién se hace cargo de los gastos de relocación, si todo se hace legalmente, qué pasa si no se consigue la visa, qué tipo de visa, etc.&lt;/p&gt;

&lt;h3&gt;
  
  
  Pagos
&lt;/h3&gt;

&lt;p&gt;Regularmente el sueldo publicado es anual en vacantes de éste tipo. De cualquier forma te recomiendo verificarlo. Por otro lado, en cuanto a las formas de pago te recomiendo considerar todo lo siguiente:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Frecuencia de pago (p.e quincenal, mensual)&lt;/li&gt;
&lt;li&gt;Si existen bonos, por ejemplo: bono de fin de año, bono por productividad, por antigüedad, etc.&lt;/li&gt;
&lt;li&gt;El método de pago (paypal, deposito o transferencia bancaria, transferwise). Recuerda verificar con tu banco o plataforma las comisiones generadas. Por ejemplo, por transferencia interbancaria se cobra una comisión, esta puede ser fija o proporcional al monto del depósito dependiendo del banco. Conociendo estas características, puedes elegir el banco que mejor te funcione, finalmente el dinero llegará a una cuenta bancaria.&lt;/li&gt;
&lt;li&gt;Si la empresa no se encuentra en tu país, seguramente no haga el descuento de impuestos, pero debes ser cuidadoso porque al recibir montos frecuentes en tu cuenta bancaria, probablemente la Secretaría de hacienda de tu país de pedirá declararlos.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Beneficios
&lt;/h3&gt;

&lt;p&gt;¿Qué incluye mi contrato en cuanto a beneficios?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Seguro de gastos médicos&lt;/li&gt;
&lt;li&gt;Seguro dental&lt;/li&gt;
&lt;li&gt;Equipo de trabajo&lt;/li&gt;
&lt;li&gt;Vacaciones pagadas&lt;/li&gt;
&lt;li&gt;Días de descanso semanales&lt;/li&gt;
&lt;li&gt;Time off no pagado.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Es poco probable encontrar todo esto en la publicación de la vacante, aunque hay algunas empresas que si se toman el tiempo de hacerlo. En caso contrario, puedes preguntarlo en la entrevista, pero sí es muy importante que lo sepas y que esté plasmado en el contrato.&lt;/p&gt;

&lt;h3&gt;
  
  
  Horarios
&lt;/h3&gt;

&lt;p&gt;Los esquemas en cuanto a horarios, también suelen ser muy variables en los trabajos remotos, considera lo siguiente:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Requiere estar disponible en horarios fijos? o puedo trabajar a la hora que prefiera?&lt;/li&gt;
&lt;li&gt;¿Cuántas horas al día debo trabajar? Y en ésto esta parte vale la pena aclarar que algunas empresas utilizan herramientas de medición de tiempos, lo cual no debe ser un problema si te dedicas seriamente a tu trabajo.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Otras consideraciones
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Contrato: Desafortunadamente nos podemos encontrar con estafadores o empresas no bien establecidas, que de la noche a la mañana dejan de pagar o te quitan beneficios sin previo aviso ni negociación. Por tal motivo, es importante que exista un contrato entre las partes donde se establezca claramente cada uno de los aspectos que hemos visto anteriormente: horarios, beneficios, pagos, etc.
La mayoría de los aspectos a considerar que menciono anteriormente los dejo a tu consideración, en el caso del contrato te recomiendo no dejarlo pasar por ningún motivo.&lt;/li&gt;
&lt;li&gt;Requiere viajar: Algunas empresas que trabajan de manera remota solicitan a sus empleados realizar viajes anuales, por ejemplo para fomentar la unión de los equipos, poderse conocer personalmente, etc.
Esto también puede ocurrir en el caso de reuniones de trabajo, presentaciones de proyectos, etc. Sea cual sea el motivo del viaje, es bueno conocer si tu trabajo lo requiere o requerirá en el futuro, sobretodo si tienes algún otro compromiso o algo que se pueda ver afectado en éste aspecto, por ejemplo: educación presencial, familia, mascotas, etc.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Ahora si.. ¿Qué hay de los trabajos?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Plataformas con opción de búsqueda por locación remota
&lt;/h3&gt;

&lt;h4&gt;
  
  
  LinkedIn
&lt;/h4&gt;

&lt;p&gt;Ventajas: Puedes encontrar incontables (miles) de vacantes en esta plataforma, además de que el filtro es bastante intuitivo. Algunas empresas / vacantes cuentan con las opciones “solicitud sencilla” o “solicitar”, que recopila tus datos de LinkedIn y los comparte rápidamente como una solicitud de empleo.&lt;br&gt;
Además las opciones van desde la empresa más pequeña o startup, hasta las grandes empresas cómo Google, Amazón.&lt;/p&gt;

&lt;h4&gt;
  
  
  Indeed
&lt;/h4&gt;

&lt;p&gt;Ventajas: Puedes crear un perfil previamente que te permite solicitar rápidamente los empleos una vez que lo hayas capturado.&lt;br&gt;
En indeed rara vez encuentras vacantes de empresas conocidas a nivel internacional.&lt;/p&gt;

&lt;h4&gt;
  
  
  Empleos TI
&lt;/h4&gt;

&lt;p&gt;Si buscas algo más nacional, esta plataforma mexicana recientemente ha integrado vacantes remotas o parcialmente remotas. Para filtrar, en la página de inicio, en el campo “¿Dónde?” Selecciona “Home Office”.&lt;br&gt;
Plataformas que únicamente muestran trabajos remotos&lt;/p&gt;

&lt;h4&gt;
  
  
  Remoters
&lt;/h4&gt;

&lt;p&gt;Ventajas: Tiene un enfoque completo en el trabajo remoto. Esta plataforma cuenta con herramientas, blog e incluso eventos.&lt;/p&gt;

&lt;h4&gt;
  
  
  Remote.co
&lt;/h4&gt;

&lt;p&gt;Ventajas: Cuenta con un blog acerca del trabajo remoto&lt;/p&gt;

&lt;h4&gt;
  
  
  We work remotely
&lt;/h4&gt;

&lt;p&gt;Ventajas: Grandes empresas publican sus vacantes en esta plataforma. Por ejemplo: Google, Amazon, Github, etc.&lt;/p&gt;

&lt;p&gt;Estas son algunas plataformas que he utilizado hasta ahora y que considero confiables, con muchas vacantes remotas y fáciles de filtrar y con interfaz amigable. Además de que la mayoría de las vacantes son bastante claras.&lt;br&gt;
Otra opción es seguir en redes sociales a reclutadores que ofrezcan vacantes en ésta modalidad, por ejemplo &lt;a class="mentioned-user" href="https://dev.to/donchambitas"&gt;@donchambitas&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Espero te sean de utilidad las recomendaciones y opciones de búsqueda para encontrar tu camino hacia el trabajo remoto.&lt;/p&gt;

&lt;p&gt;Si ya lograste encontrar un trabajo que remoto, enhorabuena! te felicito! y de paso, te invito a checar &lt;a href="https://www.linkedin.com/learning/trabajo-remoto-para-desarrolladores-y-desarrolladoras"&gt;este curso&lt;/a&gt; en LinkedIn Learning, que he preparado especialmente para darte algunos consejos que te faciliten la vida con tu nuevo trabajo remoto.&lt;/p&gt;

</description>
      <category>remotejob</category>
      <category>findremotejob</category>
      <category>trabajoadistancia</category>
      <category>trabajoremoto</category>
    </item>
    <item>
      <title>¿Cómo dar el salto al trabajo remoto? Parte I</title>
      <dc:creator>Noemi Leon</dc:creator>
      <pubDate>Mon, 22 Jun 2020 17:57:08 +0000</pubDate>
      <link>https://dev.to/noeleo25/como-dar-el-salto-al-trabajo-remoto-parte-i-1jg8</link>
      <guid>https://dev.to/noeleo25/como-dar-el-salto-al-trabajo-remoto-parte-i-1jg8</guid>
      <description>&lt;p&gt;Inicio este artículo aclarando que no soy experta en el tema, tengo 4 años y medio trabajando de manera remota y en ese lapso solo he pasado por 2 diferentes empresas en ésta modalidad. Sin embargo, en éste tiempo he tenido la oportunidad de apreciar el trabajo remoto, tanto sus bondades como sus dificultades. Por otro lado, he tenido la oportunidad de colaborar en la parte de contrataciones/reclutamiento, con algunas empresas que están adoptando esta modalidad, de manera que he recopilado algunos consejos que quisiera compartir ya que he notado la curiosidad y el interés en el tema por parte de la comunidad tech.&lt;/p&gt;

&lt;h2&gt;
  
  
  Vamos en orden.. ¿Por dónde empiezo?
&lt;/h2&gt;

&lt;p&gt;Cómo te imaginarás el trabajo remoto no es algo común en México, ni en América Latina, de hecho desafortunadamente estoy viendo que aún en estos momentos muchas empresas quieren regresar a la modalidad oficina.. Por lo tanto, la primera y más importante recomendación para lograr incursionar en el trabajo remoto es: Aprende Inglés. Lo he dicho en algunas pláticas y puede parecer comercial pero es cierto “El inglés te abre las puertas”. Esto te abrirá camino por muchísimas más oportunidades, ya que la mayoría de los trabajos remotos (hasta un 90%) pide el inglés como idioma principal, independientemente del país en el que se encuentre físicamente la empresa: sea Alemania, Austria, Estados Unidos, Holanda, o el país que sea, en su mayoría solicitarán inglés (hablado y escrito).&lt;/p&gt;

&lt;h2&gt;
  
  
  Ya hablo inglés.. ¿Qué sigue?
&lt;/h2&gt;

&lt;p&gt;Perfecto! si ya hablas inglés y puedes redactar documentos, ya estas con un pasote adelante. Lo que sigue sería: tener un buen currículum o portafolio.&lt;br&gt;
Cómo desarrolladores, puede llegar a ser difícil tener un portafolio.. En mi caso por ejemplo los proyectos que he desarrollado a lo largo de 7 años son de plataformas internas de la empresa y/o son privados. Incluso en algunos trabajos te hacen firmar un contrato de confidencialidad, en algunos casos no puedes compartir lo que hiciste, ni la idea.&lt;br&gt;
Otro obstáculo puede ser la tecnología que se maneja, por ejemplo un proyecto de Machine Learning puede llegar a ser difícil de valorar en un portafolio. Por otro lado si eres diseñador o frontend tienes un montón de oportunidades de mostrar tu trabajo en un portafolio.&lt;br&gt;
En fin.. si por algún motivo no tienes cómo mostrar tu trabajo en un portafolio, puedes tener artículos, repositorios o también te puede agregar puntos experiencia formal en el ámbito laboral. Aquí una nota: Las empresas que ofrecen trabajo remoto fijo, no buscan personas con experiencia unica como freelancer. Pueden aceptar a alguien que solo haya trabajado anteriormente como freelancer? si! pero no es su principal foco de atención en los candidatos, ni el principal parámetro por el cual contratan a alguien.&lt;/p&gt;

&lt;h2&gt;
  
  
  Entonces.. ¿Qué buscan las empresas “remote friendly”?
&lt;/h2&gt;

&lt;p&gt;Fácil.. Gente comprometida y gente a la que le guste su trabajo: Responsabilidad, iniciativa, auto-aprendizaje. Si tienes estos puntos y se ven reflejados en tu currículum, portafolio, o incluso en la entrevista de trabajo, ya tienes muchos puntos a favor.&lt;br&gt;
Por otro lado, en el área técnica estas vacantes suelen ser muy exigentes. En la mayoría de los casos, las vacantes son muy especializadas y son pocas las vacantes junior. De cualquier forma puedes encontrar oportunidades de acuerdo a tu nivel y conocimientos, solo hay que ser pacientes y no esperar que a la primera que apliques todo salga perfecto, recuerda que estas vacantes son “globales”, gente de todo el mundo puede aplicar y por eso suele ser un poco tardado el proceso de selección y las probabilidades de ser seleccionado se reducen conforme más personas se postulan.&lt;br&gt;
Finalmente, les dejo el consejo extra: No olviden redactar una buena “cover letter”, éstas son muy solicitadas y apreciadas en las vacantes remotas.&lt;/p&gt;

&lt;h2&gt;
  
  
  Ya tengo un trabajo remoto, ¿Cómo sobrevivo?
&lt;/h2&gt;

&lt;p&gt;Si ya lograste encontrar un trabajo que remoto, enhorabuena! te felicito! y de paso, te dejo &lt;a href="https://www.linkedin.com/learning/trabajo-remoto-para-desarrolladores-y-desarrolladoras"&gt;este curso&lt;/a&gt; en LinkedIn Learning, que he preparado especialmente para darte algunos consejos que te faciliten la vida con tu nuevo trabajo remoto, además de ayudarte a mejorar tu productividad ;)&lt;/p&gt;

</description>
      <category>trabajoremoto</category>
    </item>
  </channel>
</rss>
