Social Media

If you are an active blogger or creating lots marketing material, you probably use a huge number of images and photos to keep your audience engaged. If you share on Facebook and Twitter, you may want to have suitable thumbnails. It’s a hell lot of work to have so many images and their derivatives. Some common tasks: Create a derivative image for Facebook post of size 281x394, 470x235, 470x246, … Generate an image for Twitter post of size 600x335, 800x320, … Create round, square thumbnails, … Generate images for Facebook Open Graph and Twitter Card Without simple and effective tools, you won’t be able to accomplish those tasks efficiently.

Challenge Earlier today I had difficulty integrating with Facebook Open Graph and called their Open Graph Debugger for help. I also used Twitter Card Validator to verify if the page can be rendered as a Twitter card. There were still missing pieces from meta data. The complete Open Graph and Twitter card meta data would look like this: <!-- Provide absolute URLs --> <meta name="title" content="Page Title for Search Engines Results | Website Name" /> <meta name="description" content="Page Description for Search Engine Results" /> <meta property="og:title" content="Page Title for Facebook" /> <meta property="og:description" content="Page Description for Facebook" /> <meta property="og:image" content="https://www.

Blogging engines such as WordPress and Ghost should take care of images and Facebook Open Graph integration for you. Unfortunately, that’s not the case with Hugo and Octopress. I did a bit of googling and found that we need to have a meta tag og:image in the header for Facebook to show your image when posting. Meta-tags for HTML Header <!-- Provide absolute URLs --> <!-- Sample from https://rickmanelius.com/article/sharing-facebook-how-improve-your-results-customizing-image-title-and-summary-text --> <meta name="title" content="Page Title for Search Engines Results | Website Name" /> <meta name="description" content="Page Description for Search Engine Results" /> <meta property="og:title" content="Page Title for Facebook" /> <meta property="og:description" content="Page Description for Facebook" /> <meta property="og:image" content="https://www.

From the previous post, you already know how to use a Hugo theme, write a new entry. Now you want to add tags, permalinks and images for better reading experience. Add Permalinks & Tags By default Hugo does not give you tags, categories and permalinks. This can be quickly remedied by updating your config.toml file: baseURL = "http://vietlq.github.io/" languageCode = "en-us" title = "Viet's Blog" theme = "hugo-geo" [permalinks] post = "/:year/:month/:day/:title/" [taxonomies] category = "categories" tag = "tags" [params] # To satisfy hugo-geo theme header = "Viet's Blog" Author = "Viet Le" Now add tags = ["go", "hugo", "git", "blog", "config", "setup"] to front matter of your entry.