html — При ссылке на сайт, соцсети подставляют любые картинки только не те что в статье
Вопрос задан
Изменён 6 лет 8 месяцев назад
Просмотрен 134 раза
Создал сайт. Если ссылку на статью с этого сайта выставить в Facebook или Однокласниках, то Facebook/Однокласники для заставки в посте использует картинку не из статьи, а из других статей типа «Читайте также то и то…», почему так?
Уже замучался переписывать код, казалось бы в html
документе картинка статьи — первая, а соцсети лезут за картинками дальше, к мелким картинкам, хотя они ниже в html
документе, и к заставке подставляют совсем не то что в статье. Как заставить соцсети отображать страницу правильно в постах?
- html
- соцсети
В целом, все очень хорошо документировано и известно.
<meta property="og:image" content="http://www.site.ua/url/to/my/picture.png" />
Протестировать свою страницу (а иногда и ошибку найти), можно в Facebook opengraph debugger
Из известных «особенностей» фейсбука:
- картинку выбираются в порядке следования в тексте, а картинка с og:image в самом верху.
- картинку может пропустить, если она «маленькая» (вроде меньше 200 пикселей)
- картинку может пропустить, если url содержит пробелы или кириллицу.
1
Использовать Open Graph разметку. За изображение будет отвечать
.
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Как создать картинки соцсети за несколько секунд
Картинки соцсети имеют обычно свои размеры, которые отличаются у каждой социальной сети. И часто бывает даже так, что уже готовая, созданная картинка не принимается сетью только потому, что отличается по размеру в несколько пикселей.
В связи с этим были созданы ресурсы по созданию изображений с заданными параметрами, соответствующими конкретной социальной сети. Таким очень простым и полезным ресурсом является “Создатель изображений социальных сетей”, расположенный по адресу http://www.autreplanete.com/ap-social-media-image-maker/
Это одна из страниц ресурса Autre planete , на котором можно создать QR-код. А также скачать иконки (516 картинок) для социальных сетей. Но нас интересуют изображения для соц сетей – всего их 15, которые можно сделать буквально за секунды. Надо просто выбрать в левом меню ту сеть, для которой Вы желаете создать изображение и перейти к загрузке картинки.
Давайте для примера создадим аватарку для твиттера.
Шаг 1. Выбираем опцию Твиттер или Щебет.
Появляется редактор профиля Твиттера, размер которого, составляет 240х240 рх Кликаем на кнопку – Создать
Шаг 2. Загружаем с компьютера изображение, желательно квадратное, и редактируем его. Расширение изображения может быть как jpeg, так и png.
Как видите, изображение загружается на квадратное поле. Вы можете картинку отредактировать по размеру. Например – обрезать белые поля, потянув за маркеры у пунктирного поля. Можете повернуть изображение, отразить его. После выполненных действий надо нажать на иконку с зеленой галочкой – Подать.
Всплывет иконка – Подтвердить действие. Нажимаем – ok. Это действие будет сигналом перехода к третьему шагу.
Шаг 3. Корректируем изображение. Или как обозначено на ресурсе – ретушируем изображение. Это можно сделать во вкладке, которая обозначена звездочками.
Для этого нажимаем на иконки над рисунком. Если результат нас не удовлетворит, можно вернуться к исходной картинке нажав на самую первую иконку, которая будет подписана – Нормальный.
Шаг 4. Редактируем изображение по дополнительным параметрам. Этот редактор обозначен иконкой – настройки
Помните о том, что одно нажатие на иконку – это один шаг. Если Вы хотите усилить действие ретуширования – нажимайте на иконку столько раз, сколько потребуется для получения должного результата. Для отмены созданного, нажмите на красный крестик справа.
Шаг 5. Подготовка к сохранению изображения.
На этом этапе мы присваиваем имя картинке и выбираем расширение.
Шаг 6. Сохранение.
Это последний шаг, при котором используется последняя иконка – папочка с голубой стрелкой. Вам предложат поделиться в соцсетях. Этот шаг можно игнорировать, после чего будет предложена на выбор папка для сохранения изображения на вашем компьютере. Обратите внимание на то, что в любом случае изображение сохраниться в нужном размере.Теперь можно загружать изображение в аккаунт Твиттера.
Надо сказать, что для создания картинки нужного размера – не обязательно ее ретушировать. Можно после загрузки сразу перейти к сохранению. И в этом случае, изображение так же будет в нужном размере.
Надеюсь, что данный ресурс поможет сохранить Ваше время и нервы.
Еще больше об инструментах можно узнать, подписавшись на рассылку – “Инструменты в помощь начинающему блогеру”
Ну что же, удачной Вам работы!
Будут вопросы или пожелания, пишите в комментариях.
Если информация была для Вас полезной – делитесь ей со своими друзьями в социальных сетях
Шесть простых вариантов изображений для социальных сетей
Если вы были в социальных сетях какое-то время, вы, возможно, хорошо знаете, что изображения могут помочь повысить вашу активность в Интернете.
Но, несмотря на то, что картинка может добавить изюминку вашим сообщениям, не всегда легко определить, какой тип изображения лучше всего публиковать . Их создание также может занять много времени, особенно если вы не уверены в том, что пытаетесь сообщить.
К счастью, решить, какой формат лучше всего подходит для ваших сообщений, несложно. В этом посте я опишу несколько простых вариантов изображений и покажу вам, когда их лучше всего использовать.
Готовы копать? Пойдем!
1. Фотографии
Это, несомненно, самый популярный тип изображения в социальных сетях. Относительно легко сделать снимок с помощью смартфона, а такие приложения, как Instagram и VSCO, упрощают редактирование фотографий до почти профессионального стандарта.
Хотя этот подход быстрый и простой, иногда его эффективность ограничена именно потому, что он такой быстрый и простой! Любой и каждый может прикреплять изображения к своим обновлениям, поэтому выделиться становится все труднее.
Итак, когда фотографии работают лучше всего? Когда изображение уникальное, необычное или мощное (т. е. когда изображение может рассказать свою собственную историю).
Вот несколько примеров:
Гэри Вайнерчук
У Вайнерчука огромное количество подписчиков в социальных сетях, потому что он потрясающий рассказчик. Этот пост — отличный пример того, как простое добавление к изображению (его ступни) небольшого дополнения добавляет поглощающий слой истории в обычную фотографию.
Всегда мечтал о абонементах на Никс… Неплохо для мальчика из Беларуси… Love u @aj… https://t.co/ucbum29MhH pic.twitter.com/bcLdX2Wl7z— Гэри Вайнерчук (@garyvee) 11 января 2016 г.
Когда дело доходит до публикации любого изображения в социальных сетях, особенно фотографий, сопроводительная копия очень важна . Менее чем в 140 символах Вайнерчуку удается нарисовать портрет своего пути от Беларуси к сезонным абонементам в Мэдисон-Сквер-Гарден.
Майк ЭскамильяЭскамилла — легендарный гонщик BMX и каскадер, который проводит большую часть своего времени, путешествуя по миру в поисках приключений. Он делает несколько поистине эпических снимков, которые привлекают внимание людей, например, этот драгоценный камень в Уистлере, Канада.
У него огромное количество поклонников, потому что на этих фотографиях он демонстрирует необычные и захватывающие действия.
Фотографии Эскамильи выделяются тем, что он берет своих последователей в путешествие и показывает им то, что они обычно не видят.
Однако вам не нужно быть глобальным авантюристом, чтобы отправиться со своими клиентами и подписчиками в путешествие. Просто открыться той стороне вашего бизнеса, которую люди обычно никогда не увидят, может быть очень увлекательно.
Мы пытаемся использовать этот подход в Buffer с нашей серией #weekinthelife в Instagram, где наша команда приглашает подписчиков за кулисы жизни удаленного работника.
Вот пример Героя Счастья, Росса, который делится своими настройками удаленной работы:
Fast Company
Простые изображения особенно хорошо подходят для новостей. Fast Company использовала эту фотографию, запечатлевшую памятный момент выступления президента Барака Обамы о положении дел в стране.
Правительство США предлагает более подробную информацию о своих «лунных» усилиях по излечению от рака: https://t.co/kx5uIAglsk pic.twitter.com/5Ov7PdHRDa2. C olllages— Fast Company (@FastCompany) 15 января 2016 г.
Коллажи позволяют использовать коллекцию изображений, чтобы рассказать историю или продемонстрировать предметы. Это не жесткие правила создания коллажей, но они особенно полезны в ситуациях, когда:
- Изображения могут установить временную шкалу событий.
- На изображениях показаны контрастные перспективы.
- Изображения могут подчеркивать интересные детали продукта или истории.
Изображения до/после, подобные этому, очень сильны, потому что они демонстрируют путешествие. Глод создала огромное количество подписчиков на Youtube и в Instagram, используя эти типы контрастных изображений. Несмотря на то, что он довольно регулярно публикует такие фотографии, они остаются невероятно вдохновляющими, потому что запечатлевают феноменальную историю.
КварцНа первый взгляд этот коллаж немного сбивает с толку. Какая связь между «Вселенной Стивена», «Оранжевый — хит сезона», Джимми Макналти и Безумным Максом? В этом весь смысл! Некоторых (таких как я) этот коллаж заинтересует достаточно, чтобы щелкнуть ссылку и прочитать историю. Представление контрастных изображений — это умный способ привлечь любознательных.
Как это возможно, что мы все еще рассказываем разные истории через призму белых мужчин? https://t.co/qSJSpTXFFR pic.twitter.com/fplhfw4ko7Shme Custom Kicks— Quartz (@qz) 14 января 2016 г.
Коллажи отлично подходят для демонстрации таких продуктов, как одежда и кухня. Этот пример от Shme показывает сложные детали со всех сторон обуви, что было бы невозможно с помощью одного снимка.
3. Текст на однотонном фонеЕсли изображения предназначены для того, чтобы рассказывать визуальную историю, то изображений, насыщенных текстом, предназначены для быстрой передачи очень конкретного сообщения. Слова менее увлекательны, чем фотографии, поэтому фразы в текстовых изображениях должны быть тщательно проработаны, если вы хотите, чтобы они выделялись. Варианты с большим объемом текста особенно полезны, когда они содержат:
- Вдохновляющие цитаты
- Привлекательные заголовки
- Интригующие выдержки (например, из статьи в блоге, книги)
Этот первый пример иллюстрирует силу слов и важность дизайна. Цитата короткая и глубокая, что повышает вероятность ее прочтения. Текст также занимает очень маленькую область на изображении, что еще больше подчеркивает цитату.
Никогда не забывайте об этом. pic.twitter.com/XlbEqRQKL4Эми Портерфилд— Мари Форлео (@marieforleo) 9 января 2016 г.
Портерфилд хорошо известна в мире онлайн-бизнеса, и этот социальный образ представляет собой броский заголовок, созданный для привлечения внимания. ее целевая персона. Когда у вас есть идеальный заголовок или подзаголовки, их можно легко превратить в социальный образ, чтобы привлечь вашу аудиторию.
Wall Street JournalВыдержки — это простой способ вызвать интерес к статье или публикации. WSJ использует этот подход для многих своих статей, и я часто ловлю себя на том, что останавливаюсь, чтобы прочитать эти фрагменты, когда просматриваю свою временную шкалу. Лучше всего выбирать наиболее привлекательные фрагменты для этих типов изображений, такие как все, что звучит особенно противоречиво, проницательно или смешно.
10 баллов: @gerardtbaker о нападениях на Джакарту, углубляющемся разгроме фондового рынка и многом другом https://t.co/Q2UmK6XJSf pic.twitter.com/hT8gUFU93g4. Текст с фото— Wall Street Journal (@WSJ) 14 января 2016 г.
Сочетание текста и фото — мой любимый вариант изображения в социальных сетях. Это не означает, что это лучший подход для любой ситуации, но он часто работает, поскольку облегчает слияние визуального повествования и убедительного текста .
Джей БаерДобавление текста поверх изображения особенно полезно при использовании стоковой фотографии. Многие изображения, находящиеся в открытом доступе, используются неоднократно, поэтому размещение одной фотографии часто недостаточно цепляет. Этот пример от Jay Baer показывает, как легко сделать обычную фотографию выделяющейся, добавив заголовок и всплеск цвета.
Почему B2B неправильно понимают #SocialMedia https://t.co/h6wdw3uyRF @JonathanWich @convince pic.twitter.com/kLIx9FEpUw— Джей Баер (@jaybaer) 14 января 2016 г.
Это изображение от Galbraith — прекрасный пример того, как привлекательная фотография и захватывающий текст могут отлично сочетаться друг с другом. Цитата может быть хороша сама по себе, но в сочетании с изображением она выделяется.
Шрия НеватияПризывы к действию также особенно хорошо работают в этом формате, как в этом замечательном примере от Шрии Неватии.
Вы женщина-технолог или основательница стартапа? Подпишитесь на наставников #TenXList! https://t. co/AX16WP0yKh pic.twitter.com/fhuRwfORJE5. Иконки и иллюстрации— Шрия Неватия (@shriyanevatia) 8 января 2016 г.
ваш контент. Прекрасная альтернатива фотографиям , потому что это визуальная форма общения, и их можно легко добавить в изображения. Часто меньше больше , когда дело доходит до этих элементов. Цель состоит в том, чтобы четко общаться с вашей аудиторией, а не в том, чтобы изображение выглядело причудливо.
Help ScoutКоманда Content Scout полностью использует возможности и простоту значков. От изображений в блогах до сообщений в социальных сетях — частое использование ими этой функции стало чем-то… знаковым! ?
Почему вы должны дорожить первыми тремя часами своего дня: https://t.co/U11s9VFz2Y pic.twitter.com/SgMia4FDOBГенеральная Ассамблея— Help Scout (@helpscout) 13 января 2016 г.
Добавление значков к фотографии — это простой способ сделать ее уникальной и заслуживающей внимания. Этот пост от General Assembly показывает горизонт Денвера, который не особенно интересен без значков.
Приятно познакомиться, Денвер! Мы очень рады открытию @GA_Denver. Подойди и скажи: «Здравствуйте!» https://t.co/fDTsYQS0fP pic.twitter.com/fBrmWYF27l6. Скриншоты— General Assembly (@GA) 11 января 2016 г.
Этот последний вариант, без сомнения, также самый простой. Скриншоты можно сделать за считанные секунды, и они очень полезны, когда привлекают внимание к разделу текста или изображений.
Крис ДиксонКрис Диксон — очень умный венчурный капиталист, который делится множеством отличных фрагментов. Его хроника в Твиттере полна интересных цитат и изображений, взятых из различных онлайн-статей.
«Доля населения мира, живущего в условиях крайней нищеты, упала ниже 10%.» https://t.co/Oin9AgINpr pic.twitter.com/Sa5dqN7WAdДжей Яроу— Крис Диксон (@cdixon) 16 января 2016 г.
Этот пример от Джея Яроу показывает универсальность скриншотов. Выделенная область особенно интригует, но он не ограничивается тем, что делится только этой частью текста.
Возможно, самый впечатляющий и само собой разумеющийся аспект Amazon. http://t.co/091MAqbPlk pic.twitter.com/RtHCFhQE9cКакой ваш любимый тип изображения?— Джей Яроу (@jyarow) 22 августа 2015 г.
Большинство этих изображений можно создать за несколько минут с помощью таких инструментов, как Pablo , Canva и PicMonkey. Конечно, есть много места для творчества, и я хотел бы услышать о том, что сработало для вас!
Какие типы изображений вы используете в социальных сетях и какие оказались наиболее успешными?
5 элементов успешного изображения профиля в социальных сетях
В любой кампании по привлечению потенциальных клиентов или маркетингу в социальных сетях вам нужно показать себя с лучшей стороны.
Готовы ли вы удивить потенциальных клиентов, партнеров или работодателей снимком в голову, на котором вы будете выглядеть как профессионал в своей отрасли?
Первое и самое важное, что вам нужно помнить, это то, что первое впечатление — это все , особенно в Интернете. У вас есть секунды, чтобы произвести впечатление, прежде чем они оценят вас и пойдут дальше.
Хотя ваше фото профиля должно быть профессиональным, вы также хотите, чтобы оно отражало вашу индивидуальность и личный бренд .
Также может быть хорошей идеей использовать одно и то же изображение профиля во всех ваших профилях в социальных сетях. Это не только обеспечивает единообразие брендинга, но и помогает людям узнавать вас, когда они видят изображение вашего профиля на каждой из различных платформ социальных сетей.
Профессиональное присутствие бренда начинается с отличной фотографии, и вот пять элементов успешного изображения профиля в социальных сетях, которые гарантируют, что вы произведете правильное впечатление на потенциальных клиентов или
1. Иметь чистый или однотонный фонмаркетинговая кампания в социальных сетях . Лучшие фотографы дикой природы оттачивают свои объекты и оживляют детали бабочки или цветка, позволяя фону исчезать из нашей визуальной перспективы.
Хорошая фотография профиля должна делать то же самое. Убедитесь, что фон не перегружен и не сложен, чтобы вы могли оставаться в фокусе фотографии.
2. Покажи себя с лучшей стороныХотя приятно иметь фотографии с друзьями и коллегами, фотография вашего профиля должна изображать исключительно вас.
Убедитесь, что вы не «вырезаете» кого-либо из фотографии, обрезая ее или используя ту фотографию, на которой вы выглядите потрясающе, с вашего последнего отпуска в Швейцарских Альпах.
Я настоятельно рекомендую вам подумать о том, чтобы нанять профессионального фотографа или опытного друга, чтобы сделать отличный портретный снимок, на котором изображены ты , соло.
3. Используйте выстрел в головуМожет показаться заманчивым использовать фотографии, на которых вы занимаетесь интересными и активными делами, в своих профилях в социальных сетях, например, размещаете плакаты политических активистов или поднимаетесь на Эверест.
Несмотря на то, что включать этот тип динамизма в свой расширенный профиль — это здорово, ваше изображение профиля производит серьезное первое впечатление, и оно должно быть крупным планом с изображением вашего лица и глаз.
Я не могу не подчеркнуть, насколько важно при создании первого впечатления с помощью фотографии профиля, что изображение представляет собой снимок головы с видимыми глазами, смотрящими в камеру.
Существует много научных исследований, почему это так важно, и если вам интересно, вы можете узнать больше о социальной психологии фотографий профилей в социальных сетях здесь .
4. Подчеркните свою индивидуальность с помощью цвета Цвет — отличный способ подчеркнуть вашу индивидуальность в изображении профиля.