It's Quiz4Y

Summary of OGP setting method for Facebook / Twitter

Do you have set OGP on the home page operating at the website?

OGP is an abbreviation for “Open Graph protocol”. When shared on SNS such as Facebook and Twitter , the title , URL , summary, and featured image ( thumbnail ) of the page are displayed correctly as intended. It can be said that it is an indispensable setting in order for many people to see the article through the spread on SNS.

Therefore, this time, we will introduce OGP settings, confirmation methods, precautions, etc. that conform to the latest Facebook specifications.

What is OGP

OGP is an abbreviation for Open Graph Protocol, and when shared on SNS such as Facebook, Twitter , and mixi , the title , URL , outline, and featured image ( thumbnail ) of the page are displayed correctly as intended. ..

It is possible to make the display stand out like the red frame above, and the click rate will increase because it will be more noticeable than the case of only the URL .

OGP basic settings

OGP is the following code Web site and home page can be implemented by embedding the source of the.

og: title

For og: title, specify the title of the page . Title setting is in normally performed but, og: title another in the title If you set, and the like social share when they are in, there will be displayed with priority. If not set, is displayed.

og: type

Describe the object type in the content attribute.

Various things can be selected. Please check the details below (English)
http://ogp.me/#types
https://developers.facebook.com/docs/reference/opengraph

Commonly used og: type

website

<meta property="og:type" content="website" />

Specify on the TOP page of the website .

article

<meta property="og:type" content="artcle" />

Specify when it is not the TOP page of a website or blog .

og: url

Specify the URL of the page . The URL must be specified with an absolute path.

▼ Absolute pass (OK)

<meta property="og:url" content="https://ferret-plus.com/images/">

▼ Relative path (NG)

<meta property="og:url" content="/images/">

og: image

og: image can specify an image.
If you specify an image, you can decide the image to be displayed when it is shared . The image must be specified with an absolute path.

Absolute pass (OK)

<meta property="og:image" content="https://ferret-plus.com/images/logo.jpg">

▼ Relative path (NG)

<meta property="og:image" content="/images/logo.jpg">`

Facebook recommends an image size of 1200px ✕ 630px, which will make it look nicer and bigger.

og: site_name

Specify the site name.

og: description

Describe the page description.

Facebook settings

fb: app_id

fb: app_id is a required property for Facebook to display OGP.
Besides fb: app_id, you can also use fb: admins. However, in the case of fb: admins, it is like exposing personal information because it uses a personal ID called adminID. It is better to use fb: app_id if possible.

It takes a little time to get the app_id, so please check it from the following site.

fb: admins (not recommended)

It is a description that specifies the administrator of the page with the Facebook user ID. When setting with fb: admins, set as follows.

<meta property="fb:admins" content="adminID" />

Settings for Twitter

<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@[Twitter ID]" />
<meta name="twitter:player" content="@[Twitter ID]" />

Twitter Cards is a mechanism to display the title , summary, and featured images ( thumbnails ) of the page on tweets that include URLs .

twitter: card

twitter: card specifies the display type when displaying OGP on twitter.

▼ content = “summary”

content = “summary_large_image”

It is a type of card that is formally similar to Facebook’s OGP, with a larger image of the Summary card.

content = “photo”

This is the type in which the image is displayed with priority. Click the image to see the tweet content.
Recommended for industries where visual appeal is important (apparel, restaurants, etc.).

▼ content = “gallery”

It is a card that can display multiple images in one post.
You can select up to 4 images to display.

▼ content = “app”

OGP option settings

In addition to the basic settings, OGP can be set in detail.

Location / area information

<meta property="og:latitude" content="" />
<meta property="og:longitude" content="" />
<meta property="og:street-address" content="/>
<meta property="og:locality" content="" />
<meta property="og:region" content="/>
<meta property="og:postal-code" content="/>
<meta property="og:country-name" content="" />

Contact Information

<meta property="og:email" content="" />
<meta property="og:phone_number" content="" />
<meta property="og:fax_number" content="" />

Video

<meta property="og:video" content="/>
<meta property="og:video:height" content="" />
<meta property="og:video:width" content="/>
<meta property="og:video:type" content="" />

musics

<meta property="og:audio" content="/>
<meta property="og:audio:title" content="/>
<meta property="og:audio:artist" content="" />
<meta property="og:audio:album" content="" />
<meta property="og:audio:type" " />

Setting OGP makes it easier to convey the contents of the website

By setting OGP, you can give visual clarity and impact to various SNS walls and news feeds, saying “This article is such content”. If it is spread on SNS by such things, it will be seen by more people and will eventually lead to attracting customers. Longer OGP set the home page would not be exaggeration to say that the mandatory set in the management of.

It is possible that it will change depending on the Facebook specifications in the future, but we have summarized the settings and confirmation methods that conform to the latest Facebook specifications.

Occasionally, when you debug, you may get an error, so even if you have already set OGP, we recommend that you use Facebook Debugger regularly to check if the settings are correct.

Leave a Reply

Your email address will not be published. Required fields are marked *