Documentación técnica de Stronglify

En esta página encontrarás toda la documentación técnica necesaria para trabajar con Stronglify. Aquí podrás acceder a elementos técnicos, códigos HTML, snippets para blocks y todo lo que necesitas para mejorar el SEO técnico de tu sitio web. Nuestro objetivo es darte toda la información para aprovechar al máximo nuestra tecnología.

Estructura HTML básica

Cada página de Stronglify es un documento HTML plano. No necesitas frameworks de frontend: los bloques que arrastras en el editor generan HTML semántico directamente.

<section class="hero">
  <h1>{{ .Title }}</h1>
  <p>{{ .Params.description }}</p>
  <a href="/contacto">
    Empezar gratis
  </a>
</section>

Variables Hugo

Stronglify usa la sintaxis de plantillas de Hugo. Cada página tiene acceso a variables como .Title, .Params y .Site.

<title>
  {{ .Title }} | {{ .Site.Title }}
</title>
<meta
  name="description"
  content="{{ .Params.description }}"
>
<img
  src="{{ .Params.hero_image }}"
  alt="{{ .Params.hero_alt }}"
>

Loops y condicionales

Para generar SEO programático a escala, usa range sobre un array de datos y if para renderizado condicional.

{{ range $element :=
  $blockTemplateParams.testimonials
}}
  <div class="testimonio">
    <p>
      {{ $element.testimonio }}
    </p>
    <span>
      — {{ $element.nombre_rol }}
    </span>
  </div>
{{ end }}

{{ if .Params.featured }}
  <span class="badge">Destacado</span>
{{ end }}

Bloques y snippets

Los bloques (blockTemplateParams) reciben datos dinámicos desde el CMS. Úsalos para crear componentes reutilizables entre páginas.

<div class="grid">
  {{ range $item :=
    $blockTemplateParams.features
  }}
    <div class="card">
      <h3>
        {{ $item.titulo }}
      </h3>
      <p>
        {{ $item.descripcion }}
      </p>
    </div>
  {{ end }}
</div>

SEO técnico

Cada página generada incluye metadatos, schema y sitemap automáticamente. Puedes sobreescribir valores por página con variables de Hugo.

<link
  rel="canonical"
  href="{{ .Permalink }}"
>
<meta
  property="og:title"
  content="{{ .Title }}"
>
<meta
  property="og:description"
  content="{{ .Params.description }}"
>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "{{ .Title }}"
}
</script>