Twitter \ OG \ Header Images [Feature Request]

[infominer33]

First of all, let me say THANK YOU, for this Gorgeous Indieweb enabled Hugo Theme! I came over from Jekyll just to get here :)

• https://infominer.id/web-work/
• https://github.com/infominer33/web-work

Is your feature request related to a problem? Please describe.

Twitter \ OG Cards are not properly populating.

I also would love the option to include a feature image both on the homepage and in the post.

Describe the solution you'd like

• https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started

I'm new to hugo, so there's likely a popular plugin or include I can insert, but I haven't found one to work, yet.

Describe alternatives you've considered
I'm open to anything, I'll be exploring the question more deeply, but wanted to say thank you as much as ask for a feature request.

Additional context

• https://infominer.id/web-work/tags/indieweb/

Thanks again! Look forward to getting to know your theme, and indieweb better!

[AngeloStavrow]

Thanks for opening this! You're right that generally speaking, meta tags for the site aren't populating properly — I recently discovered https://www.heymeta.com/ as a good way to verify this working on another site, and there are a bunch of things that could be improved.

[infominer33]

yes, I've been discovering that there is code for that, but haven't examined it closely.

I'm pretty new to static site development, so I'd eventually dig in to see what could be done with it. I'm still settling into the feel for Hugo.

Just lately I've been seeing what indieweb themes are available for whatever SSG, and seeing where they're at collectively... and let my interest in indieweb drive my heaviest habit: independent web-publishing.

I'm most excited with learning how to make use of all the awesome indieweb markup you ensure each page is wrapped with :D

[infominer33]

So, would probably need some tweaking for hugo...

However, I just dropped this include into
Jekyll-Indieweb and it works great!

• Minimal Mistakes SEO include
• Associated (not extremely thorough) documentation

Ultimately I will try and see about integrating the header image functionality like Minimal mistakes does, also...

for header images it simply uses the whole width of the page between the header and the content.

[AngeloStavrow]

Ah that seems pretty straightforward to port, nice find!

[infominer33]

Ok, Now I have figured out twitter cards which choose the image from the config file (if params:images is set) and\or the page level if images variable provided in the front matter:

    <!-- Twitter Cards-->
    <!-- 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="{{ with .Params.images }}{{ . }}{{ else }}{{ .Site.Params.images }}{{ end }}"/>
    <!-- Twitter Card data -->
    <meta name="twitter:title" content="{{ .Title }}"/>
    <meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}"/>
    {{ with .Site.Social.twitter }}<meta name="twitter:site" content="@{{ . }}"/>{{ end }}
    {{ with .Site.Social.twitter_domain }}<meta name="twitter:domain" content="{{ . }}"/>{{ end }}

this is now live on my site:

web-work-tools/indieweb@1cc418a

which can be verified by checking the source of https://web-work.tools/indieweb and that of https://web-work.tools/indieweb/resources

I didn't include in a pull request, since this example assumes you have title description and image set in the params of config.yml

It's simple and gets the job done

[infominer33]

I just wanted to include, because it's not obvious if you don't visit the site, but I didn't just pass that image variable through to the og_image, but also have set a header image on each page.

I don't know enough CSS to make this proper, but I'm happy with it for now.. I feel like I got quite a lot of value from adding a few simple lines of code.

Example on a Post

On the Home Page