Added SEO tags

This commit is contained in:
carpetscheme 2020-09-13 15:08:54 +02:00
parent 891265511f
commit 88dbe89784
6 changed files with 64 additions and 22 deletions

View file

@ -7,6 +7,7 @@ Some fun facts about the theme:
* Perfect score on Google's Lighthouse audit * Perfect score on Google's Lighthouse audit
* Only ~600 bytes of CSS * Only ~600 bytes of CSS
* No JavaScript * No JavaScript
* Now with SEO!
Demo: [quirky-perlman-34d0da.netlify.com](https://quirky-perlman-34d0da.netlify.com) Demo: [quirky-perlman-34d0da.netlify.com](https://quirky-perlman-34d0da.netlify.com)
@ -56,18 +57,6 @@ description = "for different folks"
``` ```
### Sass
Styles are compiled from sass and imported inline to the header :zap:
You can overide the styles by enabling sass compilation in the config:
```toml
compile_sass = true
```
...and placing a replacement `style.scss` file in your sass folder.
### Footer-menu ### Footer-menu
Set a field in `extra` with a key of `footer_links`: Set a field in `extra` with a key of `footer_links`:
@ -76,7 +65,7 @@ Set a field in `extra` with a key of `footer_links`:
footer_links = [ footer_links = [
{url = "$BASE_URL/about", name = "About"}, {url = "$BASE_URL/about", name = "About"},
{url = "$BASE_URL/rss.xml", name = "RSS"}, {url = "$BASE_URL/atom.xml", name = "RSS"},
{url = "https://google.com", name = "Google"}, {url = "https://google.com", name = "Google"},
] ]
``` ```
@ -90,16 +79,31 @@ Create pages such as `$BASE_URL/about` by placing them in a subfolder of the con
path = "about" path = "about"
``` ```
### Author ### SEO
To add author name to the head meta-data, set an `author` field in `extra`: SEO header tags are enabled by default. Most fields are picked up from the page data, but you can set the `author` and for the `og:image` tag provide the path to an image.
```toml ```toml
[extra] [extra]
author = "Grant Green" author = "Grant Green"
ogimage = "Greenery.png"
``` ```
To disable SEO set field `seo` in `extra` to `false`.
### Sass
Styles are compiled from sass and imported inline to the header :zap:
You can overide the styles by enabling sass compilation in the config:
```toml
compile_sass = true
```
...and placing a replacement `style.scss` file in your sass folder.
### Netlify ### Netlify
Deployed on netlify? Add a link in the footer by setting `netlify` in `extra` as `true`. Deployed on netlify? Add a link in the footer by setting `netlify` in `extra` as `true`.
@ -111,11 +115,7 @@ netlify = true
``` ```
## Original ## Original
This template is based on the Jekyll template [Light Speed Jekyll](https://github.com/bradleytaunt/lightspeed) by **Bradley Taunt**: This template is based on the Jekyll template [Light Speed Jekyll](https://github.com/bradleytaunt/lightspeed) by Bradley Taunt.
- <https://github.com/bradleytaunt>
- <https://twitter.com/bradtaunt>
## License ## License

View file

@ -10,7 +10,10 @@ highlight_theme = "gruvbox-light"
[extra] [extra]
seo = true
author = "El Carpet" author = "El Carpet"
ogimage = "lightning.png"
netlify = true netlify = true
footer_links = [ footer_links = [

View file

@ -1,6 +1,8 @@
+++ +++
title = "Example of elements" title = "Example of elements"
description = "Post showcasing elements" description = "Post showcasing elements"
[extra]
image = "favicon.ico"
+++ +++
# h1 Heading # h1 Heading

BIN
static/lightning.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

View file

@ -9,13 +9,39 @@
<title>{% block title %}{{ config.title }} &middot; {{ config.description }}{% endblock title %}</title> <title>{% block title %}{{ config.title }} &middot; {{ config.description }}{% endblock title %}</title>
<meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}" /> <meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}" />
{% if config.extra.author %}<meta name="author" content="{{ config.extra.author }}" />{% endif %}
<link rel="shortcut icon" href="{{ get_url(path="favicon.ico") | safe }}" /> <link rel="shortcut icon" href="{{ get_url(path="favicon.ico") | safe }}" />
<link rel="alternate" type="application/atom+xml" title="RSS" href="{{ get_url(path="atom.xml") | safe }}"> <link rel="alternate" type="application/atom+xml" title="RSS" href="{{ get_url(path="atom.xml") | safe }}">
{% set data = load_data(path="public/style.css", format="plain") -%} {% set data = load_data(path="public/style.css", format="plain") -%}
<style>{{ data | safe }}</style> <style>{{ data | safe }}</style>
{% block seo -%}
{%- if config.extra.seo -%}
<meta property="og:site_name" content="{% block ogsitename %}{{config.title}}{% endblock ogsitename %}">
{% if config.extra.author -%}
<meta name="author" content="{{ config.extra.author }}" />
{%- endif %}
<meta property="og:title" content="{% block ogtitle %}{{config.title}}{% endblock ogtitle %}">
<meta property="og:description" content="{% block ogdesc %}{{config.description}}{% endblock ogdesc %}">
<meta property="og:url" content="{% block ogurl %}{{config.base_url | safe }}{% endblock ogurl %}">
<meta property="og:image" content="{% block ogimage %}{% if config.extra.ogimage %}{{ get_url(path=config.extra.ogimage) | safe }}{% endif %}{% endblock ogimage %}">
{% if page.date -%}
<meta property="og:type" content="article" />
<meta property="article:published_time" content="{{ page.date | date(format="%+") }}" />
{%- endif %}
{% if page.earlier -%}
<link rel="prev" href="{{ page.earlier.permalink | safe }}" />
{%- endif %}
{% if page.later -%}
<link rel="next" href="{{ page.later.permalink | safe }}" />
{%- endif %}
{%- endif -%}
{%- endblock seo -%}
{% block extra_head %} {% block extra_head %}
{% endblock extra_head %} {% endblock extra_head %}
@ -49,7 +75,7 @@
{% if config.extra.footer_links %} {% if config.extra.footer_links %}
<nav style="margin-bottom:1rem;" role="navigation"> <nav style="margin-bottom:1rem;" role="navigation">
{% for item in config.extra.footer_links %} {% for item in config.extra.footer_links %}
<a href="{{ item.url | safe | replace(from="$BASE_URL", to=config.base_url) }}">{{ item.name }}</a> <a href="{{ item.url | replace(from="$BASE_URL", to=config.base_url) | safe }}">{{ item.name }}</a>
{% if loop.last %}{% else %} {% if loop.last %}{% else %}
<span>&middot;</span> <span>&middot;</span>
{% endif %} {% endif %}

View file

@ -3,6 +3,17 @@
{% block title %}{{ page.title }} &middot; {{ config.title }}{% endblock title %} {% block title %}{{ page.title }} &middot; {{ config.title }}{% endblock title %}
{% block description %}{{ page.description | default(value=config.description) }}{% endblock description %} {% block description %}{{ page.description | default(value=config.description) }}{% endblock description %}
{% block ogtitle %}{{ page.title }}{% endblock ogtitle %}
{% block ogdesc %}{{ page.description }}{% endblock ogdesc %}
{% block ogurl %}{{ page.permalink | safe }}{% endblock ogurl%}
{% if page.extra.ogimage %}{% block ogimage %}hello! {% endblock ogimage %}{% endif %}
{% block ogimage -%}
{%- if page.extra.image -%}{{ get_url(path=page.extra.image) | safe }}
{%- elif config.extra.ogimage -%}{{ get_url(path=config.extra.ogimage) | safe }}
{%- endif -%}
{%- endblock ogimage %}
{% block content %} {% block content %}
<article> <article>
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>