I downloaded Lego Digital Designer and built a prototype of the rack with it and then used the “Pick a Brick” option at lego.com to buy the bricks I needed.

My design can be found here. This design has room for 7 Pis (my current build only has room for 3).

A few images of the process:

After a few days my bag of bricks arrived and the really fun parts began.

First of course, I needed to sort to bricks. Nobody builds lego without sorting the bricks first, right?

The finished rack with room for 2 Pis. The blue tiles are meant to make it easy to write the names and the purposes of the different Pis on the rack. I covered them with transparent tape before writing, so I can easily change the text without having to clean the tiles first.

The finished rack with Raspberry Pis. Next time I buy bricks, I might need a few extra bricks to keep the Pis in their place.

This blog entry shows you how to utilize Open Graph or Schema.org meta tags to ensure the right content is presented in social shares.

Facebook
Twitter
LinkedIn
Google+
Pinterest
Full example

Facebook

(Reference: http://ogp.me/ )

In order to help Facebook select the link, image and text you want to display in your shares, you need to utilize the Open Graph meta properties. Put these in the header of every page on your website.

An example of this is the following snippet:

<meta property="og:title" content="Title of your article" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/canonical-url-of-the-article.html" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description of your article" />
<meta property="og:site_name" content="Site Name" />
<meta property="fb:app_id" content="APPID"/>
<meta property="fb:admins" content="Facebook Admin ID" />

og:title is the title of the webpage.

og:type is usually article, but could differ for audio, video, books or profiles. Read more about Open Graph Object Types [http://ogp.me/#types]

og:url should be the same as the canonical URL of the webpage.

og:image defines the image you want to share (should be an image URL). Besides the og:image url, you should also set the og:image:secure_url to an alternate HTTPS image URL. If necessary, use og:image:height and og:image:width to set height and width of the image (in pixels).

You should use og:description to create short description of the webpage.

The og:site_name property can be used for the overall site name.

If you want to view facebook insights for the webpage, you should also include the fb:app_id tag. fb:admins defines the facebook administrators, who are permitted to view the facebook insights (numerical id of the admins comma-separated if you have more than one).

Title, type, URL, Image and description should always be present.

You can test your Open Graph data by using Facebook Debugger, https://developers.facebook.com/tools/debug

Twitter

(Reference: https://dev.twitter.com/cards/overview)

Twitter uses Twitter Card data to select the right data for shares. After implementing the meta tags, you can validate the meta tags with the validator found here: https://cards-dev.twitter.com/validator

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@twitter_handle" />
<meta name="twitter:title" content="Title of your article" />
<meta name="twitter:description" content="Description of your article" />
<meta name="twitter:image" content="http://www.example.com/image.jpg" />

twitter:card is the type of the Twitter Card. See [https://dev.twitter.com/cards/overview] for a list of cards.

twitter:site is the Twitter username the card should be attributed to. You need this meta tag for analytics [https://dev.twitter.com/cards/analytics]

LinkedIn

(Reference: https://developer.linkedin.com/docs/share-on-linkedin )

Like Facebook, LinkedIn uses Open Graph metatags for presenting the right content. Following is an example of what you need for LinkedIn:

<meta property="og:title" content="Title of your Article" />
<meta property="og:description" content="Description of your article" />
<meta property="og:url" content=" http://www.example.com/canonical-url-of-the-article.html " />
<meta property="og:image" content="http://example.com/image.jpg" />


Google+

(Reference: https://developers.google.com/+/web/snippet/ )

Google uses Schema.org microdata for social shares. This means you need to add the following attributes to your head tag.

<head itemscope itemtype=”http://schema.org/Article”>

The schema.org uses the following meta tags:

<meta itemprop="name" content="Title of your article" />
<meta itemprop="description" content="Description of your article" />
<meta itemprop="image" content="http://www.example.com/image.jpg" />


Pinterest

(Reference: https://developers.pinterest.com/rich_pins_article )

Pinterest uses either Open Graph like Facebook or Schema.org semantics like Google to display the right data (called Rich Pins).

Open Graph

The 3 required fields for Pinterest are the following:

<meta property="og:title" content="Title of your Article" />
<meta property="og:description" content="Description of your article" />
<meta property="og:type" content="article" />

Besides those, the following are strongly suggested to add as well.

<meta property="og:url" content=" http://www.example.com/canonical-url-of-the-article.html " />
<meta property="og:site_name" content="Name of the website" />


Schema.org

Just like Google+ you can use Schema.org itemprops for Pinterest.

<meta itemprop="name" content="Title of your Article" />
<meta itemprop="description" content="Description of your article" />
<meta itemprop="image" content=http://www.example.com/image.jpg />
<meta itemprop="url" content="http://www.example.com/canonical-url-of-the-article.html" />

If you want to validate your Rich Pins, you can use the following URL: https://developers.pinterest.com/rich_pins/validator

The validator is used in the approval process for enabling Rich Pins as well.

Full Example

The following is a full example of what needs to go into your <head> tag to make sure the social media are displaying the right data.

<head itemscope itemtype="http://schema.org/Article >
<!-- Open Graph Meta Data for Facebook and LinkedIn -->
<meta property="og:title" content="Title of your article" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/canonical-url-of-the-article.html" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description of your article" />
<meta property="og:site_name" content="Site Name" />
<meta property="fb:app_id" content="APPID"/>
<meta property="fb:admins" content="Facebook Admin ID" />

<!– Twitter Card –>
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”@twitter_handle” />
<meta name=”twitter:title” content=”Title of your article” />
<meta name=”twitter:description” content=”Description of your article” />
<meta name=”twitter:image” content=”http://www.example.com/image.jpg” />

<!—Google+ and Pinterest Schema.org annotations  –>
<meta itemprop=”name” content=”Title of your article” />
<meta itemprop=”description” content=”Description of your article” />
<meta itemprop=”image” content=”http://www.example.com/image.jpg” />
<meta itemprop=”url” content=”http://www.example.com/canonical-url-of-the-article.html” />

</head>

I have used articles as an example, but all 3 annotation types allows for other types of data, like for example products or persons.

See also my first blog entry on Seo Key Elements for developers, 

The following is a list of some of the things, we always should make sure are applied to the web page.

Title, Keywords and Description

Elements like Title, Keywords and Description metatags should be easy to edit. As of 2015, the Title should be no more than 55 characters and ideally no less than 40 characters. The Description no more than 115 characters. The CMS should count the characters for the editors and display the number when editing.

Examples of title, keyword and description metatags:

<title>Example title</title>
<metatag name=”keyword” description=”keyword, another keyword, important keyword too” />
<metatag name=”description” description=”description of the content of the current webpage” />

URL

The URL should be less than 90 characters, although this is not a hard limit. It is far more important to make sure the website has a SEO-friendly URL structure that is meaningful and not dependent on a page URL. For example, www.example.com/topic/page is better than www.example.com/?page=9999 . This often depends on CMS, but is sometimes customizable, for example in WordPress.

Header tags

Even if the opinions differ on this, make sure that the header tags are optimized for SEO. One H1 tag only per page. This means better web accessibility as well). In addition, Bing prefers one H1 tag only. Of course, you can allow any number of H2 and H3 tags.

The next SEO for developers blog entry deals with Social Media tags

.sln

The .sln file contains the Visual Studio Solution, for example the projects, project items and solution items. It also contains source control settings and other global level settings. It is a text-based file.

The .sln file is shared between developers and should be included in source control.

If the .sln file is deleted, the solution can’t be opened at once anymore, but the individual projects can still be opened (via the .csproj files, see below)

.suo

The .suo file contains the Solution User Options, for example user level customizations such as breakpoints. It is a binary file.

The .suo file is user-specific and should be ignored in source control.

It is safe to delete this file, and deleting it might help problems with hanging debugs.

.user

The .user file is another user option file. It contains things like start options for debugging the project and the last configuration, such as open tabs. It is a text-based file.

The .user file can be included in source control if the developers need the same debug settings, but most often should not be.

.csproj

The .csproj files is project files, and populates the hierrachy with that project’s items. It wraps relevant references etc

The .csproj files should be included in source control.