投稿者: Nissa

Open Graph Protocol (Eng)

Written By Nissa (nissa@accorder.co.jp) 2017/02/02

What is Open Graph Protocol?

Open Graph (also known as OG) was introduced by Facebook which allows outside websites to own the same characteristic or functionality as any other object on Facebook.

Why OG is needed?

❃ Promotes the combination between Facebook and other websites.

❃ Information travels from third party website to one website when a page is shared.

5 Basic Metadata to create OG

og:title

  • Just like Meta title tag.
  • If Facebook doesn’t find “og:title” tag it will use meta title
  • Make sure to have good and compelling title.
  • Has no limit on number of character but recommended to stay from 60-90
meta property="og:title" content="The Fujifilm"

og:url

  • define one page that all your shares will go to
  • use the usual URL website
meta property="og:url" content="http://www.fujifilm.com"

og:type

  • How you describe the page you are sharing: blogspot, video and more.
  • Type like example Web based (blog, article, website) or People (actor, author, politician)
meta property="og:type" content="camera"

og:description

  • Similar like meta description
  • This will describe your content but it will not appear on search engine result page.
  • It shows below the link title of Facebook
  • Doesn’t affect SEO
  • Make sure it is compelling so people want to click it
  • Best around 200 letters
meta property="og:description" content="At Fujifilm, we are continuously innovating — creating new technologies, products and services that inspire and excite people everywhere"

og:image

  • The most intereting feature because it helps to stand out
  • Make sure to set the image of your choice or else Facebook will show some random picture
  • If you don’t use CMS (content management system like wordpress) you need to change “og:image” manually for each page.
  • Recommended resolution for OG image is 1200 pixels x 627 pixels.
  • Don’t exceed 5mb.
  • Avoid using 400 pixels x 200 pixels and smaller because it won’t look attractive
meta property="og:image" content="http://fujifilm/camera/images"

Example the use of OG in Facebook

Extra Optional Metadata

  • og:audio – A URL to an audio file to accompany this object.
  • og:description – A one to two sentence description of your object.
  • og:determiner – The word that appears before this object’s title in a sentence. An enum of (a, an, the, “”, auto). If auto is chosen, the consumer of your data should chose between “a” or “an”. Default is “” (blank).
  • og:locale – The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
  • og:locale:alternate – An array of other locales this page is available in.
  • og:site_name – If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., “IMDb”.
  • og:video – A URL to a video file that complements this object.

コーディング環境 社内ルール [ENG]

Coding rules in company’s environment

Written By Shin (shin@accorder.co.jp) 2016/07/26
Translated by Nissa (nissa@accorder.co.jp) 2016/11/07

File Management

★Before releasing the site:

We use GIT from bitbucket.org https://about.gitlab.com/. If you haven’t register yet, do create your own account. Your ID should start with acc_//your name//.

Example, 
acc_nissa

After that, you can download sourcetree. Both software has almost the same functions. (Download at : https://ja.atlassian.com/software/sourcetree).

Please make sure to create a folder named 【home】 under your local [Working [WEB]], which is already been created. (Keep all the files in home directory so that people can search the data easily.)

Example, 
アコーダーのHPなら作業中［WEB］> home > accorder.co.jp
★Just before the site has been released: 

data_mac_mini01 > 作業中［WEB］ > WEB
Transfer the data that was being created at【home】to WEB.

When in comes to coding,
data_mac_mini01 > 作業中［WEB］ > WEB

will be uploded in the WEB.
Upload from local is prohibited, this is to ensure that data_mac_mini 01 is up to date.

★After the site has been released:

Delete all local file from GIT since the files is also in data_mac_mini 01. After release, any maintenance can be done in data_mac_mini 01. It does not copy locally so before working on any files, make sure to put the original files at ” data_mac_mini01> Working [WEB]> WEB_DELETED ” for backup.

How to use the test server

★dev.acc-test.net：

This URL will not be given to clients. Hence, it is used to test the developed website to server. The coding must be completed and corrected before testing.

★acc-test.net (or client.acc-test.net)：

This URL will be used only after we get the confirmation from the clients. If there are no error in dev.acc-test.net, you may press the sync button and hand it over to the customer.
(Synchronization panel: dev.acc-test.net/home.php)

〘Why do we need to confirm the information?〙

dev can be a problem sometimes due to the screen design and information may change. Therefore, it is prohibited to do coding during customer’s confirmation. It is advised to use “dev.acc-test.net” for internal work and use “acc-test.net” for customer confirmation.

It is prohibited to upload anything from FTP on acc-test.net (client sides). Please upload it to dev and use the sync button. It will sync automatically according to the latest date, in order to prevent acc-test from late updates.