feat: add og tags for nicer previews #10

Manually merged
ryan merged 7 commits from feat/add-og-tags into main 2024-07-10 21:15:27 +00:00
3 changed files with 86 additions and 29 deletions

View File

@ -21,9 +21,10 @@
title: Distrust title: Distrust
email: lance@distrust.co email: lance@distrust.co
description: >- # this means to ignore newlines until "baseurl:" description: >- # this means to ignore newlines until "baseurl:"
Trust Nothing Understand and mitigate security threats others won't see coming.
baseurl: "" # the subpath of your site, e.g. /blog baseurl: "" # the subpath of your site, e.g. /blog
url: "https://distrust.co" # the base hostname & protocol for your site, e.g. http://example.com url: "https://distrust.co" # the base hostname & protocol for your site, e.g. http://example.com
banner: "https://distrust.co/assets/base/distrust-logo.png"
header_pages: header_pages:
- index.md - index.md
@ -35,7 +36,7 @@ header_pages:
style: dark # dark (default), light or hacker style: dark # dark (default), light or hacker
listen_for_clients_preferred_style: false # false (default) or true listen_for_clients_preferred_style: false # false (default) or true
footer: '2023 Distrust, LLC' footer: '2024 Distrust, LLC'
# Build settings # Build settings
theme: jekyll-theme-console theme: jekyll-theme-console

View File

@ -6,38 +6,94 @@
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
<title>{{ page.title }}</title> <title>{{ page.title }}</title>
<meta content="{{ site.title }}" property="og:site_name" />
anton marked this conversation as resolved Outdated
Outdated
Review

{{ page.title }}

{{ page.title }}
anton marked this conversation as resolved Outdated
Outdated
Review

Everything that you have hardcoded here should instead be pulled from the config. Here's a jekyll theme that does what you're looking for https://github.com/sujaykundu777/devlopr-jekyll/blob/master/_includes/head.html

Everything that you have hardcoded here should instead be pulled from the config. Here's a jekyll theme that does what you're looking for https://github.com/sujaykundu777/devlopr-jekyll/blob/master/_includes/head.html
{% if page.robots %} {% if page.noindex %}
<meta name="robots" content="{{page.robots}}" /> <meta name="robots" content="noindex" />
{% endif %} {% if page.title %}
<meta content="{{ page.title }}" property="og:title" />
<meta content="article" property="og:type" />
{% else %}
<meta content="{{ site.banner }}" property="og:image" />
<meta content="{{ site.title }}" property="og:title" />
<meta content="website" property="og:type" />
anton marked this conversation as resolved Outdated
Outdated
Review

You'll also need to add the Twitter specific tags

   <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:description" content=" ">
    <meta name="twitter:title" content="{{ page.title }}">
    <meta name="twitter:site" content="">
    <meta name="twitter:image" content="">
You'll also need to add the Twitter specific tags ```html <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:description" content=" "> <meta name="twitter:title" content="{{ page.title }}"> <meta name="twitter:site" content=""> <meta name="twitter:image" content=""> ```
{% endif %} {% if page.summary %}
<meta content="{{ page.summary }}" property="og:description" />
{% else %}
<meta content="{{ site.description }}" property="og:description" />
{% endif %} {% if page.url %}
<meta content="{{ site.url }}{{ page.url }}" property="og:url" />
{% endif %} {% if page.date %}
<meta
content="{{ page.date | date_to_xmlschema }}"
property="article:published_time"
/>
<meta content="{{ site.url }}/about/" property="article:author" />
{% endif %} {% if page.thumbnail %}
<meta content="{{ site.url }}{{ page.thumbnail }}" property="og:image" />
{% endif %} {% if page.categories %} {% for category in page.categories
limit:1 %}
<meta content="{{ category }}" property="article:section" />
{% endfor %} {% endif %} {% if page.tags %} {% for tag in page.tags %}
<meta content="{{ tag }}" property="article:tag" />
{% endfor %} {% endif %}
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary" />
<!--<meta name="twitter:site" content="@{{ site.share.twitter_username }}" />-->
<!--<meta name="twitter:creator" content="@{{ site.share.twitter_username }}" />-->
{% if page.title %}
<meta name="twitter:title" content="{{ page.title }}" />
{% else %}
<meta name="twitter:title" content="{{ site.title }}" />
{% endif %} {% endif %}
<link rel="stylesheet" type="text/css" href="{{ "/assets/main.css" | relative_url }}"> {% if page.url %}
<link rel="stylesheet" type="text/css" href="{{ "/assets/main-dark.css" | relative_url }}"> <meta name="twitter:url" content="{{ site.url }}{{ page.url }}" />
{% endif %} {% if page.summary %}
<meta name="twitter:description" content="{{ page.summary }}" />
{% else %}
<meta name="twitter:description" content="{{ site.description }}" />
{% endif %} {% if page.header-img %}
<meta
name="twitter:image:src"
content="{{ site.url }}{{ page.thumbnail }}"
/>
{% endif %}
<!-- "Really, there is nothing interesting to see here. It is a static website. -->
<!-- Here is the terraform code that deployed it, and here is the site source repo. -->
<!-- If you find anything interesting or want to talk to us, reach out via our /contact page!" -->
<!-- https://git.distrust.co/public/stack -->
<!-- https://git.distrust.co/public/website -->
<!-- mobile menu content --> {% if page.robots %}
<div class="menu-content" style="display: none"> <meta name="robots" content="{{page.robots}}" />
<div class="inner-menu-content"> {% endif %}
<div>
<a href="/index.html">Home</a> <link rel="stylesheet" type="text/css" href="{{ "/assets/main.css" | relative_url }}">
</div> <link rel="stylesheet" type="text/css" href="{{ "/assets/main-dark.css" | relative_url }}">
<div>
<a href="/about.html">About</a> <!-- "Really, there is nothing interesting to see here. It is a static website. -->
</div> <!-- Here is the terraform code that deployed it, and here is the site source repo. -->
<div> <!-- If you find anything interesting or want to talk to us, reach out via our /contact page!" -->
<a href="/services.html">Services</a> <!-- https://git.distrust.co/public/stack -->
</div> <!-- https://git.distrust.co/public/website -->
<div> <!-- mobile menu content -->
<a href="/tools.html">Tools</a>
</div> <div class="menu-content" style="display: none">
<div> <div class="inner-menu-content">
<a href="/contact.html">Contact</a> <div>
</div> <a href="/index.html">Home</a>
</div>
<div>
<a href="/about.html">About</a>
</div>
<div>
<a href="/services.html">Services</a>
</div>
<div>
<a href="/tools.html">Tools</a>
</div>
<div>
<a href="/contact.html">Contact</a>
</div> </div>
</div> </div>
</div>
</head> </head>

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB