Lucky Boost

Traffic & Conversions Boost

SEO and Social Media for Multilingual and Multidevice Sites

| 0 comments

All the tags you need to put in the header of your page for SEO. Best practice on social media (facebook, twitter, google+, pinterest, linkedin). How to implement when running a multilingual website and on different types of screens and devices.

SEO

Basic Tags

Title and Description tags usually appear in the search results but Google mite decide to change them based on what they see as a better title and/or description for the users search.

Canonical tag is to notify the bots of the real address of a page. Make sure to use the canonical tag especially if you add variables to the URLs

Indexing Tags

Crawl and index the page and all the links on the page

Crawl and index the page but don’t crawl the links on the page

Crawl and don’t index the page keep crawling links on the page

Don’t crawl and don’t index this page and linked to other pages

 

Tags you Shouldn’t use or worry about

Because you are going to jump and yell what?! don’t use the keyword tag?!! go over and read the following 2 posts

Google does not use the keywords meta tag in web ranking

The Meta Keywords Tag Lives At Bing & Why Only Spammers Should Use It

 

noodp – Unless you have a very old website you mite need to use the noodp which means don’t take the description from the open directory project (in short dmoz).

noydir – Tells the search engines not to use description from the Yahoo directory (that has been dead for a long time already).

noimageindex – Tells the search engines not to index your images.

noarchive  – Tells the search engines not to save a copy of the page (the cache).

nosnippet – Tells the search engines not to show a snippet (usually the meta description tag) in search results.

There are more tags that can be used but they are so uncommon you don’t need to worry about them at all!

 

social media

Social Media

Going throw the main tags that need to be used for different types of objects on the social platforms. Please note that there are many more tags that are not required to get the extra exposure.

Facebook – Open Graph

The basic tags

Just for the basic tags you don’t need an App Id but if you want anything else you will need one. To get an App ID you need to register for an app at Facebook Developers Apps page.

What size will my image be in the feed?

  • Big image > 600 x 315 pxfb-big-image
  • 200 x 200 px < Small image < 600 x 315 pxfb-small-image
  • No image < 200 x 200 pxfb-no-image

Article tags

The grey text at the bottom YOAST.COM | BY MICHEL HEIJMANS is for the article tagsfb-articleurl shared: https://yoast.com/everyday-website-optimization/

 

Place tags

 

Product tags

Both the Place tags and Product tags may not be shown differently in the feed but will help with Facebook Graph search.

 

For the rest of the open graph objects you must register form an app and go throw the approval process (Start with the link to Facebook Developers App from the Facebook basic tag section)

Video tags

fb-videourl shared: https://www.youtube.com/watch?v=op5MOJUql8k

 

Profile

Song

Album

 

Customized Object example from mapmyride.com

 

For the full list of Open Graph Objects Types

There is another type of card that you can only  get by using the Facebook API. It is called the Story Card.

A Story Card requires more than just a few tags in the header so it is not for this post.

How to start using the Story Card guide by Facebook

Full list of actions for story cards

When you finish to put your Open Graph tags together test them out on the Facebook Open Graph Debugger (need to be logged in to Facebook)

 

Twitter – Twitter Cards

Twitter Cards are not visible by default but you need to click on the tweet and it expanse with all the extra data.

The basics tags (Summary Card)

  • Description can be up to 200 characters
  • Title will be truncated at 70 characters

Twitter does support 4 basic tags from Open Graph url, title, description and image.

So tags for the Summary Card can look like this

twitter-summeryurl shared: http://www.nytimes.com/2015/05/03/business/pension-funds-can-only-guess-at-private-equitys-cost.html

 

Summary Large Image Card

  • Minimum image size 280 X 150
  • Image must be less than 1MB in size

twitter-summery-largeurl shared: http://www.washingtonpost.com/blogs/the-switch/wp/2015/05/01/even-apple-now-confirms-that-tattoos-and-the-apple-watch-dont-mix/

So it looks like The New York Times should learn from the Washington Post how to choose image size

Photo Card

Recommended to use the dimension tags as well for proper resizing if necessary.

  • No need to use twitter:title tag
  • Photo cards are not for animated GIFs

twitter-imageurl shared: https://www.flickr.com/photos/53959117@N04/17158042390

 

Gallery Card

  • Up to 4 images
  • No need to use twitter:description

twitter-gallery-cardurl shared: http://fathertime.smugmug.com/Sports/NBA-Game/

 

Product Card

  • Must add two fields and their value

