Refactoring SEO

8 files changed, 207 insertions, 159 deletions

diff --git a/libretube-theme/templates/archives.html b/libretube-theme/templates/archives.html
index d099ed3..8374a58 100644
--- a/libretube-theme/templates/archives.html
+++ b/libretube-theme/templates/archives.html
@@ -1,63 +1,54 @@
 {% extends "base.html" %}
 
-{% block extra_head %}
-<meta name="description" content="{{ _('Lista de artículos publicados en LibreTube.') }}">
-<meta name="keywords" content="{{ _('archivos,artículos,historia,lista de artículos') }}">
-
-<style>
-
- .content ul, .content ul ul, .content ul ul ul {
-     list-style:none !important;
- }
-
- .content ul {
-     margin-left: 0px !important;
- }
-
- .contenedor-arbol, .contenedor-arbol ul, .contenedor-arbol li {
-     position: relative;
-     margin: 0;
-     padding-left: 2%;
-     line-height: normal;
- }
-
- .contenedor-arbol ul {
-     list-style: none;
- }
-
- .contenedor-arbol li::before, .contenedor-arbol li::after {
-     content: "";
-     position: absolute;
-     left: -12px;
- }
-
- .contenedor-arbol li::before {
-     border-top: 2px solid #000;
-     top: 9px;
-     width: 12px;
-     height: 0;
- }
-
- .contenedor-arbol li::after {
-     border-left: 2px solid black;
-     height: 100%;
-     width: 0px;
-     top: 2px;
- }
-
- .contenedor-arbol ul > li:last-child::after {
-     height: 8px;
- }
-</style>
-
-
+{% block head %}
+    {% block title %}
+        <title>{{ _('Archivos de %(sitename)s', sitename=SITENAME) }}</title>
+    {% endblock %}
+    {{ super() }}
+    {% block seo %}
+        <meta name="description" content="{{ _('Lista de artículos publicados en %(sitename)s', sitename=SITENAME) }}"/>
+        <meta name="keywords" content="{{ _('archivos,artículos,historia,lista de artículos') }}"/>
+        <style>
+         .content ul, .content ul ul, .content ul ul ul {
+             list-style:none !important;
+         }
+         .content ul {
+             margin-left: 0px !important;
+         }
+         .contenedor-arbol, .contenedor-arbol ul, .contenedor-arbol li {
+             position: relative;
+             margin: 0;
+             padding-left: 2%;
+             line-height: normal;
+         }
+         .contenedor-arbol ul {
+             list-style: none;
+         }
+         .contenedor-arbol li::before, .contenedor-arbol li::after {
+             content: "";
+             position: absolute;
+             left: -12px;
+         }
+         .contenedor-arbol li::before {
+             border-top: 2px solid #000;
+             top: 9px;
+             width: 12px;
+             height: 0;
+         }
+         .contenedor-arbol li::after {
+             border-left: 2px solid black;
+             height: 100%;
+             width: 0px;
+             top: 2px;
+         }
+         .contenedor-arbol ul > li:last-child::after {
+             height: 8px;
+         }
+        </style>
+    {% endblock %}
 {% endblock %}
 
-{% block title %}{% trans %}Archivos de {{ SITENAME }}{% endtrans %}{% endblock %}
 {% block content %}
-
-
-
 <!-- Main -->
 <div class="row mt-6 mt-10">
     <div class="col-md-9 mx-auto text-justify">
diff --git a/libretube-theme/templates/article.html b/libretube-theme/templates/article.html
index 9d23e80..d2450c4 100644
--- a/libretube-theme/templates/article.html
+++ b/libretube-theme/templates/article.html
@@ -1,72 +1,76 @@
 {% extends "base.html" %}
-
 {% block html_lang %}{{ article.lang }}{% endblock %}
 
-{% block extra_head %}
-    <meta name="author" content="{{ article.author }}">
-    <meta name="keywords" content="{{ article.tags|join(',')|escape }}">
-{% endblock %}
-
-{% block extra_comment %}
-    <link href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/modules/plyr/plyr.css" rel="stylesheet">
-{% endblock %}
-
 {% block head %}
+    {% block title %}
+        <title>{{ article.title }} - {{SITENAME}}</title>
+    {% endblock %}
     {{ super() }}
     {% import 'translations.html' as translations with context %}
     {% if translations.entry_hreflang(article) %}
         {{ translations.entry_hreflang(article) }}
     {% endif %}
