Benefit of Open Graph that can be used on here

Cipherchunk Cipherchunk 2 Апреля 2023

Open Graph Tags for Twitter: Twitter Cards

If you’re not familiar with Twitter’s cards, they allow you to attach media files and add extra information to your tweets. This can be useful for increasing the visibility of your tweets and providing additional context for users who click through.

Although they’re not the same thing, Twitter’s cards use the same open graph protocol and it looks similar to OGP tags. Implementing these tags makes it much easier to create Twitter cards without duplication issues.

Like Facebook’s Open Graph tags, Twitter Cards let you stand out from the crowd of tweets. In short, they allow you to generate some additional content from your 140-character tweet.

This doesn’t show up on people’s feeds automatically, but it adds a little «View summary» button below the tweet.

You can use open graph tags to specify your content’s title, description, and image, and to determine your page’s content type and the audience you want to reach.

The Twitter card is tempting to click and provides a handy summary of the shared page. However, surprisingly, not many sites take advantage of these tags, giving you a great opportunity to make your tweets stand out from other feeds.

twitter: card
This required tag works in a similar way to og:type. It describes the type of content you are sharing. There are seven options: summary, photo, video, product, app, gallery, and «large version» summary.

Depending on the type of content you choose, the link at the bottom of your tweet changes. You can get «View summary» for summaries, «View photo» for photos, etc. If this tag is not set, Twitter reads your link as a «Summary» by default.

Example:

<meta name=”twitter:card” content=”summary” />

twitter:title
This basically does the same thing as its OG counterpart. You specify the title for your article that will show up in bold. It’s smart to avoid repeating the same text you have in your tweet. Make the most of the space provided and let the two pieces of copy play on each other to reinforce the message. Use up to 70 characters.

Example:

<meta name=”twitter:title” content=”Your title here” />

twitter:description
Use this tag to write a descriptive lead to the page you are sharing. As with Open Graph tags, don’t focus on keywords because they won’t matter for your SEO. Create compelling copy that nicely complements your tweet and the title. Twitter limits this part to 200 characters.

Example:

<meta name=”twitter:description” content=”Your 200-character description here” />

twitter:url
This sets the canonical URL for the content you are sharing. (For more information, review the description for the equivalent Facebook Open Graph tag above.)

Example:

<meta name=”twitter:url” content=”http://www.yourdomain.com” />

twitter:image
Yes, you guessed it. This is how you set the picture to go with your tweet. Twitter allows two options, a card with a smaller or a larger image.

You decide which one you want in the type tag. If you go for the large option, make sure it has a resolution of at least 280x150px and that the file size is not more than 1MB. You can consider using the same trick as the Facebook thumbnail: add some text to the image to boost the message.

Example:

<meta name=”twitter:image” content=”http://www.yourdomain.com /image-name.jpg” />

Request Approval from Twitter
Adding cards to your tweets is easy — all you need to do is include some extra code to the end of your tweet. The code tells Twitter which card type you want to use and how you wish the content to look.

There are several types of Twitter Cards, so you can choose the one that best suits your needs.

However, keep in mind that, before you can fully benefit from Twitter Cards, you need to request approval for your page from Twitter.

Fortunately, this only takes about 15 minutes and can be done easily using their Card Validator.

To get started,

Select the type of card you wish to use.
Add your meta tags
Check the URL with Twitter’s validator tool.
Test in the validator or get approval for your card, then tweet the URL to see your card displayed. Check Validation
Once you get approval, Card Validator serves the same purpose as the Facebook Sharing Debugger, allowing you to check your links before committing

+ I made this article because of the site looks on Twitter it doesn't have a preview just like how it looks on Facebook

+ @Evg there is not preview for links on Twitter

Опубликовано в Chunk

2 Ответа

  1. Evg Evg 2 Апреля 2023

    I understand what you want to say. Thank you.

    File where this can be added: app/Core/Meta.php
    This is very easy to do.

    But on this site, I won't do that. Twitter is banned in Russia and I see no reason to do something for it. Alas.

    Twitter used to be here, but I removed it. Now meta tags describe a general case, not a particular one. If someone wants to focus on some site, for example: Twitter or Facebook, he can easily do it himself.

    P.S. Although… many parsers work from Twitter meta tags. Need to think.

    Update: code added. You can see the page of this post.


    Твиттер тут был, но был убран, т.к. запрещен. Смысл этих тегов тут. В общем, надо подумать. Внести код — 5 секунд. Может быть и надо, не знаю.

    Доп. код добавил.

    1. Cipherchunk Cipherchunk 2 Апреля 2023 (ред.)

      Where can I find the code that you used before.