Hugo builtin templates

support
1

Hi

I wanted to setup my fb opengraph, twitter cards and schema for my hugo theme site. After some research I came across these:

{{ template "_internal/opengraph.html" . }}
{{ template "_internal/google_news.html" . }}
{{ template "_internal/schema.html" . }}
{{ template "_internal/twitter_cards.html" . }}

They are pretty amazing and did a great job at picking up most of the fields correctly on the right pages. I just have a few issue.

I would like to add the schema images as well.

I saw this line:

{{ with .Params.images }}
<!-- Twitter summary card with large image must be at least 280x150px -->
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:image:src" content="{{ index . 0 | absURL }}"/>
{{ else }}
  <meta name="twitter:card" content="summary"/>
{{ end }}

and tried to add images field to my front matter but that doesn’t work.

All my blog posts have a image that I set as meta_img and alt as meta_img_dsc for the alt text.

How can I add these images to the twitter cards, schema, and fb osg?

Also one more question, on my theme my content pages pick up the twitter cards, fb osg data but on my index pages the only the fb osg data is sorta picked up but since the index pages are controlled via templates and i have my templates defined in such a way that templates include a head.html partial.

Do I also have to setup a new partial where I can put custom data in my secion/sectionfoldername.html html header for twitter cards and osg data?

2

I’m on my phone and not looking at the code, @blubee, but I can infer from the syntax that the images param should be an array. If you’re currently going with images: my-image.jpg, try something more like images: [my-image.jpg] and see if that works. The built-in partial is looking for an index 0, which tells me it’s expecting an array rather than a single value…

3

Also, w/r/t your question for changing metadata on “index pages” (i.e., list pages), look at the docs for the new {{ block }} keyword. You can set the defaults to show metadata for single pages and then re-define a block on list pages.

4

@rdwatters no, actually that code is built into hugo executable. my front matter has meta_img and meta_img_dsc that I use for the post image and alt text.

I would just like to use the same image as the og:image and twitter:image content so that if I share a blog post, it will have a nice image to go along with it.

5

Right, I know that:wink:. If the twitter cards are pulling from a different param, and you don’t want to change your front matter (you could do this via bash/node script or even a simple find/replace in your text editor), I would just create your own partial that does the same thing. So, for example, create the following at layouts/partials/meta_twitter.html.

<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="@{{.Site.Params.Twitter}}">
<meta property="twitter:title" content="{{if .Title }}{{.Title}}{{else}}{{.Site.Title}}{{end}}">
<meta property="twitter:image" content="{{ if .Params.meta_img }}{{.Site.BaseURL}}/assets/images/{{.Params.meta_img}}{{ else }}{{.Site.BaseURL}}/assets/images/{{.Site.Params.DefaultSocialImage}}{{ end }}">
<meta property="twitter:description" content="{{ if .IsHome }}{{ .Site.Params.SiteDescription }}{{ else if .IsPage }}{{ .Description }}{{ else if .IsNode }}{{ index .Site.Data.sectioninfo .Title }}{{ end }}">

Then include the new partial in your <head> like so:

<head>
{{ partial "meta_twitter.html" . }}
</head>

Keep in mind that the above is what I’m using on my site, so there are some variables you’ll need to create in your config.toml as well:


[[params]]
    DefaultSocialImage = "mydefaultsocialimage.jpg"
    SiteDescription = "Here is the default description for my site"
    Twitter = "blubee"

Also, create a file at data/sectioninfo.yml and do something like the following:

Blog: Here is the description for the blog section.
Projects: Here is the description for the projects section.

Obviously, name the sections in sectioninfo.yml after your own sections and what you want to show on the list pages and fill in your own appropriate values in the config.toml (NB, there is no @ in the Twitter handle with the above partial. You can also set default values and use blocks, but I’m hoping the above is the easiest solution.

6

thank you @rdwatters I implemented the fb osg, twitter cards and google plus like this.

The more I use hugo, the more I like it.