-    <meta property="og:title" content="{{ article.title }}">
-    <meta itemprop="name" content="{{ article.title }}">
-    <meta property="og:type" content="video.movie">
-    <meta property="og:url" content="{{ SITEURL }}/{{ article.url }}">
-    <meta property="video:release_date" content="{{ article.date.isoformat() }}">
-    <meta itemprop="uploadDate" content="{{ article.date.isoformat() }}">
-    {% if article.modified %}
-        <meta property="article:modified_time" content="{{ article.modified.isoformat() }}">
-    {% endif %}
-    <meta property="article:section" content="{{ article.category }}">
-    {% set og_description = article.summary.split(ANOTHER_READ_MORE_LINK_FORMAT[:6])[0][3:]|striptags|escape %}
-    {% set OG_DESC_LENGTH = 175 %}
-    {% if og_description|length >= OG_DESC_LENGTH %}
-        {# Quita la última palabra para no dejarla incompleta #}
-        {% set og_description = og_description[:OG_DESC_LENGTH].split(' ')[:-1]|join(' ') %}
-        {% if not og_description[-1] in ['.', '?', ':', '!'] %}
-            {% set og_description = og_description + '…' %}
-        {% endif %}
-    {% endif %}
-    <meta property="og:description" content="{{ article.summary|striptags|escape }}"/>
-    <meta itemprop="description" content="{{ article.summary|striptags|escape }}"/>
-    {% if article.image %}
-        <meta property="og:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/../wp-content/uploads/article/poster/{{ article.image }}"/>
-        <meta itemprop="thumbnailURL" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/../wp-content/uploads/article/poster/{{ article.image }}">
-    {% elif OPEN_GRAPH_IMAGE %}
-        <meta property="og:image" content="{{ SITEURL }}/{{ OPEN_GRAPH_IMAGE }}"/>
-    {% endif %}
-    <!-- videograph -->
-    {% if article.og_video %}
-        <meta property="og:video" content="{{ article.og_video }}">
-        <meta property="og:video:secure_url" content="{{ article.og_video }}">
-        <meta property="og:video:type" content="video/webm">
-        <meta property="og:video:width" content="400">
-        <meta property="og:video:height" content="300">
-    {% endif %}
-    <!-- /videograph -->
-    {% for tag in article.tags %}
-        <meta property="og:video:tag" content="{{ tag | escape }}">
-    {% endfor %}
-
+    <!-- plyr -->
+    <link href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/modules/plyr/plyr.css" rel="stylesheet">
+    <!--/ plyr -->
     {% if article.styles %}
         {% for style in article.styles %}
             {{ style }}
         {% endfor %}
     {% endif %}
-
+    {% block seo %}
+        {% set seo_description = article.summary|striptags %}
+        {% set SEO_DESC_LENGTH = 175 %}
+        {% if seo_description|length >= SEO_DESC_LENGTH %}
+            {# Quita la última palabra para no dejarla incompleta #}
+            {% set seo_description = seo_description[:SEO_DESC_LENGTH].split(' ')[:-1]|join(' ') %}
+            {% if not seo_description[-1] in ['.', '?', ':', '!'] %}
+                {% set seo_more = seo_description + '…' %}
+                {% set seo_description = seo_more|replace('"','') %}
+            {% endif %}
+        {% endif %}
+        <!-- Meta Article -->
+        <meta name="author" content="{{ article.author }}"/>
+        <meta name="description" content="{{ seo_description }}"/>
+        <meta name="keywords" content="{{ article.tags|join(',')|escape }}"/>
+        <meta property="article:section" content="{{ article.category }}"/>
+        <meta property="video:release_date" content="{{ article.date.isoformat() }}"/>
+        {% if article.modified %}
+            <meta property="article:modified_time" content="{{ article.modified.isoformat() }}"/>
+        {% endif %}
+        <!-- Schema -->
+        <meta itemprop="name" content="{{ article.title }}"/>
+        <meta itemprop="description" content="{{ seo_description }}"/>
+        <meta itemprop="uploadDate" content="{{ article.date.isoformat() }}"/>
+        <meta itemprop="thumbnailURL" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/../wp-content/uploads/article/poster/{{ article.image }}"/>
+        <!-- OpenGraph -->
+        <meta property="og:title" content="{{ article.title }}"/>
+        <meta property="og:type" content="video.movie"/>
+        <meta property="og:url" content="{{ SITEURL }}/{{ article.url }}"/>
+        <meta property="og:description" content="{{ seo_description }}"/>
+        <meta property="og:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/../wp-content/uploads/article/poster/{{ article.image }}"/>
+        {% for tag in article.tags %}
+            <meta property="og:video:tag" content="{{ tag | escape }}"/>
+        {% endfor %}
+        {% if article.og_video %}
+            <!-- videograph -->
+            <meta property="og:video" content="{{ article.og_video }}"/>
+            <meta property="og:video:secure_url" content="{{ article.og_video }}"/>
+            <meta property="og:video:type" content="video/webm"/>
+            <meta property="og:video:width" content="400"/>
+            <meta property="og:video:height" content="300"/>
+            <!-- /videograph -->
+        {% endif %}
+        <!-- Twitter -->
+        <meta name="twitter:card" content="summary"/>
+        <meta name="twitter:title" content="{{ article.title }} - {{ SITENAME }}"/>
+        <meta name="twitter:description" content="{{ seo_description }}"/>
+        <meta name="twitter:url" content="{{ SITEURL }}/{{ article.url }}"/>
+        <meta name="twitter:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/../wp-content/uploads/article/poster/{{ article.image }}"/>
+    {% endblock %}
 {% endblock %}
 
-{% block title %}{{ article.title|striptags }}{% endblock %}
-{% block menu_header %}{% endblock menu_header %}
+{% block menu_header %} <!-- empty -->{% endblock menu_header %}
 
 {%- block content -%}
     <!-- Main -->
diff --git a/libretube-theme/templates/author.html b/libretube-theme/templates/author.html
index 7672f30..ba1b2d9 100644
--- a/libretube-theme/templates/author.html
+++ b/libretube-theme/templates/author.html
@@ -1,17 +1,23 @@
-{% extends "index.html" %}
+{% extends "base.html" %}
 
-{% block extra_head %}
-    <meta name="author" content="{{ author }}">
-    <meta name="description" content="{% trans %}Artículos escritos por {{ author }} en LibreTube.{% endtrans %}">
-    <meta name="keywords" content="{% trans %}articulista,artículos,author,autor {{ author }},escritor,{{ author }}{% endtrans %}">
-    <style>
-     .card-content-header {
-         margin-bottom: 2rem;
-     }
-    </style>
+{% block head %}
+    {% block title %}
+        <title>{{ _('Artículos escritos por %(author)s en %(sitename)s', author=author, sitename=SITENAME) }}</title>
+    {% endblock %}
+    {{ super() }}
+    {% block seo %}
+        <!-- Meta Author -->
+        <meta name="author" content="{{ author }}"/>
+        <meta name="description" content="{{ _('Artículos escritos por %(author)s en %(sitename)s', author=author, sitename=SITENAME) }}"/>
+        <meta name="keywords" content="{% trans %}articulista,artículos,author,autor {{ author }},escritor,{{ author }}{% endtrans %}"/>
+        <style>
+        .card-content-header {
+            margin-bottom: 2rem;
+        }
+        </style>
+    {% endblock %}
 {% endblock %}
 
-{% block title %}{{ SITENAME }} - {{ author }}{% endblock %}
 {% block menu_header %}{% endblock menu_header %}
 
 {% block content %}
diff --git a/libretube-theme/templates/authors.html b/libretube-theme/templates/authors.html
index 146ad20..f7428b6 100644
--- a/libretube-theme/templates/authors.html
+++ b/libretube-theme/templates/authors.html
@@ -1,11 +1,26 @@
 {% extends "base.html" %}
 
-{% block extra_head %}
-    <meta name="description" content="{{ _('Lista de autores de LibreTube.') }}">
-    <meta name="keywords" content="{{ _('articulistas,autores,colaboradores,escritores,lista de autores') }}">
-{% endblock %}
+{% block head %}
+    {% block title %}
+        <title>{{ _('Créditos de %(sitename)s', sitename=SITENAME) }}</title>
+    {% endblock %}
+    {{ super() }}
+    {% block seo %}
+        <meta name="description" content="{{ _('Lista de autores de %(sitename)s', sitename=SITENAME) }}"/>
+        <meta name="keywords" content="{{ _('articulistas, autores, colaboradores, escritores, lista de autores') }}"/>
+
+        <!-- OpenGraph -->
+        <meta property="og:type" content="article"/>
+        <meta property="og:title" content="{{ _('Lista de autores de %(sitename)s', sitename=SITENAME) }}"/>
+        <meta property="og:description" content="{{ SITESUBTITLE }}"/>
+        <meta property="og:site_name" content="{{ SITENAME }}"/>
 
-{% block title %}{% trans %}Autores de {{ SITENAME }}{% endtrans %}{% endblock %}
+        <!-- Twitter -->
+        <meta name="twitter:card" content="summary"/>
+        <meta name="twitter:title" content="{{ _('Lista de autores de %(sitename)s', sitename=SITENAME) }}"/>
+        <meta name="twitter:description" content="{{ SITESUBTITLE }}"/>
+    {% endblock %}
+{% endblock %}
 
 {% block content %}
     <!-- Main -->
diff --git a/libretube-theme/templates/base.html b/libretube-theme/templates/base.html
index 952fa5f..6c8780a 100644
--- a/libretube-theme/templates/base.html
+++ b/libretube-theme/templates/base.html
@@ -2,35 +2,24 @@
 <html lang="{% block html_lang %}{{ DEFAULT_LANG }}{% endblock %}">
     <head prefix="og: http://ogp.me/ns#{% if article %} article: http://ogp.me/ns/video#{% endif%}"{% if article %} itemscope itemtype="https://schema.org/VideoObject"{% endif %}>
         {% block head %}
-            <meta charset="UTF-8">
-            <meta http-equiv="X-UA-Compatible" content="IE=edge">
-            <meta name="viewport" content="width=device-width, initial-scale=1">
-            <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
 
+            <!-- Meta Base -->
+            <meta charset="UTF-8"/>
+            <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+            <meta name="viewport" content="width=device-width, initial-scale=1"/>
+            <meta name="HandheldFriendly" content="True"/>
             {% block extra_head %}
-                {% set SITE_DESCRIPTION = _('Videoteca de software libre brindando avance tecnológico') %}
-                <meta name="description" content="{{ SITE_DESCRIPTION }}">
-                <meta property="og:title" content="{{ SITENAME }}">
-                <meta property="og:type" content="website">
-                <meta property="og:url" content="{{ SITEURL }}">
-                <meta property="og:description" content="{{ SITE_DESCRIPTION }}">
             {% endblock %}
-
             <!-- Bootstrap 4.3.1 -->
             <link href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/bootstrap/bootstrap.min.css" rel="stylesheet"
                   integrity="sha384-63+VK53+oFYHzIqG3ljBEZ1Pr9+l0uKU+6UK4YsgNZtVkXQQtsvr0TRcBxncV0gG">
-            <!-- Main Styling -->
+            <!-- Main style -->
             <link href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/styles.min.css" rel="stylesheet">
-
             <!-- favicon -->
-            <link rel="icon" type="image/png" sizes="192x192" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/favicon-192x192.png">
-            <link rel="icon" type="image/png" sizes="96x96" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/favicon-96x96.png">
-            <link rel="icon" type="image/png" sizes="32x32" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/favicon-32x32.png">
-            <link rel="icon" type="image/png" sizes="16x16" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/favicon-16x16.png">
-
-            {% block extra_comment %}
-            {% endblock %}
-
+            <link rel="icon" type="image/png" sizes="192x192" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/favicon-192x192.png"/>
+            <link rel="icon" type="image/png" sizes="96x96" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/favicon-96x96.png"/>
+            <link rel="icon" type="image/png" sizes="32x32" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/favicon-32x32.png"/>
+            <link rel="icon" type="image/png" sizes="16x16" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/favicon-16x16.png"/>
         {% endblock head %}
     </head>
 
@@ -70,7 +59,6 @@
                 <div class="col-md-12">
 
                     {% block menu_header %}
-
                         {% if DISPLAY_PAGES_ON_MENU %}
                             <hr>
                             <nav>
@@ -84,10 +72,8 @@
                             </nav>
                             <hr>
                         {% endif %}
-
                     {% endblock menu_header %}
 
-
                     {%- block content -%}
 
                         <!-- Main videos -->
diff --git a/libretube-theme/templates/index.html b/libretube-theme/templates/index.html
index 659f7b4..8a1d5ad 100644
--- a/libretube-theme/templates/index.html
+++ b/libretube-theme/templates/index.html
@@ -1,15 +1,36 @@
 {% extends "base.html" %}
 
-{% block extra_head %}
+{% block head %}
+    {% block title %}
+        <title>{% if articles_page.number != 1 %}{{ _('Página') }} {{ articles_page.number }} | {% endif %}{{ SITENAME }}</title>
+    {% endblock %}
     {{ super() }}
     {% if lang_siteurls and articles_page.number == 1 %}
         {% for lang, url in lang_siteurls.items() %}
             <link rel="alternate" hreflang="{{ lang }}" href="{{ url }}/">
         {% endfor %}
     {% endif %}
+
+    {% block seo %}
+        {% set SITE_DESCRIPTION = _('Videoteca de software libre brindando avance tecnológico') %}
+        <!-- Meta Index -->
+        <meta name="description" content="{{ SITE_DESCRIPTION }}">
+
+        <!-- OpenGraph -->
+        <meta property="og:title" content="{{ SITENAME }}">
+        <meta property="og:description" content="{{ SITE_DESCRIPTION }}">
+        <meta property="og:url" content="{{ SITEURL }}">
+        <meta property="og:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/favicon-96x96.png"/>
+        <meta property="og:type" content="website">
+
+        <!-- Twitter -->
+        <meta name="twitter:card" content="summary_large_image"/>
+        <meta name="twitter:title" content="{{ SITENAME }}"/>
+        <meta name="twitter:description" content="{{ SITE_DESCRIPTION }}"/>
+        <meta name="twitter:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/favicon-96x96.png"/>
+    {% endblock %}
 {% endblock %}
 
-{% block title %}{{ SITENAME }}{% if articles_page.number != 1 %} | Page {{ articles_page.number }}{% endif %}{% endblock %}
 {% block sitename %}
     <h1 class="title is-1 is-spaced">{{ SITENAME }}</h1>
     <h4 class="subtitle is-4">{{ SITESUBTITLE }}</h4>
diff --git a/libretube-theme/templates/page.html b/libretube-theme/templates/page.html
index 1f769a2..47db027 100644
--- a/libretube-theme/templates/page.html
+++ b/libretube-theme/templates/page.html
@@ -2,25 +2,36 @@
 
 {% block html_lang %}{{ page.lang }}{% endblock%}
 
-{% block extra_head %}
+{% block head %}
+    {% block title %}
+        <title>{{ page.title }} - {{SITENAME}}</title>
+    {% endblock %}
     {% import 'translations.html' as translations with context %}
     {% if translations.entry_hreflang(page) %}
         {{ translations.entry_hreflang(page) }}
     {% endif %}
-    <meta name="author" content="{{ author }}">
-{% endblock %}
-
-{% block title %}{{ page.title }}{% endblock %}
-
-{% block head %}
     {{ super() }}
-
     {% if page.styles %}
         {% for style in page.styles %}
             {{ style }}
         {% endfor %}
     {% endif %}
-
+    {% block seo %}
+        <!-- Meta Page -->
+        <meta name="description" content="{{ SITENAME }} &ndash; {{ SITESUBTITLE }}"/>
+        <meta name="author" content="{{ page.author }}"/>
+        <!-- OpenGraph -->
+        <meta property="og:type" content="article"/>
+        <meta property="og:title" content="{{ page.title }}"/>
+        <meta property="og:description" content="{{ SITESUBTITLE }}"/>
+        <meta property="og:site_name" content="{{ SITENAME }}"/>
+        <meta property="og:url" content="{{ SITEURL }}/{{ page.url }}"/>
+        <!-- Twitter -->
+        <meta name="twitter:card" content="summary"/>
+        <meta name="twitter:title" content="{{ page.title }}"/>
+        <meta name="twitter:description" content="{{ SITESUBTITLE }}"/>
+        <meta name="twitter:url" content="{{ SITEURL }}/{{ page.url }}"/>
+    {% endblock %}
 {% endblock head %}
 
 {%- block content -%}
diff --git a/libretube-theme/templates/period_archives.html b/libretube-theme/templates/period_archives.html
index 94b382a..3ff1ca2 100644
--- a/libretube-theme/templates/period_archives.html
+++ b/libretube-theme/templates/period_archives.html
@@ -1,5 +1,19 @@
 {% extends "base.html" %}
 
+{% block head %}
+    {% block title %}
+        {% set len_period = period|length %}
+        {%- if len_period == 1 -%}
+            <title>{{ _('Archivos de %(año)d', año=period[0]) }} - {{SITENAME}}</title>
+        {%- elif len_period == 2 -%}
+            <title>{{ _('Archivos de %(mes)s de %(año)d', año=period[0], mes=period[1]) }} - {{SITENAME}}</title>
+        {%- elif len_period == 3 -%}
+            <title>{{ _('Archivos del %(dia)d de %(mes)s de %(año)d', año=period[0], mes=period[1], dia=period[2]) }} - {{SITENAME}}</title>
+        {%- endif -%}
+    {% endblock %}
+    {{ super() }}
+{% endblock %}
+
 {% block menu_header %}{% endblock menu_header %}
 
 {% block content %}