Have you configured OGP settings on the homepage or website you are managing ?
OGP is an abbreviation for “Open Graph protocol”. This is a mechanism that displays the title , URL , summary, and eye-catching image ( thumbnail ) of the page correctly as intended when it is shared on SNS such as Facebook and Twitter . This setting is essential in order to have your article seen by many people through the spread on SNS.
Therefore, this time, we will introduce OGP settings and confirmation methods that comply with the latest Facebook specifications, as well as precautions.
What is OGP?
OGP is an abbreviation for Open Graph Protocol, and it is a mechanism that allows the title , URL , summary, and eye-catching image ( thumbnail ) of a page to be displayed correctly as intended when it is shared on SNS such as Facebook, Twitter , and mixi. .
It is possible to make the display stand out, as shown in the red frame above, and this will increase the click-through rate since it will stand out more than if it were just the URL .
Basic OGP settings
OGP can be implemented by embedding the code below into the source of your website or homepage .
What are the points to keep in mind when operating a chatbot?
Check the materials for success points learned from industry-specific implementation examples
og:title
og:title specifies the title of the page . The title is normally set in og:title, but if you set a different title in og:title , that will be displayed with priority when shared on social media etc. If not set, will be displayed.
og:type
Write the object type in the content attribute.
There are various things to choose from. Please check the details below (English)
▼Commonly used og:type
website
<meta property="og:type" content="website" />
Specify as the top page of the website .
article
<meta property="og:type" content="artcle" />
Specify this when the page is other than the top page of a website or blog .
og:url
Specify the URL of the page . The URL must be specified using an absolute path.
▼Absolute path (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.
By specifying an image, you can decide which image to display when it is shared . The image must be specified using an absolute path.
▼Absolute path (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 that the image size be 1200px x 630px, and it will display at that size.
og:site_name
Specify the site name.
og:description
Write a description of the page .
Settings for Facebook
<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />
もしくは
<meta property="fb:admins" content="adminID（15文字の半角数字）" />
fb:app_id
fb:app_id is a required property in order to display OGP on Facebook.
In addition to fb:app_id, you can also use fb:admins. However, in the case of fb:admins, a personal ID called adminID is used, so it is like exposing personal information. It is better to use fb:app_id if possible.
The method to obtain app_id is a bit time consuming, so please check from the site below.
http://blog.sixapart.jp/2012-04/fb-app-id.html
fb:admins (not recommended)
This is a description that specifies the Facebook user ID of the page administrator. When setting with fb:admins, set as follows.
<meta property="fb:admins" content="adminID（15文字の半角数字）" />
As for how to obtain adminID,
1. Open your personal account page
on Facebook 2. Click on your profile photo 3. Check the last part of the URL of the page
where the enlarged photo is displayed 4. Select “&type” for “.123456789012345&type=1&” Note down the first 15 digits Source: Yumepyon’s Wisdom
I think this is easy to understand.
Settings for Twitter
Twitter Cards is a system that displays the title , summary, and featured image ( thumbnail ) of a page in a tweet that includes a URL .
twitter:card
twitter:card specifies the display type when displaying OGP on twitter.
If nothing is set, it will look like the following.
▼content=”summary”This is the most common display format.
▼content=”summary_large_image”
This card is similar in format to Facebook’s OGP, with a larger image on the Summary card.
▼content=”photo”
This type displays images with priority. Click on the image to display the tweet content.
Recommended for industries where visual appeal is important (apparel, restaurants, etc.).
▼content=”gallery”
This card allows you to display multiple images in one post.
You can select up to 4 images to display.
▼content=”app”
This is the card you want to use when introducing your app . Not only the application app icon, but also the rating and price are displayed.
