LinMinquan's Blog

Experience technology to change life

Hugo add meta for Facebook and Twitter share link preview

After analyze a example link that can preview in Facebook & Twitter and search Google, I found it just need to add some meta on blog post’s html header. 

One guy give an example code below.

<!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 }} · {{ .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>

His blog post about this solution: 
https://vietlq.github.io/2017/04/30/access-hugo-page-variables/

His github gist about this code:
 https://gist.github.com/vietlq/d1c7ecfb20ce7beac4a7f4df746c797c

Reference: 
<a rel=“noreferrer noopener” aria-label=“Reference:  https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary.html https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html

 (opens in a new tab)” href=“https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary.html" target=”_blank”>https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary.html
<a rel=“noreferrer noopener” aria-label=“Reference:  https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary.html https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html

 (opens in a new tab)” href=“https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html" target=”_blank”>https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html
<a href=“https://cards-dev.twitter.com/validator" target=”_blank” rel=“noreferrer noopener” aria-label=“Reference:  https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary.html https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html https://cards-dev.twitter.com/validator

 (opens in a new tab)“>https://cards-dev.twitter.com/validator


Share