Fix and refactor website meta tags for better SEO and social media previews

This commit is contained in:
Keavon Chambers
2024-05-10 04:17:44 -07:00
parent 0c50d91516
commit d0c493cdb6
14 changed files with 121 additions and 97 deletions
+30 -30
View File
@@ -1,17 +1,17 @@
{% extends "base.html" %}
{% block title %}{% set this = section | default(value = page) %}{{ this.title }}{% endblock title %}
{%- block head -%}{%- set page = page | default(value = section) -%}
{%- set title = page.title -%}
{%- set meta_article_type = true -%}
{%- set meta_description = page.extra.summary | default(value = page.content | striptags | safe | linebreaksbr | replace(from = "<br>", to = " ") | replace(from = " ", to = " ") | trim | truncate(length = 200)) -%}
{%- set css = ["book.css"] -%}
{%- set js = ["book.js"] -%}
{%- endblock head -%}
{% block head %}
<link rel="stylesheet" href="/book.css">
<script src="/js/book.js"></script>
{% endblock head %}
{% block content %}
{% set this = section | default(value = page) %}
{%- block content -%}{%- set page = page | default(value = section) -%}
{# Search this page-or-section's ancestor tree for a section that identifies itself as a book, and save it to a `book` variable #}
{% for ancestor_path in this.ancestors | concat(with = this.relative_path) %}
{% for ancestor_path in page.ancestors | concat(with = page.relative_path) %}
{# Get the ancestor section from this ancestor path string #}
{% if ancestor_path is ending_with("/_index.md") %}
{% set potential_book = get_section(path = ancestor_path) %}
@@ -44,23 +44,23 @@
</svg>
</button>
<ul>
<li class="title{% if current_path == book.path %} active{% endif %}"><a href="{{ book.path }}" title="{{ book.title }}">{{ book.title }}</a></li>
<li class="title{% if current_path == book.path %} active{% endif %}"><a href="{{ book.path | safe }}" title="{{ book.title | safe }}">{{ book.title }}</a></li>
</ul>
{% for chapter in chapters %}
<ul>
<li class="chapter{% if current_path == chapter.path %} active{% endif %}"><a href="{{ chapter.path }}" title="{{ chapter.title }}">&raquo; {{ chapter.title }}</a></li>
<li class="chapter{% if current_path == chapter.path %} active{% endif %}"><a href="{{ chapter.path | safe }}" title="{{ chapter.title | safe }}">&raquo; {{ chapter.title }}</a></li>
{% set_global flat_pages = flat_pages | concat(with = chapter) %}
{% if chapter == this %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %}
{% if chapter == page %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %}
{% if chapter.pages %}
{% for page in chapter.pages | sort(attribute = "extra.order") %}
{% for chapter_page in chapter.pages | sort(attribute = "extra.order") %}
{% set_global flat_pages = flat_pages | concat(with = page) %}
{% if page == this %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %}
{% set_global flat_pages = flat_pages | concat(with = chapter_page) %}
{% if chapter_page == page %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %}
<li {% if current_path == page.path %}class="active"{% endif %}><a href="{{ page.path }}" title="{{ page.title }}">&raquo; {{ page.title }}</a></li>
<li {% if current_path == chapter_page.path %}class="active"{% endif %}><a href="{{ chapter_page.path | safe }}" title="{{ page.title | safe }}">&raquo; {{ chapter_page.title }}</a></li>
{% endfor %}
@@ -81,10 +81,10 @@
<rect x="2" y="11" width="20" height="2"/>
</svg>
</button>
<h1>{{ this.title }}</h1>
<h1>{{ page.title }}</h1>
</div>
<article>
{{ this.content | safe }}
{{ page.content | safe }}
</article>
<hr />
@@ -94,7 +94,7 @@
{% set prev = flat_pages | nth(n = flat_index_of_this - 1) %}
{% endif %}
{% if prev %}
<a href="{{ prev.path }}" title="{{ prev.title }}">
<a href="{{ prev.path | safe }}" title="{{ prev.title | safe }}">
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" />
<polygon points="24.71,10.71 23.29,9.29 12.59,20 23.29,30.71 24.71,29.29 15.41,20" />
@@ -109,7 +109,7 @@
{% set next = flat_pages | nth(n = flat_index_of_this + 1) %}
{% endif %}
{% if next %}
<a href="{{ next.path }}" title="{{ next.title }}">
<a href="{{ next.path | safe }}" title="{{ next.title | safe }}">
{{ next.title }}
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" />
@@ -124,29 +124,29 @@
<aside class="contents">
<ul>
<li class="title">
<a href="#" title="{% if this.toc | length > 0 %}Contents (top ↑){% else %}Back to top ↑{% endif %}">
{% if this.toc | length > 0 %}Contents<span> (top ↑)</span>{% else %}Back to top ↑{% endif %}
<a href="#" title="{% if page.toc | length > 0 %}Contents (top ↑){% else %}Back to top ↑{% endif %}">
{% if page.toc | length > 0 %}Contents<span> (top ↑)</span>{% else %}Back to top ↑{% endif %}
</a>
</li>
</ul>
<ul>
{% for depth_1 in this.toc %}
<li><a href="#{{ depth_1.id }}" title="{{ depth_1.title }}">{{ depth_1.title }}</a></li>
{% for depth_1 in page.toc %}
<li><a href="#{{ depth_1.id }}" title="{{ depth_1.title | safe }}">{{ depth_1.title }}</a></li>
{% for depth_2 in depth_1.children %}
<ul>
<li><a href="#{{ depth_2.id }}" title="{{ depth_2.title }}">{{ depth_2.title }}</a></li>
<li><a href="#{{ depth_2.id }}" title="{{ depth_2.title | safe }}">{{ depth_2.title }}</a></li>
{% for depth_3 in depth_2.children %}
<ul>
<li><a href="#{{ depth_3.id }}" title="{{ depth_3.title }}">{{ depth_3.title }}</a></li>
<li><a href="#{{ depth_3.id }}" title="{{ depth_3.title | safe }}">{{ depth_3.title }}</a></li>
{% for depth_4 in depth_3.children %}
<ul>
<li><a href="#{{ depth_4.id }}" title="{{ depth_4.title }}">{{ depth_4.title }}</a></li>
<li><a href="#{{ depth_4.id }}" title="{{ depth_4.title | safe }}">{{ depth_4.title }}</a></li>
{% for depth_5 in depth_4.children %}
<ul>
<li><a href="#{{ depth_5.id }}" title="{{ depth_5.title }}">{{ depth_5.title }}</a></li>
<li><a href="#{{ depth_5.id }}" title="{{ depth_5.title | safe }}">{{ depth_5.title }}</a></li>
{% for depth_6 in depth_5.children %}
<ul>
<li><a href="#{{ depth_6.id }}" title="{{ depth_6.title }}">{{ depth_6.title }}</a></li>
<li><a href="#{{ depth_6.id }}" title="{{ depth_6.title | safe }}">{{ depth_6.title }}</a></li>
</ul>
{% endfor %}
</ul>
@@ -161,4 +161,4 @@
</ul>
</aside>
</section>
{% endblock content %}
{%- endblock content -%}