Skip to content

Instantly share code, notes, and snippets.

@vietlq
Last active March 10, 2022 05:05
Show Gist options
  • Save vietlq/d1c7ecfb20ce7beac4a7f4df746c797c to your computer and use it in GitHub Desktop.
Save vietlq/d1c7ecfb20ce7beac4a7f4df746c797c to your computer and use it in GitHub Desktop.
Hugo Partial Template to render Open Graph & Twitter Card meta tags
<!DOCTYPE html>
<html lang="en">
<head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article# website: http://ogp.me/ns/website#">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="title" content="{{ .Title }} | {{ .Site.Title }}">
<meta name="description" content="{{ .Description }}">
<!-- Start of Open Graph -->
<meta property="og:title" content="{{ .Title }}">
{{ if .IsPage }}
<meta property="og:type" content="article">
<meta property="article:published_time" content="{{ .Date.Format "2006-01-02" }}">
{{ else }}
<meta property="og:type" content="website">
{{ end }}
<meta property="og:description" content="{{ .Description }}">
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:site_name" content="{{ .Site.Title }}">
{{ if .Params.thumbnail }}
<meta property="og:image" content="{{ .Site.BaseURL }}{{ .Params.thumbnail }}">
{{ end }}
{{ range .Params.tags }}
<meta property="og:tags" content="{{ . }}">
{{ end }}
<!-- End of Open Graph -->
<!-- Start of Twitter -->
{{ if .Site.Params.twitter_card_whitelisted }}
{{ if .Params.twitter_summary }}
<meta property="twitter:card" content="{{ .Params.twitter_summary }}">
{{ else if .Description }}
<meta property="twitter:card" content="{{ .Description }}">
{{ else }}
<meta property="twitter:card" content="{{ .Title }}">
{{ end }}
{{ end }}
<meta property="twitter:description" content="{{ .Description }}">
<meta property="twitter:title" content="{{ .Title }}">
{{ if .Params.thumbnail }}
<meta property="twitter:image" content="{{ .Site.BaseURL }}{{ .Params.thumbnail }}">
{{ end }}
<!-- End of Twitter -->
{{ .Hugo.Generator }}
<title>{{ .Title }} &middot; {{ .Site.Title }}</title>
{{ range .Params.css }}
<link rel="stylesheet" href="{{ . }}">
{{ end }}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
{{ if .Params.highlight }}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/styles/default.min.css">
{{ end }}
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css">
{{ if .Site.RSSLink }}
<link href="{{ .Site.RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
{{ end }}
{{ if isset .Site.Params "favicon" }}
<link rel="icon" href="{{ .Site.BaseURL }}{{ .Site.Params.favicon }}" />
{{ end }}
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment