Files
buildroot/docs/website/header.html
Titouan Christophe 846bdb2222 docs/website: add opengraph image and meta tags
When linking Buildroot website pages on social media, some platforms will
attempt to display an image. If such an image is not explicitly specified,
then the social media platform will usually take the first "large" image
from that page.

Recently, there was a post on LinkedIn announcing the new sponsorship from
Texas Instruments, linking to https://buildroot.org/sponsors.html [1].
However, because the first "large image" on that page is the logo from
another sponsor (EVS), this is the one that got displayed and it looks
awkward.

To avoid this situation, let's implement the OpenGraph protocol [2], which
is adopted by LinkedIn. Explicitly specify the image, which is the Buildroot
logo with text, exported from the Gimp (.xcf) original image. To avoid
rendering issues due to transparent background on social media platforms,
the logo is exported with a background color.

[1] https://gitlab.com/-/project/2648174/uploads/5e518b0ec5a2f48d154466aaf117e6ab/image.png
[2] https://ogp.me/

Signed-off-by: Titouan Christophe <titouan.christophe@mind.be>
Signed-off-by: Peter Korsgaard <peter@korsgaard.com>
2026-10-06 23:00:13 +02:00

64 lines
2.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Buildroot" content="">
<meta name="angelo.compagnucci@gmail.com" content="">
<link rel="icon" href="favicon.png">
<meta property="og:site_name" content="Buildroot">
<meta property="og:title" content="Buildroot - Making Embedded Linux Easy">
<meta property="og:description" content="Buildroot is a simple, efficient and easy-to-use tool to generate embedded Linux systems through cross-compilation.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://buildroot.org/images/logo-og.png">
<meta property="og:image:alt" content="Buildroot logo">
<title>Buildroot - Making Embedded Linux Easy</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css" integrity="sha256-LxKiHTQko0DUCUSgrIK23SYMymvfuj8uxXmblBvVWm0=" crossorigin="anonymous">
<link href="css/main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.0/html5shiv.js" integrity="sha256-jHqcBHBWM2erADB7T7m7MFLQon8LlOY7ncC7jDaUScs=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.min.js" integrity="sha256-g2lnLPqUkGXj7GDW+Zy47+O2ph+Ur1cmtdklVqkj+kg=" crossorigin="anonymous"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><b>Buildroot</b></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/news.html">
<span class="glyphicon glyphicon-star"></span> News</a></li>
<li><a href="/docs.html">
<span class="glyphicon glyphicon-book"></span> Documentation</a></li>
<li><a href="/support.html">
<span class="glyphicon glyphicon-question-sign"></span> Support</a></li>
<li><a href="/contribute.html">
<span class="glyphicon glyphicon-share"></span> Contribute</a></li>
<li><a href="/lts.html">
<span class="glyphicon glyphicon-send"></span> LTS</a></li>
<li><a href="/sponsors.html">
<span class="glyphicon glyphicon-usd"></span> Sponsors</a></li>
<li><a href="/association.html">
<span class="glyphicon glyphicon-resize-small"></span> Association</a></li>
<li><a id="menubutton" class="btn btn-success btn-shrink" href="/download.html">
<span class="glyphicon glyphicon-cloud-download"></span>
<span class="text-shrink" >Download</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>