search

nhoizey / pack11ty

An heavily opinionated Eleventy template project with Sass
https://pack11ty.dev/
MIT License
197 stars 12 forks source link

Add documentation about SEO and opengraph features #16

Open nhoizey opened 4 years ago

nhoizey commented 4 years ago
inetbiz commented 2 years ago

I start with the basics and do includes from another template to add Twitter.

Default OGP tags

<html prefix="og: https://ogp.me/ns#">

<!-- Open Graph Tags -->
  <meta property="og:title" {% if page.title %}content="{{ page.title | strip_html | strip_newlines | truncate: 95 }}"{% else %}content="{{ site.title | strip_html | strip_newlines | truncate: 95 }}"{% endif %}>

  <meta property="og:site_name" content="{{ site.ogp.name }}">

  <meta property="og:description"{% if page.excerpt %} content="{{ page.excerpt | strip_html | strip_newlines }}" {% else %}content="{{ site.description | strip_html | strip_newlines | truncate: 200 }}" {% endif %}>

  <meta property="og:url" content="{{site.url}}{{ page.url }}">

  <meta property="og:locale" content="{{ site.local }}"><!-- language_TERRITORY ( en_US ) -->

  <meta property="og:image" content="{{ site.url }}/assets/images/main/{{page.featured_image}}">
  <meta property="og:image:width" content="1600">
  <meta property="og:image:height" content="800">
  <meta property="og:image:alt" content="{{ page.title | strip_html | strip_newlines }}">

Article Types

Add this namespace to <html prefix="og: https://ogp.me/ns# https://ogp.me/ns/article#">

  <meta property="og:type" content="og:article">
  <meta property="article:published_time" content="{{ page.date }}">
  <meta property="article:modified_time" content="{{ page.last_modified_at }}">
  <meta property="article:section" content="{{page.categories | join: ' '|replace: "-", " " | capitalize_all }}">
<!-- Set this up as an iteration loop. Same line with different content. See https://ogp.me/#array -->
  <meta property="article:tag" content="{{ item.tag }}">
  <meta property="article:tag" content="{{ item.tag }}">

Cavetas for author

I have not figured a way to add this into an array? OGP says article:author - profile array - Writers of the article.

Profile Array

profile - Namespace URI: https://ogp.me/ns/profile#
profile:first_name - string - A name normally given to an individual by a parent or self-chosen.
profile:last_name - string - A name inherited from a family or marriage and by which the individual is commonly known.
profile:username - string - A short unique string to identify them.
profile:gender - enum(male, female) - Their gender.

Perhaps the article:author meta can be an array of Links that lead to a profile page with the profile OG namespace? It needs to be tested!

Twitter OGP


  <meta name="twitter:site" content="@{{ item2.name }}">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:creator" content="@{{ item2.name }}">
  <meta name="twitter:title" content="{{page.title | truncate: 70}} - {{site.title | truncate: 70 }}">
  <meta name="twitter:description"{% if page.twitdesc %} content="{{ page.twitdesc | strip_html | strip_newlines | truncate: 200 }}" {% else %}content="{{ site.description | strip_html | strip_newlines | truncate: 200 }}"{% endif %}>
 <meta name="twitter:image" content="{{ site.url }}/assets/images/main/{{page.featured_image}}">
 <meta name="twitter:image:alt" content="{{ page.title | strip_html | strip_newlines }}">