Adding social media tags to the <head> section of your website helps Facebook and Twitter know how to show your page when someone shares it. For example, what image to use and what the title should be. Hugo themes will often come with these tags added already - but if they don’t we wanted to look at how you can add them.
The first step is we are going to add our Twitter handle into our config file. This will enable the Twitter section in the next step.
1
2
[params]twitter="makewithhugo"
Your theme’s head element
The second step is to add this code into your theme - where ever the <head> element is (it changes on each theme).
Note: This uses the featured_image data from each post, if you have a different way of specifying the image, you’ll want to change this to what you already use.
{{ if isset .Site.Params "twitter" }}
<metaname="twitter:card"content="{{ if .Params.featured_image }}summary_large_image{{else}}summary{{end}}"><metaname="twitter:title"content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} · {{ .Site.Title }}{{ end }}"><metaname="twitter:description"content="{{ if .IsHome }}{{ .Description }}{{ else }}{{ htmlEscape .Summary }}{{ end }}"><metaname="twitter:site"content="{{ .Site.Params.twitter }}"><metaname="twitter:creator"content="{{ .Site.Params.twitter }}"> {{ if .Params.featured_image }}<metaname="twitter:image"content="{{ .Params.featured_image }}">{{ end }}
{{ end }}
<metaproperty="og:locale"content="en_GB"><metaproperty="og:type"content="{{ if .IsPage }}article{{ else }}website{{ end }}"><metaproperty="og:title"content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} · {{ .Site.Title }}{{ end }}"><metaproperty="og:description"content="{{ if .IsHome }}{{ .Description }}{{ else }}{{ htmlEscape .Summary }}{{ end }}"><metaproperty="og:url"content="{{ .Permalink }}"><metaproperty="og:site_name"content="{{ .Site.Title }}">{{ if .Params.featured_image }}
<metaproperty="og:image"content="{{ .Params.featured_image }}"><metaproperty="og:image:secure_url"content="{{ .Params.featured_image }}">{{- end }}
{{ range .Params.categories }}<metaproperty="article:section"content="{{ . }}">{{ end }}
{{ if isset .Params "date" }}<metaproperty="article:published_time"content="{{ (time .Date).Format "2006-01-02T15:04:05Z"}}">{{ end }}
Output
If everything’s setup correctly, it should end up looking like this - for example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<metaname="twitter:card"content="summary"><metaname="twitter:title"content="Add Social Media Meta Tags with Hugo"><metaname="twitter:description"content="Adding social media tags to the..."><metaname="twitter:site"content="eddturtle"><metaname="twitter:creator"content="eddturtle"><metaproperty="og:locale"content="en_GB"><metaproperty="og:type"content="article"><metaproperty="og:title"content="Add Social Media Meta Tags to with Hugo"><metaproperty="og:description"content="Adding social media tags to the..."><metaproperty="og:url"content="https://makewithhugo.com/social-meta-tags/"><metaproperty="og:site_name"content="Make with Hugo"><metaproperty="article:section"content="Tutorials"><metaproperty="article:published_time"content="2021-01-01T09:00:00Z">
Test
Once you’ve made these changes, you can check them to make sure they are correct with the links below.
Edd is a PHP and Go developer who enjoys blogging about his experiences, mostly about creating and coding new things he's working on and is a big beliver in open-source and Linux.
Using Emoji In Posts & Themes
–
Emojis have been named word of the year and are seen every day in modern culture. We use them every day on our messaging apps, emails and … err blogs!
This post is about how you can enable and use them in both your Hugo themes and, in general, when writing posts.
Using Emojis in Themes To use them within your theme, there’s a built in function which turns text in emojis.
Change a URL on a Post (While Preserving SEO)
–
If you use Hugo, we’ve all been there: create a post, give it a url - spell something wrong in the url, doh! This post hopes to explain how you can change the URL of a post, while preserving the SEO benefits associated with it.
We can do this, by changing the URL on the post to what we want then setting up an alias for the old url. This was existing traffic and Google still know what’s going on and will treat it as the same page.
Migrate Wordpress to Hugo
–
Wordpress is a fantastically popular blogging platform, but judging by the fact you are here, you’re looking to move to Hugo (great choice!)
The software we’ve used in the past to do this for us is called wordpress-to-hugo-exporter (does as it’s name suggests). This will essentially convert the database posts saved into markdown files which you can use in Hugo and with your theme of choice.
View on Github How to It’s important to note this works as a Wordpress plugin, so if you can’t install plugins it may not work for you.
