Manage Social Network with Bissetii in Hugo

Apart from SEO, Bissetii strives to be compatible with most major social networks. This is where Bissetii shines from other Hugo themes where Bissetii supplies a full interface to handle the sharing system easily and seamlessly.

Page Thumbnail Images

Bissetii uses the OpenGraph’s <meta property="oe:image"> and Twitter Card sharing tags to define each of the thumbnail image.

Image Requirements

Different network has different requirements for rendering the images. They can be found as follows:

To accomandate as many networks as possible, Bissetii compiled the following image requirements to work in an optimized manner:

First Thumbnail

The first thumbnail should be:

1. 1200x630 or 1.91:1 aspect ratio.
2. Max 5MB in download size (LinkedIn lowest).
3. Primarily for Facebook, LinkedIn, and Twitter.
4. JPG or PNG format.

Second Thumbnail

The follow up thumbnail should be:

1. 1200x1200 or 1:1 aspect ratio.
2. Max 8MB in download size.
3. Primarily for high definition square thumbnails usage.
4. JPG or PNG format.

Last Thumbnail

The last thumbnail should be:

1. 400x400 or 1:1 aspect ratio.
2. Max 2MB in download size.
3. Primarily for Whatsapp, and possibly other mobile messengers.
4. JPG or PNG format.

Storage

The image storage location does not matter as long as its source URL is publicly reachable and is able to handle large surge of requests.

For internal hosting storage placement:

1. Bissetii recommends storing them next to the content file (_index.md) in the same directory for organziational state.
2. Otherwise, storing and hosting inside static/ directory is also working properly.

Configure Thumbnail

Bissetii supplies thumbnail images via the page’s Hugo’s front matter with [thumbnails] table. A page can has as many thumbnail images as long as it complies with all the major supporting social network.

Once the image is available, you can proceed to configure the settings for the page’s thumbnail images. An example configurations (3 thumbnail images in total) would be as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

[thumbnails.0]
url = "/img/thumbnails/how-to/getting-started/default-1200x1200.png"
width = "1200"
height = "1200"
alternateText = "Bissetii Hugo Theme Module"

[thumbnails.1]
url = "/img/thumbnails/how-to/getting-started/default-1200x628.png"
width = "1200"
height = "628"
alternateText = "Bissetii Hugo Theme Module"

[thumbnails.2]
url = "/img/thumbnails/default-480x480.png"
type = "image/png"
width = "480"
height = "480"
alternateText = "Bissetii Hugo Theme Module"

• [thumbnails.N] - COMPULSORY
  • Denotes the following fields belong to thumbnails.N. Recommended N would be ascending number so that the list of thumbnails are sorted out in your order.
• url - COMPULSORY
  • The image source URL.
• width - COMPULSORY
  • The width dimension of the image.
• height - COMPULSORY
  • The height dimension of the image.
• alternateText - COMPULSORY
  • The alternate text of the image describing the image content.

Configure Globally

To configure the thumbnail images globally, set those images' settings into the following data file inside data/ directory with the following pathing:

pattern  :                    data/bissetii/thumbnails.toml
repo-docs:              docs/.data/bissetii/thumbnails.toml

Configure Page-Specific

To configure page-specific thumbnail images, set those images' settings into the page’s Hugo front-matter.

Validators

Some social network facilitates unit-testing validators. Feel free to test them out while designing for the page thumbnails:

Twitter Card Specific Configurations

Twitter has its own specific configurations. Bissetii configured it to use large image card by default. To change these Twitter specific settings, edit the following file:

pattern  :       data/bissetii/vendors/Twitter.toml
repo-docs: docs/.data/bissetii/vendors/Twitter.toml

Specifically, edit any of the following configurations as per Twitter Documentation:

1
2
3
4
5

# All Twitter Configurations

[Cards]
Card = "summary_large_image"
Username = "zoralab" # Twitter handle without '@'

Wrapping Up

That is all for managing social network with Bissetii in Hugo. If you have any question to ask us directly, please feel free to raise it at our GitLab Issues Section. We will be happy to assist you.