web development – larsblauridsen.com http://www.larsblauridsen.com Sat, 23 May 2015 09:44:02 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.7 SEO Social Meta tags: SEO for developers – part 2 http://www.larsblauridsen.com/2015/04/seo-social-meta-tags-seo-for-developers-part-2/ http://www.larsblauridsen.com/2015/04/seo-social-meta-tags-seo-for-developers-part-2/#respond Sun, 26 Apr 2015 14:56:17 +0000 http://www.larsblauridsen.dk/?p=181 Social shares and links are good for SEO. However, you need to make sure the social Meta Tags are set in order to optimize conversion rates for social shares. And although the primary effect is conversion rate optimization, the secondary of this will be better SEO through more links and mentions. All this simply by sharing the right link, image and text.

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, 

]]> http://www.larsblauridsen.com/2015/04/seo-social-meta-tags-seo-for-developers-part-2/feed/ 0 SEO Key elements: SEO for developers http://www.larsblauridsen.com/2015/04/seo-key-elements-seo-for-developers/ http://www.larsblauridsen.com/2015/04/seo-key-elements-seo-for-developers/#respond Sun, 19 Apr 2015 18:06:28 +0000 http://www.larsblauridsen.dk/?p=177 SEO Key elements and SEO in general even may not be our primary assignment as web developers, but it is still important to consider, when creating the code behind the webpages.

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

]]> http://www.larsblauridsen.com/2015/04/seo-key-elements-seo-for-developers/feed/ 0