[BUG] social media thumbnail image

bkalem commented 4 years ago

Describe the bug 描述你遇到的错误

social media image thumbnail doest not work for all post

this is tree for content and static

├───content
│   │   about.md
│   │   
│   └───posts
│           deployer-un-pod-sur-podman.md
│           from-docker-to-podman.md
│           installation-docker-ce-centos-8.md
│           installation-podman-centos-8.md

├───static
│   │   android-chrome-192x192.png
│   │   apple-touch-icon.png
│   │   browserconfig.xml
│   │   cover.png
│   │   favicon-16x16.png
│   │   favicon-32x32.png
│   │   favicon.ico
│   │   logo.png
│   │   mstile-150x150.png
│   │   safari-pinned-tab.svg
│   │   site.webmanifest
│   │   
│   └───images
│       ├───blog
│       │   ├───deployer-un-pod-sur-podman
│       │   │       deploy-pod-podman-preview.jpg
│       │   │       nextcloud-deployed.png
│       │   │       
│       │   ├───from-docker-to-podman
│       │   │       docker-images-storage-folder.png
│       │   │       docker_vs_podman.jpg
│       │   │       from-docker-to-podman-préview.jpg
│       │   │       from-docker-to-podman.png
│       │   │       root-user-docker.png
│       │   │       
│       │   ├───installation-docker-centos-8
│       │   │       docker-components-formini.png
│       │   │       installation-docker-centos-8-image-preview.jpg
│       │   │       preview.jpg
│       │   │       
│       │   └───installation-podman-centos-8
│       │           buildah-podman-skopeo.png
│       │           installation-podman-centos-8-image.jpg
│       │           
│       └───page
│           └───about
│                   integrateur-open-source-services.png

whene i create a new post , i start with that

---
title: "Déployer un POD sur podman"
date: 2020-05-06T16:00:00+02:00
lastmod: 2020-05-06T21:44:00+02:00
draft: false
author: "Bilal Kalem"
authorLink: "https://www.linkedin.com/in/bilalkalem/"
description: "Déploiment d'un POD (ensemble de containers: Nextcloud --> redis --> postgres) sur podman"
featuredImage: "/images/blog/deployer-un-pod-sur-podman/deploy-pod-podman-preview.jpg"
featuredImagePreview: "/images/blog/deployer-un-pod-sur-podman/deploy-pod-podman-preview.jpg"

tags: ["pod", "container", "podman", "CentOS", "Red Hat", "Docker", "Kubernetes"]
categories: ["container"]
---
<!--more-->

Expected behavior 期待的行为

when i share link of post, i want to show image preview of my post on google / twitter / ...

一段简短的对于你期待的行为的描述.

Screenshots 屏幕截图

If applicable, add screenshots to help explain your problem. 如果可以的话, 提供屏幕截图对解决问题很有帮助.

Build Environment 构建环境

OS: Windows 10
Theme version/commit: 0.2.0
Hugo version: v0.69.2

Additional Information 补充信息

Configuration files or front matter code... 配置文件或者前置参数的代码...

an example of post : https://ios.dz/deployer-un-pod-sur-podman/

and when i share on Twitter no image preview thaumbnail https://twitter.com/dzintegrateur/status/1258152380786499587

dillonzq commented 4 years ago

@bkalem You should add images to your front matter for twitter cards: https://gohugo.io/templates/internal/#configure-twitter-cards

---
title: "Déployer un POD sur podman"
date: 2020-05-06T16:00:00+02:00
lastmod: 2020-05-06T21:44:00+02:00
draft: false
author: "Bilal Kalem"
authorLink: "https://www.linkedin.com/in/bilalkalem/"
description: "Déploiment d'un POD (ensemble de containers: Nextcloud --> redis --> postgres) sur podman"
featuredImage: "/images/blog/deployer-un-pod-sur-podman/deploy-pod-podman-preview.jpg"
featuredImagePreview: "/images/blog/deployer-un-pod-sur-podman/deploy-pod-podman-preview.jpg"
images:
  - "/images/blog/deployer-un-pod-sur-podman/deploy-pod-podman-preview.jpg"

tags: ["pod", "container", "podman", "CentOS", "Red Hat", "Docker", "Kubernetes"]
categories: ["container"]
---

bkalem commented 4 years ago

Thank you for your fast answer and for all your effort for support us :)

i add images:

---
title: "Déployer un POD sur podman"
date: 2020-05-06T16:00:00+02:00
lastmod: 2020-05-07T10:20:00+02:00
draft: false
author: "Bilal Kalem"
authorLink: "https://www.linkedin.com/in/bilalkalem/"
description: "Déploiment d'un POD (ensemble de containers: Nextcloud --> redis --> postgres) sur podman"
featuredImage: "/images/blog/deployer-un-pod-sur-podman/deploy-pod-podman-preview.jpg"
featuredImagePreview: "/images/blog/deployer-un-pod-sur-podman/deploy-pod-podman-preview.jpg"
images:
  - "/images/blog/deployer-un-pod-sur-podman/deploy-pod-podman-preview.jpg"

tags: ["pod", "container", "podman", "CentOS", "Red Hat", "Docker", "Kubernetes"]
categories: ["container"]
---
<!--more-->

after deploy, i see a new meta in public html :

og:image

twitter:image


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noodp" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <title>Déployer un POD sur podman - integrateur open source</title>
    <meta name="Description" content="Déploiment d&#39;un POD (ensemble de containers: Nextcloud --&gt; redis --&gt; postgres) sur podman"><meta property="og:title" content="Déployer un POD sur podman" />
<meta property="og:description" content="Déploiment d&#39;un POD (ensemble de containers: Nextcloud --&gt; redis --&gt; postgres) sur podman" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://ios.dz/deployer-un-pod-sur-podman/" />
<meta property="og:image" content="https://ios.dz/images/blog/deployer-un-pod-sur-podman/deploy-pod-podman-preview.jpg" />
<meta property="article:published_time" content="2020-05-06T16:00:00+02:00" />
<meta property="article:modified_time" content="2020-05-07T10:20:00+02:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://ios.dz/images/blog/deployer-un-pod-sur-podman/deploy-pod-podman-preview.jpg"/>


you can see public html source of my blog post
https://ios.dz/deployer-un-pod-sur-podman/

but still same problem :'( i try to share a new link of my post in twitter
no image thumbnail 

https://twitter.com/dzintegrateur/status/1258337190406492161

![twitter-070502020](https://i.ibb.co/zR5SN9g/twitter-070502020.png)

if you can tell me please what i need to do for solve this problem @dillonzq 
Thank you per advance

bkalem commented 4 years ago

edit:

on facebook and Linkedin the modification is work fine 👍 facebook Linkedin

@dillonzq do you think i need to wait for Twitter link because Twitter cache does not update?

g0rbe commented 4 years ago

I have the same problem. twitter:image is set, but shows nothing in Twitter card validator.

dillonzq / LoveIt