https://github.com/msfjarvis/hugo-social-metadata

Hugo theme component to add social metadata to your Hugo site with minimal configuration
https://github.com/msfjarvis/hugo-social-metadata

hugo hugo-theme-component social-metadata

Last synced: 2 months ago
JSON representation

Hugo theme component to add social metadata to your Hugo site with minimal configuration

• Host: GitHub
• URL: https://github.com/msfjarvis/hugo-social-metadata
• Owner: msfjarvis
• License: mit
• Created: 2020-02-02T19:43:19.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-04-06T07:24:33.000Z (9 months ago)
• Last Synced: 2024-08-04T01:11:43.726Z (5 months ago)
• Topics: hugo, hugo-theme-component, social-metadata
• Language: HTML
• Homepage: https://msfjarvis.dev/posts/adding-social-metadata-to-your-hugo-sites/
• Size: 13.7 KB
• Stars: 33
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-hugo - hugo-social-metadata - A Hugo theme component to generate social metadata. (Theme Components / Non-Official)

README

        
# hugo-social-metadata

## About

This is a [Hugo](https://gohugo.io) theme component that automatically generates metadata complying to [The Open Graph Protocol](https://ogp.me/) as well as [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started). This is **NOT** a standalone theme and must not be treated as such.

## Usage

1. Add the hugo-social-metadata repository as a submodule to be able to get upstream changes later `git submodule add https://github.com/msfjarvis/hugo-social-metadata.git themes/hugo-social-metadata`

2. Start off by configuring a few things in your `config.toml` (or equivalent file depending on whether you use YAML or JSON). These will be picked up by the theme component and used to provide metadata for the site.

```toml

[params]

  description = "A description for your awesome website goes here"

  keywords = "some, keywords, that, describe, your, content"

  twitterUsername = "@your_twitter_username"

  socialImage = "path/to/the/twitter/card/image"

```

3. Include the `hugo-social-metadata` theme as the leftmost element of the theme list variable in your config file. For `config.toml`, it will look something like this:

```toml

theme = ["hugo-social-metadata", "hyde"]

```

4. Include the `social_metadata.html` partial in your `head.html` like so: `{{ partial "social_metadata.html" . }}`.

## Additional customizations

You can customize some of the generated metadata on a per-page basis. Setting `description`, `socialImage` or `tags` in the frontmatter will override the defaults loaded from the main config file.

```markdown

+++

description = "A nice description for this blogpost"

socialImage = "path/to/an/image/that/describes/this/post/best"

tags = ["this", "blog", "rocks!"]

+++

```

## License

Check out the [LICENSE](/LICENSE) file in the root of this repository.