Player Card

  • No need to use twitter:description
  • Player URL must be HTTPS to iframe
  • Image should be the same dimensions as your player and must have more then 68,600 pixels
  • There is a possibility to provide a URL to raw stream that will be rendered in Twitter’s mobile applications

Getting Player Card approval

  1. An example URL with the Twitter Card Metadata tags
  2. The URL referenced in the Twitter Card twitter:player tag
  3. The URL of a tweet with the above Twitter Card URL referenced
  4. A screen shot of the twitter:player URL in In a browser on
  • desktop, BEFORE video play
  • desktop, AFTER video play
  • iPhone, BEFORE video play
  • iPhone, AFTER video play
  • Android, BEFORE video play
  • Android, AFTER video play

 

App Card

  • The App Card can be a stand alone Card or added in addition to other card types
  • No need to use twitter:description
  • twitter:app:country is only used if you have different apps for different languages or if the app is only available in part of the world
  • If you don’t have a separate app for iPhone and iPad you use the same app ID in both tags

twitter-app-storeurl shared: https://itunes.apple.com/il/app/paypal/id283646709

Test your Twitter Cards in the Twitter Card Validator (need to be logged in to twitter)

It is not enough just to implement Twitter Cards you need to get your site approved throw the Twitter Card Validator. You will see an option after inserting a url to submit for review. If it is only the basic tags my experience is that it goes very fast. With the more advanced ones it mite tack a few days.

 

Pinterest – Rich Pins

Product Pin

pintrest-product-pinurl shared: https://www.etsy.com/il-en/listing/174945960/hand-stamped-spoon-dads-ice-cream-plow

Place Pin

pintrest-place-pinurl shared: https://foursquare.com/v/torre-di-pisa/4b4ae398f964a5208a8f26e3

Article Pin

pintrest-article-pinurl shared: http://www.theguardian.com/technology/2015/jan/22/dropbox-london-office-cloudon-windows-phone

There are two more tips of Rich Pin: Recipes and Movie, but the tags are not in the header…

Full list of Rich Pins

Test out your Rich Pin in the Rich Pin Validator

 

Linkedin

Linkedin supports Open Graph but only the 4 main tags

  • Title up to 200 characters
  • Description up to 256 characters

linkedin-posturl shared: http://sociallysorted.com.au/10-social-media-and-business-tools/

Documentation for sharing on Linkedin

 

Google+

Google+ supports 3 different types of tagging and looks for the tags in the following order:

  1. Schema.org
  2. Open Graph
  3. Title and description tags

Google+ supports only 3 tags from Open Graph

Test out your tagging markup with Google Structured Data Testing Tool. The tool will provide you with all the tags Google finds and recognizes on the page.

 

Multilingual

Search Engines

When you have separate pages with the same content just in different languages you’d like the search engines to understand that you support users in a few languages.

Support for multiple languages

  • x-default tag is to notify the search engines what page to show when it has a doubt
  • rel alternate works for cross site as well as same domain

Support for same language but for multiple locations

For more about the topic see Google’s short guide for Use hreflang for language and regional URLs

The full list of values for the hreflang languages ISO 639-1 and the format of all regions ISO 3166-1 Alpha 2

 

There is an option to put all this information in a sitemap and not on each page. The sitemap call for using many more element but will leave you with a cleaner page. For more see sitemap to indicate alternate language pages

 

Facebook

  • must support the address of example.com&fb_locale=es_ES redirecting to the Spanish page. So on to all languages on the site
  • This is only supported in apps, not web version of Facebook.

Facebook page on Localization

 

Multi Device

When you have more then one application to present your content you’d like it all to be set up in a way that if a link is shared from one type of application a user with a different device can be able to view the content in the most friendly way. As of now there is support for going from the web (desktop or mobile site) to apps but not vise versa.

Going from web to app requires that your app supports deep linking.

Mobile Website

When you have a separate site for mobile (not responsive) all you need to due is use the canonical tag mentioned in the SEO section and point it to the desktop version.

 

Google and Facebook (web to app)

Support for indexing iOS apps on Google is very new so mite not work so well.

More about deep linking and how it works

 

Twitter

  • The tags are added to the App Card
  • The tag are not a stand alone they are added to other Twitter Cards
  • If you don’t have a separate app for iPhone and iPad you use the same app ID in both tags

 

To see how deep linking works see Video Examples of Mobile Deep Linking – great post!

 

Slides from my presentation at Click it Summit (CIS) Search Marketing 2015

Leave a Reply

Required fields are marked *.