Як додати twitter card до блогу (blogger)

По замовчуванню коли твітнути статтю на платформі blogger, то в twitter з'являється не дуже привабливий tweet. Це можна виправити налаштувавши на нашому блозі twitter card (карточку твітера). 

Це можна зробити кількома способами. Спосіб один заходимо в налаштування блогу Тема/Редагувати html і додаємо такі рядки перед тегом </head> :

<meta content='summary_large_image' name='twitter:card'/>
<meta content='@your-name' name='twitter:site'/>
<meta content='@your-name' name='twitter:creator'/>

Інший спосіб надає більш розширенні можливості, зокрема можна вказали посилання на logo, яке буде з'являтися коли постити не пост, а головну сторінку, або сторінки блогу на blogger. Так же само додаємо наступний текст (взято тут):

<!--Twitter Card-->
<b:if cond='data:blog.pageType == "index"'> <!--homepage-->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:description" expr:content='data:blog.metaDescription' />
    <meta name="twitter:title" expr:content="data:blog.pageTitle" />
    <meta name="twitter:site" content="@username" />
    <meta name="twitter:image" content="YOUR_LOGO_URL" />
    <meta name="twitter:creator" content="@username" />
</b:if>
<b:if cond='data:blog.pageType == "static_page"'> <!--page-->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:description" expr:content='data:blog.metaDescription' />
    <meta name="twitter:title" expr:content="data:blog.pageTitle" />
    <meta name="twitter:site" content="@username" />
    <meta name="twitter:image" content="YOUR_LOGO_URL" />
    <meta name="twitter:creator" content="@username" />
</b:if>
<b:if cond='data:blog.pageType == "item"'> <!--blog post-->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:description" expr:content='data:blog.metaDescription' />
    <meta name="twitter:title" expr:content="data:blog.pageName" />
    <meta name="twitter:site" content="@username" />
    <meta name="twitter:image" expr:content="data:blog.postImageUrl" />
    <meta name="twitter:creator" content="@username" />
</b:if>
<!--End Twitter Card-->

@username заміняємо на власний логін на твітері.
Переглянути результат можна використавши Twitter card validator.

Інколи не завжди з першого разу карточка нормально відображається в твітері і потребується повторний твіт. Або ж спочатку необхідно переглянути на валідаторі карточки, а згодом твітнути в твітері. Результат виглядає в моєму випадку так:

: